/* ══════════════════════════════════════════════════════════════════════════
   Instrumentos · Warehouse Ops
   ------------------------------------------------------------------------
   O Ops já sabia mostrar número. O que faltava era medida: o quanto disso
   é muito, o que mudou desde o mês passado e onde não existe dado nenhum.
   Esta folha traz cinco instrumentos e nenhuma cor nova: mostrador de
   tracinhos, pílula de variação, trilho fantasma, hachura de ausência e
   rosca de participação. Todos herdam --cash, --due, --late e --brand.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --instr-track: color-mix(in srgb, var(--line-2) 76%, transparent);
  --instr-ghost: color-mix(in srgb, var(--line) 92%, transparent);
  --tone-c: var(--muted);
}

.cash { --tone-c: var(--cash); }
.due { --tone-c: var(--due); }
.late { --tone-c: var(--late); }
.brand { --tone-c: var(--brand); }
.future,
.quiet { --tone-c: var(--muted); }

/* ── 1. Mostrador de tracinhos ──────────────────────────────────────────
   Quarenta e quatro traços em arco. Os acesos contam o quanto foi feito,
   o traço da ponta é mais longo e faz o papel de ponteiro. Um por tela. */

.tick-gauge {
  position: relative;
  display: block;
  width: min(230px, 100%);
  margin: 0;
}

.tick-gauge svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.gauge-tick {
  stroke: var(--instr-track);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke var(--t-base) var(--ease);
}

.gauge-tick.on { stroke: var(--tone-c); }

.gauge-tick.head {
  stroke: var(--tone-c);
  stroke-width: 3.5;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tone-c) 55%, transparent));
}

/* A entrada é uma varredura: os traços acendem da esquerda para a direita,
   no tempo de ler o número que está no miolo. */
@media (prefers-reduced-motion: no-preference) {
  .tick-gauge .gauge-tick.on { animation: gauge-acende var(--t-fast) var(--ease) both; }
  .tick-gauge svg { --step: 12ms; }
  .gauge-tick.on:nth-child(1) { animation-delay: 0ms; }
  .gauge-tick.on { animation-delay: calc(var(--t-fast) * 0.4); }
}

@keyframes gauge-acende {
  from { stroke: var(--instr-track); }
  to { stroke: var(--tone-c); }
}

.gauge-core {
  position: absolute;
  inset: auto 0 4%;
  display: grid;
  gap: 3px;
  justify-items: center;
  text-align: center;
  pointer-events: none;
}

.gauge-value {
  color: var(--ink);
  font-size: clamp(1.5rem, 2.1vw, 2rem);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
}

.gauge-caption {
  max-width: 20ch;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.tick-gauge.late .gauge-value { color: var(--late); }
.tick-gauge.cash .gauge-value { color: var(--cash); }
.tick-gauge.due .gauge-value { color: var(--due); }

/* Dentro do hero escuro o mostrador troca de fundo, não de linguagem. */
.summary-hero .gauge-tick,
.hero .gauge-tick { stroke: var(--hero-line); }
.summary-hero .gauge-tick.on,
.summary-hero .gauge-tick.head,
.hero .gauge-tick.on,
.hero .gauge-tick.head { stroke: var(--tone-c); }
.summary-hero .gauge-value,
.hero .gauge-value { color: var(--hero-ink); }
.summary-hero .gauge-caption,
.hero .gauge-caption { color: var(--hero-muted); }

/* O herói é a única superfície que fica escura nos dois temas. Quem pinta com
   --ink some no claro: no tema claro essa tinta é quase preta e o número da
   leitura rápida sumia inteiro dentro do cartaz. */
.summary-hero .hero-glance-value,
.hero .hero-glance-value { color: var(--hero-ink); }

/* ── 2. Pílula de variação ──────────────────────────────────────────────
   O único lugar do app em que um número fala do passado. Subir dinheiro é
   verde; subir custo é vermelho, e quem inverte isso é quem a constrói. */

.delta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tone-c) 14%, transparent);
  color: var(--tone-c);
  font-size: 11px;
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.delta-pill.up { --tone-c: var(--cash); }
.delta-pill.down { --tone-c: var(--late); }
.delta-pill.neutral {
  --tone-c: var(--muted);
  background: color-mix(in srgb, var(--line-2) 55%, transparent);
}

.delta-arrow { font-style: normal; font-size: 12px; line-height: 1; }
.delta-pill small { color: inherit; font-size: 10px; font-weight: var(--w-medium); opacity: 0.72; }

.summary-hero .delta-pill,
.hero .delta-pill { background: color-mix(in srgb, var(--tone-c) 20%, transparent); }

/* ── 3. Trilho fantasma ─────────────────────────────────────────────────
   Uma barra sozinha não diz nada. Dentro do trilho que marca o maior valor
   da série, a mesma barra vira proporção. */

.ghost-rail {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--instr-ghost);
}

.ghost-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--tone-c);
  transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
  .ghost-fill { animation: rail-preenche var(--t-slow) var(--ease) both; }
}

@keyframes rail-preenche {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Sem dado a régua não fica vazia: ela fica hachurada. */
.ghost-rail.is-blank .ghost-fill {
  background: repeating-linear-gradient(
    45deg,
    var(--instr-ghost) 0 3px,
    transparent 3px 6px
  );
}

/* ── 4. Colunas com trilho e hachura ────────────────────────────────────
   O horizonte do caixa. A coluna zerada continua ocupando o lugar dela,
   hachurada, porque "nada aqui" é uma leitura, não um buraco. */

.ghost-columns {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.ghost-col {
  display: grid;
  grid-template-rows: var(--col-h, 96px) auto auto;
  gap: 10px;
  min-width: 0;
}

.ghost-col-track {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
  border-radius: 9px;
  background: var(--instr-ghost);
}

.ghost-col-bar {
  width: 100%;
  height: var(--h, 4%);
  border-radius: 9px;
  background: var(--tone-c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* O tom neutro é ausência de decisão, não destaque: cheio, ele virava o
   bloco mais claro da tela e roubava a leitura das colunas com estado. */
.ghost-col.future .ghost-col-bar {
  background: color-mix(in srgb, var(--muted) 46%, transparent);
  box-shadow: none;
}

.ghost-col.zero .ghost-col-bar {
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--line-2) 70%, transparent) 0 4px,
    transparent 4px 8px
  );
  box-shadow: none;
}

.ghost-col-label {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: var(--track);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.ghost-col-value {
  color: var(--ink-2);
  font-family: var(--num);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.ghost-col.zero .ghost-col-value { color: var(--muted-2); }

@media (prefers-reduced-motion: no-preference) {
  .ghost-col-bar {
    transform-origin: bottom;
    animation: col-cresce var(--t-slow) var(--ease) both;
    animation-delay: calc(var(--i, 0) * 60ms);
  }
}

@keyframes col-cresce {
  from { transform: scaleY(0.04); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

/* ── 5. Rosca de participação ───────────────────────────────────────────
   Quatro arcos de topo arredondado com folga entre eles. O miolo guarda o
   total, para o gráfico não precisar de uma frase embaixo explicando. */

.donut-split {
  position: relative;
  display: block;
  width: min(210px, 100%);
  margin: 0;
  flex-shrink: 0;
}

.donut-split svg {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(-90deg);
}

.donut-track {
  fill: none;
  stroke: var(--instr-ghost);
  stroke-width: 22;
}

.donut-arc {
  fill: none;
  stroke: var(--brand);
  stroke-width: 22;
  stroke-linecap: round;
}

@media (prefers-reduced-motion: no-preference) {
  .donut-arc {
    animation: donut-desenha var(--t-slow) var(--ease) both;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
}

@keyframes donut-desenha {
  from { opacity: 0; stroke-width: 8; }
  to { opacity: 1; stroke-width: 22; }
}

.donut-core {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 4px;
  align-content: center;
  justify-items: center;
  text-align: center;
  pointer-events: none;
}

.donut-core strong {
  color: var(--ink);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.donut-core span {
  max-width: 12ch;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: var(--w-bold);
  letter-spacing: var(--track);
  line-height: 1.3;
  text-transform: uppercase;
}

/* ── 6. Legenda de proporção ────────────────────────────────────────────
   A metade escrita da rosca: nome à esquerda, percentual encostado na
   direita, e nada no meio para o olho tropeçar. */

.share-legend {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.share-legend-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.share-legend li:last-child .share-legend-row { border-bottom: 0; }

a.share-legend-row:hover .share-name { color: var(--ink); }

.share-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--muted);
}

.share-name {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-pct {
  color: var(--ink);
  font-family: var(--num);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-semibold);
}

.share-note {
  grid-column: 2 / -1;
  margin-top: -4px;
  padding-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
}

/* ── 7. Disco de ícone ──────────────────────────────────────────────────
   A assinatura de cabeçalho. Trinta e quatro pixels, borda de repouso e o
   ícone que o app já mantém. Ele identifica o bloco sem gritar. */

.icon-disc {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--tone-c);
}

.icon-disc svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.7;
}

.icon-disc.brand,
.icon-disc.cash,
.icon-disc.due,
.icon-disc.late {
  border-color: color-mix(in srgb, var(--tone-c) 32%, var(--line));
  background: color-mix(in srgb, var(--tone-c) 10%, var(--surface-2));
}

/* ══════════════════════════════════════════════════════════════════════════
   Aplicações
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A. Painel de leitura do hero da home ───────────────────────────────
   A coluna direita do hero era três linhas de texto ocupando o lugar mais
   caro da tela. Ela vira instrumento: mostrador de meta em cima, as três
   leituras do dia embaixo, cada uma com a sua régua. */

@media (min-width: 1080px) {
  #view-home .summary-hero-lede .hero-glance {
    justify-content: flex-start;
    gap: 18px;
    padding-top: 4px;
  }

  .hero-glance-instrument {
    display: grid;
    justify-items: center;
    gap: 12px;
    min-width: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--hero-line);
    text-align: center;
  }

  .hero-glance-instrument .tick-gauge { width: min(196px, 100%); }

  .hero-glance-read {
    display: grid;
    justify-items: center;
    gap: 7px;
    min-width: 0;
    max-width: 100%;
  }

  .hero-glance-read > * { max-width: 100%; overflow-wrap: anywhere; }

  .hero-glance-read strong {
    color: var(--hero-ink);
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    font-weight: var(--w-semibold);
    letter-spacing: -0.03em;
  }

  .hero-glance-read span {
    color: var(--hero-muted);
    font-size: 12.5px;
    line-height: 1.45;
  }

  .hero-glance-rows { margin-top: 0; border-top: 0; }

  .hero-glance-row {
    grid-template-columns: 72px max-content minmax(0, 1fr);
    padding: 11px 0;
  }

  .hero-glance-row .ghost-rail {
    grid-column: 1 / -1;
    height: 4px;
    margin-top: 2px;
    --instr-ghost: var(--hero-line);
  }
}

/* ── B. Calendário com carga ────────────────────────────────────────────
   O ponto verde dizia "tem coisa nesse dia" e nada mais. O mesmo dado,
   pintado como intensidade, transforma o mês em mapa de carga. */

.calendar-day {
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.calendar-day[data-load] {
  background: color-mix(in srgb, var(--brand) calc(var(--load, 0) * 1%), transparent);
  color: var(--ink);
  font-weight: var(--w-medium);
}

.calendar-day[data-load="3"] { color: #fff; }
.calendar-day.is-today[data-load] { background: var(--brand); }

.calendar-day i {
  bottom: 5px;
  width: 3px;
  height: 3px;
  background: var(--brand-2);
}

.calendar-day.is-today i { background: #fff; }

.calendar-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 11px;
}

.calendar-legend .steps {
  display: flex;
  gap: 3px;
}

.calendar-legend .steps i {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--brand) calc(var(--s, 0) * 1%), transparent);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ── C. Cabeçalho de bloco com disco ────────────────────────────────────
   Todo bloco da home passa a se apresentar: disco, nome e a medida do
   bloco na mesma linha, com a seta encostada na direita. */

.overview-head {
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.overview-head .icon-disc { margin-right: 2px; }
.overview-head h2 { margin-right: auto; }

.overview-head .head-metric {
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: right;
}

.overview-head .head-metric b {
  color: var(--ink);
  font-family: var(--num);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-semibold);
}

.overview-head .head-metric small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: var(--w-bold);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.overview-caption { margin-top: 16px; }

/* ── D. Semana de produção no card de Tasks ─────────────────────────────
   O card ficava vazio quando não havia nota. Sete colunas com o trilho do
   dia dizem a mesma coisa em forma de medida: onde a semana está pesada. */

.week-load {
  display: grid;
  gap: 14px;
  margin: 22px 0 4px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  background: var(--surface-inset);
}

.week-load-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.week-load-head strong {
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: var(--w-bold);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.week-load-head span { color: var(--muted); font-size: 12px; }

.week-load .ghost-columns { gap: 7px; }
.week-load .ghost-col { grid-template-rows: var(--col-h, 64px) auto; gap: 8px; }
.week-load .ghost-col-value { display: none; }
.week-load .ghost-col-label { text-align: center; font-size: 9.5px; }
.week-load .ghost-col.is-today .ghost-col-label { color: var(--brand-ink); }

/* ── E. Horizonte do caixa ──────────────────────────────────────────────
   Substitui as barras soltas por colunas com trilho. A coluna sem valor
   deixa de parecer um card vazio. */

.horizon-block .ghost-columns { margin-top: 4px; }

/* ── F. Carteira: rosca e legenda lado a lado ───────────────────────────*/

.wallet-split {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 44px);
  margin: 20px 0 28px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  background: var(--surface);
  box-shadow: var(--e1);
}

.wallet-split-copy { display: grid; gap: 14px; min-width: 0; }

.wallet-split-copy > header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wallet-split-copy h3 {
  margin: 0;
  margin-right: auto;
  color: var(--ink);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: var(--w-semibold);
  letter-spacing: -0.03em;
}

.wallet-split-meta {
  color: var(--muted);
  font-family: var(--num);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .wallet-split { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .wallet-split-copy { width: 100%; }
}

/* ── G. Variação nos KPIs do caixa ──────────────────────────────────────*/

.kpi .delta-pill { margin-top: 8px; justify-self: start; }
.kpi-head { display: flex; align-items: center; gap: 8px; }

/* ── H. Área sob a curva anual ──────────────────────────────────────────*/

.area-stop-top.cash { stop-color: var(--cash); stop-opacity: 0.26; }
.area-stop-bottom.cash { stop-color: var(--cash); stop-opacity: 0; }
.plot-area { stroke: none; }
.plot-hatch { fill: url(#wh-hatch); stroke: none; }
.hatch-ground { fill: transparent; }
.hatch-line { stroke: var(--line-2); stroke-width: 2.4; }
.plot-line.actual { filter: drop-shadow(0 3px 10px color-mix(in srgb, var(--cash) 34%, transparent)); }
.plot-dot.head { r: 5; }

/* Meses sem lançamento ganham uma coluna hachurada em vez de sumirem. */
.plot-gap { fill: url(#wh-hatch); opacity: 0.5; }
.plot-gap-label { fill: var(--muted-2); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ── I. O rail contextual deixa de ser uma placa vazia ──────────────────
   Em Tasks e agenda o desktop reservava 250px para título e lentes. O
   instrumento do setor ocupa o resto da coluna com leitura, não com ar. */

.rail-instrument {
  display: grid;
  gap: 16px;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

.rail-instrument > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.rail-instrument > header strong {
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: var(--w-bold);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.rail-instrument > header span { color: var(--muted); font-size: 11.5px; }

.rail-instrument .tick-gauge { justify-self: center; width: min(190px, 100%); }

.rail-read {
  display: grid;
  gap: 10px;
}

.rail-read-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: baseline;
  gap: 10px;
  color: var(--muted);
  font-size: 12.5px;
}

.rail-read-row b {
  color: var(--ink);
  font-family: var(--num);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.rail-read-row .ghost-rail { grid-column: 1 / -1; height: 4px; }

/* A configuração fica logo abaixo do instrumento da Agenda: ação única,
   explicação curta e estado explícito, sem transformar o rail em menu. */
.calendar-setup {
  display: grid;
  min-width: 0;
  gap: 10px;
  margin-top: var(--s3);
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--future) 18%, var(--line));
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--future) 5%, var(--surface));
  box-shadow: var(--shadow-sm);
}

.calendar-setup-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.calendar-setup-ico {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--future) 30%, var(--line));
  border-radius: var(--r-ctl);
  background: color-mix(in srgb, var(--future) 9%, var(--surface-2));
  color: var(--future-2);
}

.calendar-setup-ico svg { width: 16px; height: 16px; }

.calendar-setup-copy-head { display: grid; gap: 2px; min-width: 0; }
.calendar-setup-copy-head span {
  color: var(--future-2);
  font-size: 8.5px;
  font-weight: var(--w-heavy);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.calendar-setup-copy-head strong { color: var(--ink); font-size: 13px; font-weight: var(--w-semibold); }

.calendar-setup-description,
.calendar-setup-status {
  margin: 0;
  min-width: 0;
  font-size: 10.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.calendar-setup-description { color: var(--muted); }
.calendar-setup-status { color: var(--muted-2); }

/* O rótulo é uma frase, não uma etiqueta: num rail estreito ele precisa
   quebrar. Chip herda `inline-flex` com `white-space: nowrap`, e o mínimo de
   conteúdo de um item de grade é o texto inteiro, então a caixa vazava para
   fora do cartão em vez de encolher. Aqui ele vira flex de duas colunas, com
   `min-width: 0` autorizando a quebra. */
.calendar-setup-btn {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--future-line);
  border-radius: var(--r-ctl);
  background: var(--future-bg);
  color: var(--future-2);
  font-size: 11px;
  font-weight: var(--w-semibold);
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-base) var(--spring);
}

.calendar-setup-btn::after { content: "↗"; flex: 0 0 auto; margin-left: 0; font-size: 13px; }
.calendar-setup-btn:hover { border-color: var(--future-2); background: color-mix(in srgb, var(--future) 15%, var(--surface-2)); }
.calendar-setup-btn:active { transform: scale(.98); }
.calendar-setup-btn:disabled { cursor: wait; opacity: .66; transform: none; }

@media (max-width: 1079px) {
  .calendar-setup { margin-top: var(--s4); }
}

@media (max-width: 1079px) {
  .rail-instrument { display: none; }
}

/* O disco recebe o mesmo nó de ícone que o resto do app usa, e esse nó é um
   span. Sem isto ele empurraria o desenho para fora do círculo. */
.icon-disc > span { display: grid; place-items: center; width: 17px; height: 17px; }
.icon-disc > span svg { width: 100%; height: 100%; }

/* ── K. Mostrador da competência no herói do caixa ──────────────────────*/

.hero-meter {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-width: 0;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--hero-line);
  text-align: center;
}

.hero-meter .tick-gauge { width: min(190px, 100%); }

.hero-meter-read { display: grid; gap: 7px; min-width: 0; max-width: 100%; justify-items: center; }
.hero-meter-read > * { max-width: 100%; overflow-wrap: anywhere; }

.hero-meter-read strong {
  color: var(--hero-ink);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.hero-meter-read span {
  color: var(--hero-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

/* ── L. Mês sem movimento no gráfico do ano ─────────────────────────────
   O trilho vazio já existia; o que faltava era dizer que ele está vazio de
   propósito, e não porque a barra não foi desenhada. */

.finance-year-chart button.vazio .track {
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--line-2) 62%, transparent) 0 3px,
    transparent 3px 7px
  );
}

/* ── M. Cabeçalho do bloco de caixa da home ─────────────────────────────*/

.overview-finance > .overview-head .delta-pill { margin-right: 4px; }
.overview-finance > .overview-head .chip-btn,
.overview-finance > .overview-head a { flex-shrink: 0; }

.overview-facts > div { display: grid; gap: 8px; align-content: start; }
.overview-facts .ghost-rail { margin-top: 2px; }

/* ── O. O hero da home fica com a leitura no centro ─────────────────────
   Com o instrumento na coluna direita, a coluna esquerda ficava alta e o
   texto grudado no topo, deixando um vão de meia tela embaixo dele. */
@media (min-width: 1080px) {
  #view-home .summary-hero-lede .summary-hero-copy { align-self: center; }
}

/* ── J. Correções de acabamento encontradas na inspeção ─────────────────*/

/* Em 412px a home vazava para a direita: a grade de dois portais continuava
   com duas colunas abaixo do ponto em que ela cabe. */
@media (max-width: 900px) {
  #view-home .home-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  /* Na coluna de KPI o sufixo da pílula empurrava o desenho para cima do
     divisor vizinho. A seta e o número bastam: o rótulo do bloco já disse
     de qual competência se trata. */
  .kpi .delta-pill small { display: none; }
}

@media (max-width: 520px) {
  .tick-gauge { width: min(200px, 100%); margin-inline: auto; }
  .ghost-columns { gap: 6px; }
  .ghost-col-label { font-size: 9px; }
  .ghost-col-value { font-size: 11.5px; }
  .wallet-split { padding: 18px; }
  .week-load { padding: 16px; }
}

/* ── K. Caixa: esteira, mesa e pódio ───────────────────────────────────
   A lente de lançamentos deixou de ser sete chips e uma grade de cartões em
   duas colunas: o tempo passou a ser o filtro, e cada faixa carrega o próprio
   subtotal. A lente de clientes deixou de dizer concentração quatro vezes. */

/* Recorte herdado de um atalho: existe, se anuncia, e devolve o mês. */
.finance-recorte {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface-inset);
}
.finance-recorte strong { font-size: 12.5px; font-weight: var(--w-semibold); }
.finance-recorte span { color: var(--muted); font-size: 12px; margin-right: auto; }

.finance-layout-switch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.finance-layout-switch > span {
  margin-right: 4px;
  color: var(--muted-2);
  font-size: var(--t-cap);
  font-weight: var(--w-bold);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

/* ── esteira ── */
.finance-lane { display: grid; }
.finance-lane-head {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 76px auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 10px;
  border-radius: var(--r-ctl);
  text-align: left;
  transition: background var(--t-fast) var(--ease-move);
}
.finance-lane-head:hover { background: var(--surface); }
.finance-lane[data-tone="late"] .finance-lane-head { background: color-mix(in srgb, var(--late) 7%, transparent); }
.finance-lane[data-tone="late"] .finance-lane-head:hover { background: color-mix(in srgb, var(--late) 11%, transparent); }
.finance-lane-caret {
  display: grid;
  place-items: center;
  color: var(--muted-2);
  font-size: 13px;
  line-height: 1;
  transition: transform var(--t-base) var(--ease-move);
}
.finance-lane[data-open="false"] .finance-lane-caret { transform: rotate(-90deg); }
.finance-lane-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.finance-lane-name b {
  color: var(--muted);
  font-size: var(--t-cap);
  font-weight: var(--w-bold);
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.finance-lane[data-tone="late"] .finance-lane-name b { color: var(--late); }
.finance-lane[data-tone="due"] .finance-lane-name b { color: var(--due); }
.finance-lane[data-tone="cash"] .finance-lane-name b { color: var(--cash); }
.finance-lane-name span { color: var(--muted-2); font-size: 11.5px; }

/* O medidor compara faixas, então mora colado ao subtotal. Na largura da
   página ele lia como sublinhado, não como quantidade. */
.finance-lane-track { height: 4px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.finance-lane-track i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--line-2);
  transform-origin: left;
  animation: lane-grow var(--t-enter) var(--ease-out) both;
}
.finance-lane[data-tone="late"] .finance-lane-track i { background: var(--late); }
.finance-lane[data-tone="due"] .finance-lane-track i { background: var(--due); }
.finance-lane[data-tone="cash"] .finance-lane-track i { background: var(--cash); }
@keyframes lane-grow { from { transform: scaleX(0); } }

.finance-lane-sum {
  font-size: 15px;
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}
.finance-lane[data-tone="late"] .finance-lane-sum { color: var(--late); }

.finance-lane-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--t-slow) var(--ease-out);
}
.finance-lane[data-open="false"] .finance-lane-body { grid-template-rows: 0fr; }
.finance-lane-body > div { overflow: hidden; min-height: 0; display: grid; gap: 6px; padding-bottom: 10px; }

/* ── mesa ── */
.finance-cuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.finance-cut {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  text-align: left;
  transition: background var(--t-fast) var(--ease-move), border-color var(--t-fast) var(--ease-move);
}
.finance-cut:hover { background: var(--surface); border-color: var(--line-2); }
.finance-cut[aria-pressed="true"] { background: var(--surface-3); border-color: var(--line-2); }
.finance-cut em {
  font-style: normal;
  color: var(--muted-2);
  font-size: var(--t-cap);
  font-weight: var(--w-bold);
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.finance-cut b { font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: -0.025em; }
.finance-cut[data-tone="due"] b { color: var(--due); }
.finance-cut[data-tone="late"] b { color: var(--late); }

.finance-desk { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 8px; align-items: start; }
.finance-desk-list {
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  background: var(--surface);
  overflow: hidden;
}
.finance-desk-item {
  position: relative;
  display: grid;
  grid-template-columns: 62px 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  transition: background var(--t-fast) var(--ease-move);
}
.finance-desk-item:last-child { border-bottom: 0; }
.finance-desk-item:hover { background: var(--surface-2); }
.finance-desk-item[aria-current="true"] { background: var(--surface-3); }
.finance-desk-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: var(--r-pill);
  background: var(--brand);
  transform: scaleY(0);
  transition: transform var(--t-base) var(--ease-out);
}
.finance-desk-item[aria-current="true"]::before { transform: scaleY(1); }
.finance-desk-when { color: var(--muted-2); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.finance-desk-item.is-late .finance-desk-when { color: var(--late); }
.finance-desk-copy { min-width: 0; display: grid; gap: 1px; }
.finance-desk-copy strong { font-size: 13.5px; font-weight: var(--w-semibold); }
.finance-desk-copy small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finance-desk-item > b { font-size: 14px; font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.finance-desk-item.is-due > b { color: var(--due); }
.finance-desk-item.is-late > b,
.finance-desk-item.is-review > b { color: var(--late); }
.finance-desk-item.is-cash > b { color: var(--cash); }

.finance-sheet {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  background: var(--surface);
  box-shadow: var(--e1);
  animation: sheet-in var(--t-base) var(--ease-out) both;
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } }
.finance-sheet-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; }
.finance-sheet-title { margin: 0; font-size: 19px; font-weight: var(--w-bold); letter-spacing: -0.03em; }
.finance-sheet-val {
  font-size: 32px;
  font-weight: var(--w-bold);
  letter-spacing: -0.045em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.finance-sheet-val.is-due { color: var(--due); }
.finance-sheet-val.is-late,
.finance-sheet-val.is-review { color: var(--late); }
.finance-sheet-val.is-cash { color: var(--cash); }
.finance-sheet-facts { display: grid; border-top: 1px solid var(--line); }
.finance-sheet-facts div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.finance-sheet-facts span:first-child { color: var(--muted); }
.finance-sheet-facts span:last-child { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.finance-sheet .finance-editor { margin: 0; }

/* ── pódio e cauda ── */
.wallet-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.wallet-top small {
  display: block;
  margin-bottom: 4px;
  color: var(--muted-2);
  font-size: var(--t-cap);
  font-weight: var(--w-bold);
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.wallet-amount {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: var(--w-bold);
  letter-spacing: -0.045em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.wallet-gauge-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--muted); font-size: 12.5px; }
.wallet-gauge-top b { color: var(--ink-2); font-weight: var(--w-semibold); }
.wallet-gauge-track { position: relative; height: 6px; margin-top: 12px; border-radius: var(--r-pill); background: var(--surface-3); }
.wallet-gauge-zone { position: absolute; top: 0; bottom: 0; border-radius: var(--r-pill); }
.wallet-gauge-zone[data-z="ok"] { left: 0; width: 34%; background: color-mix(in srgb, var(--cash) 30%, transparent); }
.wallet-gauge-zone[data-z="mid"] { left: 34%; width: 28%; background: color-mix(in srgb, var(--due) 30%, transparent); }
.wallet-gauge-zone[data-z="hi"] { left: 62%; right: 0; background: color-mix(in srgb, var(--late) 30%, transparent); }
.wallet-gauge-pin {
  position: absolute;
  top: -5px;
  left: var(--x);
  width: 2px;
  height: 16px;
  border-radius: var(--r-pill);
  background: var(--ink);
  transform: translateX(-50%);
  animation: gauge-pin var(--t-enter) var(--ease-out) both;
}
.wallet-gauge-pin::after {
  content: attr(data-v);
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink-2);
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
@keyframes gauge-pin { from { left: 0; opacity: 0; } }
.wallet-gauge-zones {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  color: var(--muted-2);
  font-size: var(--t-cap);
  font-weight: var(--w-bold);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.wallet-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wallet-pod {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  background: var(--surface);
  text-align: left;
  overflow: hidden;
  animation: pod-in var(--t-slow) var(--ease-out) both;
  animation-delay: var(--stagger, 0ms);
  transition: transform var(--t-base) var(--ease-move), border-color var(--t-base) var(--ease-move), box-shadow var(--t-base) var(--ease-move);
}
@keyframes pod-in { from { opacity: 0; transform: translateY(14px); } }
.wallet-pod:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--e2); }
.wallet-pod-rank {
  color: var(--muted-2);
  font-size: var(--t-cap);
  font-weight: var(--w-bold);
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.wallet-pod.is-lead .wallet-pod-rank { color: var(--brand-ink); }
.wallet-pod-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wallet-pod-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--r-ctl);
  color: var(--who, var(--muted));
  background: color-mix(in srgb, var(--who, var(--muted)) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--who, var(--muted)) 30%, transparent);
  font-size: 12px;
  font-weight: var(--w-bold);
}
.wallet-pod-name { min-width: 0; display: grid; gap: 1px; }
.wallet-pod-name strong { font-size: 16px; font-weight: var(--w-semibold); letter-spacing: -0.025em; }
.wallet-pod-name small { color: var(--muted); font-size: 12px; }
.wallet-pod-val { font-size: 24px; font-weight: var(--w-bold); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.wallet-pod-share { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.wallet-pod-bar { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.wallet-pod-bar i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--who, var(--muted));
  transform-origin: left;
  animation: lane-grow var(--t-enter) var(--ease-out) both;
  animation-delay: var(--stagger, 0ms);
}
.wallet-pod-facts {
  display: flex;
  gap: 18px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.wallet-pod-facts b { color: var(--ink-2); font-weight: var(--w-semibold); }
.wallet-pod-facts b.due { color: var(--due); }

.wallet-tail { border: 1px solid var(--line); border-radius: var(--r-block); overflow: hidden; }
.wallet-tail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 18px;
  text-align: left;
  transition: background var(--t-fast) var(--ease-move);
}
.wallet-tail-head:hover { background: var(--surface); }
.wallet-tail-head b { font-size: 13.5px; font-weight: var(--w-semibold); }
.wallet-tail-head small { color: var(--muted); font-size: 12px; }
.wallet-tail-caret { color: var(--muted-2); font-size: 13px; line-height: 1; transition: transform var(--t-base) var(--ease-move); }
.wallet-tail[data-open="false"] .wallet-tail-caret { transform: rotate(-90deg); }
.wallet-tail-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--ease-out); }
.wallet-tail[data-open="true"] .wallet-tail-body { grid-template-rows: 1fr; }
.wallet-tail-body > div { overflow: hidden; min-height: 0; }
.wallet-tail-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 74px 116px 58px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 18px;
  border-top: 1px solid var(--line);
  text-align: left;
  font-size: 12.5px;
  transition: background var(--t-fast) var(--ease-move);
}
.wallet-tail-row.is-head {
  color: var(--muted-2);
  font-size: var(--t-cap);
  font-weight: var(--w-bold);
  letter-spacing: var(--track);
  text-transform: uppercase;
}
button.wallet-tail-row:hover { background: var(--surface); }
.wallet-tail-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wallet-tail-n { color: var(--muted-2); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.wallet-tail-j,
.wallet-tail-m,
.wallet-tail-p { text-align: right; font-variant-numeric: tabular-nums; }
.wallet-tail-j,
.wallet-tail-p { color: var(--muted); }

@media (max-width: 1000px) {
  .finance-desk { grid-template-columns: minmax(0, 1fr); }
  .finance-sheet { position: static; }
  .wallet-podium { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .finance-cuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Com 76px reservados o subtotal era espremido, então a faixa perde o
     medidor e mantém o número, que é o que decide. */
  .finance-lane-head { grid-template-columns: 14px minmax(0, 1fr) auto; padding-inline: 4px; }
  .finance-lane-track { display: none; }
  .finance-lane-name { display: grid; gap: 2px; }
  .finance-desk-item { grid-template-columns: 8px minmax(0, 1fr) auto; }
  .finance-desk-when { display: none; }
  .wallet-tail-row { grid-template-columns: 22px minmax(0, 1fr) 96px; }
  .wallet-tail-j,
  .wallet-tail-p { display: none; }
}

/* Dentro de uma faixa que já carrega o estado, o véu da linha vira a mesma
   cor dita duas vezes. A tinta volta para onde o DESIGN.md a coloca: o
   número, o badge e o ponto do cliente. */
.finance-lane-body .item {
  --tone-wash: transparent;
  --tone-edge: rgba(255, 255, 255, 0.075);
}

/* A sparkline do shell é absoluta e ancora no rodapé do primeiro pai
   posicionado. Dentro do card do pódio ela caía por cima dos números, então
   aqui ela volta a ocupar o próprio lugar no fluxo. */
.wallet-pod .spark {
  position: static;
  width: 100%;
  height: 40px;
  --tone: var(--who, var(--cash));
}
.wallet-gauge { margin-block: 6px 10px; }

/* No telefone o mês, a placa de atraso e o botão de criar não cabiam numa
   linha, e "Setembro" saía cortado ao meio. Eles passam a quebrar. */
@media (max-width: 520px) {
  .finance-month-row { flex-wrap: wrap; }
  .finance-month-switch { flex: 1 1 100%; justify-content: space-between; }
  .finance-month-row > .badge { margin-left: 0; }
}