/* Warehouse Ops: front na língua do caixa.
   Superfície neutra. Cor em 3 lugares: spine, número, badge. */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* SF Pro é variável e tem eixo óptico. Ligado, o herói de 68px ganha o
     desenho aberto do corte Display e a legenda de 10.5px continua no
     corte de texto, sem precisarmos declarar duas famílias. */
  font-optical-sizing: auto;
  /* O shell pede pesos que não são múltiplos de 100 (720, 750, 760).
     Em SF Pro eles existem no eixo; em qualquer fallback estático o
     browser inventaria um negrito falso, e o falso é sempre mais gordo. */
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: auto;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 300px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% -30%, var(--brand-glow), transparent 58%);
  opacity: 0.32;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:active { transform: scale(0.98); }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-pill);
}

/* ══ topbar ══ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) var(--pad-x) 10px;
  /* Em repouso a topbar não é material: o halo da marca passa limpo por
     trás dela. Ela só vira vidro quando começa a cobrir alguma coisa. */
  background: transparent;
  border-bottom: 1px solid transparent;
  /* Anima background-color, nunca o atalho `background`: o atalho carrega
     imagem e posição junto, o Chrome não sabe interpolar o conjunto e trava
     a barra no valor de partida, ou seja, transparente para sempre. */
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

html[data-scroll="on"] .topbar {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(var(--blur-veil));
  -webkit-backdrop-filter: saturate(180%) blur(var(--blur-veil));
  border-bottom-color: var(--line);
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  html[data-scroll="on"] .topbar { background: var(--bg); }
  .dock { background: var(--bg); }
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-right: auto;
  transition: opacity var(--t-fast) var(--ease);
}

.topbar .brand:active { opacity: 0.7; }

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--r-ctl);
  background: var(--ink);
  color: var(--bg);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

.brand-mark b { color: var(--brand); }

.brand-copy { display: grid; gap: 1px; min-width: 0; }

.brand-copy strong {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-copy strong span { color: var(--brand); }

.kicker {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clock {
  flex: 0 0 auto;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  color: var(--muted);
  font-family: var(--num);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ══ coluna ══ */

.phone {
  position: relative;
  z-index: 1;
  max-width: var(--col);
  margin: 0 auto;
  padding: 18px var(--pad-x) calc(var(--dock-h) + 28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

#view-home,
#view-dash {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: view-in var(--t-slow) both var(--ease);
}

/* A dash guarda filhos fixos (o rascunho e o controle de nota). Animar
   transform aqui faria deles reféns da caixa da dash, então a dash entra
   só por opacidade e o fixo continua preso à viewport. */
#view-dash { animation-name: view-fade; }

@keyframes view-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

#view-dash[hidden], #view-home[hidden] { display: none !important; }

/* ══ saudação ══ */

.greeting { margin: 0; }

.greet-line {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: clamp(20px, 5.6vw, 25px);
  font-weight: 780;
  letter-spacing: -0.04em;
}

.greet-line span { color: var(--muted); font-weight: 550; }

.greet-sub {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
}

.greet-sub b { color: var(--ink-2); font-weight: 680; }

/* ══ hero ══ */

.hero {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 16px;
  border-radius: var(--r-xl);
  background: var(--hero-bg);
  color: var(--hero-ink);
  box-shadow: var(--shadow-lg);
  animation: rise var(--t-slow) both var(--ease);
}

.hero::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.75;
  background: radial-gradient(circle, var(--hero-glow, var(--due-glow)), transparent 66%);
}

.hero-top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--hero-muted);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.hero-kicker i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--due);
  box-shadow: 0 0 0 3px var(--due-glow);
}

.hero-days {
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--hero-inset);
  border: 1px solid var(--hero-line);
  color: var(--hero-muted);
  font-size: 10.5px;
  font-weight: 650;
  white-space: nowrap;
}

.hero-amount {
  position: relative;
  margin: 0;
  font-size: clamp(30px, 7.8vw, 40px);
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1.02;
  font-variant-numeric: tabular-nums;
}

.hero-sub {
  position: relative;
  margin: 8px 0 0;
  color: var(--hero-muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
}

.hero-sub b { color: rgba(255, 255, 255, 0.9); font-weight: 700; }

.hero-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.hero-btn {
  min-height: 32px;
  padding: 0 13px;
  border-radius: var(--r-ctl);
  border: 1px solid var(--hero-line);
  background: var(--hero-inset);
  color: var(--hero-ink);
  font-size: 12px;
  font-weight: 700;
  transition: background var(--t-fast) var(--ease), transform var(--t-base) var(--spring);
}

.hero-btn:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }

.hero-btn.solid {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 6px 18px -6px var(--brand);
}

.compose { position: relative; margin-top: 16px; }

.compose-track {
  position: relative;
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--hero-inset);
}

.compose-seg { height: 100%; min-width: 0; transition: width var(--t-enter) var(--ease); }
.compose-seg.cash { background: var(--cash); }
.compose-seg.due { background: var(--due); }
.compose-seg.late { background: var(--late); }
.compose-seg.future { background: var(--future); opacity: 0.8; }

.compose-goal {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.65);
  z-index: 3;
}

.compose-goal::after {
  content: "META";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.55);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.compose-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 14px;
  margin-top: 10px;
  color: var(--hero-muted);
  font-size: 11px;
  font-weight: 600;
}

.compose-legend span { display: inline-flex; align-items: center; gap: 5px; }
.compose-legend i { width: 7px; height: 7px; border-radius: var(--r-pill); flex: 0 0 auto; }
.compose-legend i.cash { background: var(--cash); }
.compose-legend i.due { background: var(--due); }
.compose-legend i.late { background: var(--late); }
.compose-legend i.future { background: var(--future); }
.compose-legend b { color: rgba(255, 255, 255, 0.88); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ══ os quatro portais (widgets) ══ */

.portals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.portal {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 138px;
  padding: 12px 13px 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  animation: rise var(--t-slow) both var(--ease);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-fast) ease;
}

.portal:nth-child(1) { animation-delay: 0.02s; }
.portal:nth-child(2) { animation-delay: 0.06s; }
.portal:nth-child(3) { animation-delay: 0.1s; }
.portal:nth-child(4) { animation-delay: 0.14s; }

/* Sem filete. O estado tinge o canto do card e a tinta do número. */
.portal-glow {
  position: absolute;
  right: -70px;
  top: -80px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--glow, transparent), transparent 70%);
}

.portal[data-state="late"] { --glow: var(--late-glow); }
.portal[data-state="due"] { --glow: var(--due-glow); }
.portal[data-state="cash"] { --glow: var(--cash-glow); }
.portal[data-state="future"] { --glow: var(--future-glow); }
.portal[data-state="brand"] { --glow: var(--brand-glow); }

.portal:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.portal:active { transform: scale(0.99); }

.portal-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.portal-ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--r-ctl);
  background: var(--surface-3);
  color: var(--muted);
}

.portal-ico svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal[data-state="late"] .portal-ico { background: var(--late-bg); color: var(--late); }
.portal[data-state="due"] .portal-ico { background: var(--due-bg); color: var(--due); }
.portal[data-state="cash"] .portal-ico { background: var(--cash-bg); color: var(--cash); }
.portal[data-state="future"] .portal-ico { background: var(--future-bg); color: var(--future); }
.portal[data-state="brand"] .portal-ico { background: var(--brand-bg); color: var(--brand); }

.portal-metric {
  position: relative;
  font-size: 25px;
  font-weight: 780;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.portal-metric[data-tone="due"] { color: var(--due); }
.portal-metric[data-tone="late"] { color: var(--late); }
.portal-metric[data-tone="cash"] { color: var(--cash); }

.portal-name {
  position: relative;
  margin-top: 5px;
  font-size: 13.5px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink-2);
}

.portal-preview {
  position: relative;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 550;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══ dash ══ */

.dash-hdr { padding: 0; }

.back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 0 10px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  transition: opacity var(--t-fast) ease;
}

.back:hover { opacity: 0.7; }

#dash-title {
  margin: 0;
  font-size: 32px;
  font-weight: 780;
  letter-spacing: -0.045em;
  line-height: 1;
}

.dash-sub {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.45;
}

.lenses { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 15px; }
.lenses[hidden] { display: none; }

.lens {
  min-height: 31px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: var(--shadow-xs);
  transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-base) var(--spring);
}

.lens:hover { border-color: var(--line-2); color: var(--ink-2); transform: translateY(-1px); }
.lens[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ══ captura ══ */

#capture { margin: 0; }
#capture[hidden] { display: none; }

.quick-send {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 20px -8px var(--brand);
  transition: transform var(--t-base) var(--spring), background var(--t-fast) ease;
}

.quick-send svg { width: 17px; height: 17px; }
.quick-send:hover { background: var(--brand-ink); transform: scale(1.05); }
.quick-send:active { transform: scale(0.94); }

.quick-hint { margin: 7px 2px 0; color: var(--muted-2); font-size: 10.5px; line-height: 1.5; }

#dash-body { display: flex; flex-direction: column; gap: 22px; }

/* ══ KPIs ══ */

.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }

.kpi {
  position: relative;
  overflow: hidden;
  padding: 13px 12px 12px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  animation: rise var(--t-slow) both var(--ease);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-fast) ease;
}

.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-2); }

.k-label {
  display: block;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kpi.cash .k-label { color: var(--cash); }
.kpi.due .k-label { color: var(--due); }
.kpi.future .k-label { color: var(--future); }
.kpi.late .k-label { color: var(--late); }

.k-value {
  display: block;
  margin-top: 7px;
  font-size: clamp(14px, 3.6vw, 18px);
  font-weight: 750;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.k-hint { display: block; margin-top: 3px; color: var(--muted-2); font-size: 10.5px; font-weight: 550; }

/* ══ seções e listas ══ */

.section { margin: 0; }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.section-head h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -0.015em;
}

.section-head h2 i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--muted-2); }
.section-head h2 i.cash { background: var(--cash); box-shadow: 0 0 0 3px var(--cash-glow); }
.section-head h2 i.due { background: var(--due); box-shadow: 0 0 0 3px var(--due-glow); }
.section-head h2 i.future { background: var(--future); box-shadow: 0 0 0 3px var(--future-glow); }
.section-head h2 i.late { background: var(--late); box-shadow: 0 0 0 3px var(--late-glow); }
.section-head h2 i.brand { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }

.section-meta { color: var(--muted); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.link-btn {
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: opacity var(--t-fast) ease;
}

.link-btn:hover { opacity: 0.7; }
.link-btn .link-ico { display: inline-flex; }
.link-btn svg { width: 13px; height: 13px; }

.list { display: grid; gap: 7px; }

.item {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 13px 12px 15px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  animation: rise var(--t-slow) both var(--ease);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-fast) ease;
}

.item.with-check { grid-template-columns: auto 1fr; }
.item.with-time { grid-template-columns: auto 1fr; }
.item.with-check.with-side { grid-template-columns: auto 1fr auto; }
.item.with-time.with-side { grid-template-columns: auto 1fr auto; }

.item:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--line-2); }

.item-main { min-width: 0; }

.item-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.3;
}

.item-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }

.item-sub {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 550;
}

.item-sub b { color: var(--ink-2); font-weight: 650; }

.item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }

.item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: 0 0 auto; }

.item-amount {
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.item.is-cash .item-amount { color: var(--cash); }
.item.is-due .item-amount { color: var(--due); }
.item.is-late .item-amount { color: var(--late); }
.item.is-future .item-amount { color: var(--future); }
.item.is-review .item-amount { color: var(--late); }

.item.is-done { opacity: 0.6; }
.item.is-done .item-title { text-decoration: line-through; color: var(--muted); }

.item-time {
  flex: 0 0 auto;
  width: 44px;
  color: var(--ink-2);
  font-family: var(--num);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.item.is-due .item-time { color: var(--due); }
.item.is-late .item-time { color: var(--late); }

.check {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  background: var(--surface-2);
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease, box-shadow var(--t-base) var(--spring);
}

.check:hover { border-color: var(--muted); }
.item.is-done .check { border-color: var(--cash); background: var(--cash); box-shadow: inset 0 0 0 3px var(--surface); }

/* ══ chips e badges ══ */

.chip-btn {
  min-height: 27px;
  padding: 0 10px;
  border-radius: var(--r-ctl);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-base) var(--spring);
}

.chip-btn:hover { background: var(--surface-3); border-color: var(--line-2); transform: translateY(-1px); }
.chip-btn.pay { background: var(--cash-bg); border-color: var(--cash-line); color: var(--cash); }
.chip-btn.brand { background: var(--brand-bg); border-color: var(--brand-line); color: var(--brand-ink); }
.chip-btn.brand:hover { border-color: var(--brand); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge[hidden] { display: none; }
.badge.cash { background: var(--cash-bg); border-color: var(--cash-line); color: var(--cash); }
.badge.due { background: var(--due-bg); border-color: var(--due-line); color: var(--due); }
.badge.late { background: var(--late-bg); border-color: var(--late-line); color: var(--late); }
.badge.future { background: var(--future-bg); border-color: var(--future-line); color: var(--future); }
.badge.brand { background: var(--brand-bg); border-color: var(--brand-line); color: var(--brand-ink); }
.badge.hygiene { background: var(--future-bg); border-color: var(--future-line); color: var(--future); }

/* ══ insights ══ */

.insight {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  padding: 13px 14px 13px 15px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  animation: rise var(--t-slow) both var(--ease);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.insight:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.insight-ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: var(--r-ctl);
  background: var(--surface-3);
  color: var(--muted);
}

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

.insight.late .insight-ico { background: var(--late-bg); color: var(--late); }
.insight.due .insight-ico { background: var(--due-bg); color: var(--due); }
.insight.cash .insight-ico { background: var(--cash-bg); color: var(--cash); }
.insight.future .insight-ico { background: var(--future-bg); color: var(--future); }
.insight.brand .insight-ico { background: var(--brand-bg); color: var(--brand); }

.insight-body { min-width: 0; }

.insight-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.insight-copy { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; font-weight: 550; line-height: 1.5; }
.insight-copy b { color: var(--ink-2); font-weight: 650; }

.insight-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.insight-btn {
  min-height: 29px;
  padding: 0 12px;
  border-radius: var(--r-ctl);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 700;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-base) var(--spring);
}

.insight-btn:hover { background: var(--surface-3); border-color: var(--line-2); transform: translateY(-1px); }
.insight-btn.solid { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.insight-btn.solid:hover { opacity: 0.88; background: var(--ink); }

/* destaque da ação do dia na home */
.insight.hot {
  border-color: var(--brand-line);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--brand-line);
}

/* ══ clientes ══ */

.client {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px 13px 15px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  animation: rise var(--t-slow) both var(--ease);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-fast) ease;
}

.client:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--line-2); }

.client-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--r-ctl);
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.client.top .client-avatar { background: var(--brand-bg); color: var(--brand); }
.client.risk .client-avatar { background: var(--late-bg); color: var(--late); }

.client-info { min-width: 0; }

.client-info strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.client-info span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
.client-total { font-size: 14px; font-weight: 750; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.client-share { display: flex; align-items: center; gap: 6px; color: var(--muted-2); font-size: 10.5px; font-weight: 650; }
.share-track { width: 42px; height: 4px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.share-fill { height: 100%; border-radius: var(--r-pill); background: var(--ink-2); transition: width var(--t-enter) var(--ease); }
.client.top .share-fill { background: var(--brand); }
.client.risk .share-fill { background: var(--late); }

/* ══ vazios, rodapé, erro ══ */

.empty {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 104px;
  padding: 24px 20px;
  border-radius: var(--r-md);
  border: 1px dashed var(--line-2);
  background: var(--surface-2);
  color: var(--muted);
  text-align: center;
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.5;
}

.empty strong { display: block; color: var(--ink); font-size: 13.5px; font-weight: 700; }

.foot {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 550;
  line-height: 1.6;
}

.foot a { color: var(--muted); font-weight: 700; }
.foot a:hover { color: var(--brand); }

.err {
  border: 1px solid var(--late-line);
  border-radius: var(--r-md);
  background: var(--late-bg);
  color: var(--ink-2);
  padding: 16px;
  font-size: 12.5px;
  line-height: 1.5;
}

/* ══ dock ══ */

.dock {
  position: fixed;
  z-index: 90;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 2px;
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: 7px 12px calc(7px + env(safe-area-inset-bottom));
  /* O dock paira sobre a lista em qualquer posição de rolagem, então o vidro
     dele sempre tem conteúdo atrás e sempre tem função. Quem depende do
     estado é a topbar, que no topo da página não cobre coisa alguma. */
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(var(--blur-veil));
  -webkit-backdrop-filter: saturate(180%) blur(var(--blur-veil));
  border-top: 1px solid var(--line);
}

.tab {
  position: relative;
  flex: 1;
  min-height: 46px;
  display: grid;
  place-items: center;
  gap: 3px;
  border-radius: var(--r-ctl);
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.01em;
  transition: color var(--t-fast) var(--ease), background var(--t-base) var(--ease);
}

.tab-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tab:hover { color: var(--ink-2); }

.tab.active { background: var(--surface-3); color: var(--ink); }
.tab.active .tab-icon { color: var(--brand); }

.tab.active::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  margin-left: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand);
}

/* ══ toast ══ */

.toast {
  position: fixed;
  z-index: 300;
  left: 50%;
  bottom: calc(var(--dock-h) + 16px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(400px, calc(100vw - 28px));
  padding: 11px 12px 11px 15px;
  border-radius: var(--r-block);
  background: var(--ink);
  color: var(--bg);
  font-size: 12.5px;
  font-weight: 650;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px) scale(0.97);
  transition: opacity var(--t-base) var(--ease), transform var(--t-slow) var(--ease);
}

.toast.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.toast-msg { min-width: 0; }

.toast-undo {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--r-ctl);
  background: rgba(127, 127, 127, 0.28);
  color: inherit;
  font-size: 11.5px;
  font-weight: 750;
}

.toast-undo[hidden] { display: none; }

/* ══ animações ══ */

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.list .item:nth-child(1), .list .insight:nth-child(1), .list .client:nth-child(1) { animation-delay: 0.01s; }
.list .item:nth-child(2), .list .insight:nth-child(2), .list .client:nth-child(2) { animation-delay: 0.05s; }
.list .item:nth-child(3), .list .insight:nth-child(3), .list .client:nth-child(3) { animation-delay: 0.09s; }
.list .item:nth-child(4), .list .insight:nth-child(4), .list .client:nth-child(4) { animation-delay: 0.13s; }
.list .item:nth-child(n + 5) { animation-delay: 0.16s; }

@media (min-width: 700px) {
  .phone { padding-top: 24px; }
  .portal { min-height: 156px; }
  .portal-metric { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .portal:hover, .item:hover, .kpi:hover, .insight:hover, .client:hover { transform: none; }
}

/* Original finance language integrated into Ops */

.top-actions { display: flex; align-items: center; gap: 7px; }
.top-command,
.top-icon {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--muted);
}
.top-command { display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 11.5px; font-weight: var(--w-semibold); }
.top-command svg,
.top-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.top-command kbd { min-width: 19px; padding: 2px 5px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--muted-2); font: 10px var(--num); }
.top-icon { display: grid; width: 36px; place-items: center; }
.top-command:hover,
.top-icon:hover { border-color: var(--line-2); color: var(--ink-2); background: var(--surface-2); }
.data-wrap { position: relative; }
.data-menu {
  position: absolute;
  z-index: 500;
  top: calc(100% + 8px);
  right: 0;
  width: 224px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.data-menu[hidden] { display: none; }
.data-menu p { display: grid; gap: 2px; margin: 0 5px 6px; padding: 7px 5px 11px; border-bottom: 1px solid var(--line); }
.data-menu p strong { font-size: 12px; }
.data-menu p span { color: var(--muted); font-size: 10px; }
.data-menu button { width: 100%; padding: 9px 10px; border-radius: var(--r-xs); color: var(--ink-2); text-align: left; font-size: 11.5px; }
.data-menu button:hover { background: var(--surface-2); }
#ops-reset { color: var(--late-2); }

.sync-help {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.sync-help b { color: var(--ink-2); font-weight: var(--w-semibold); }
#sync-sql { min-height: 92px; font-family: var(--num); font-size: 11px; }
#sync-status { margin: 10px 0 0; }

html.studio-locked .topbar,
html.studio-locked .phone,
html.studio-locked .dock,
html.studio-locked .fab,
html.studio-locked .toast,
html.studio-locked .ask-layer,
html.studio-locked .finance-detail-layer,
html.studio-locked #blocker-wrap,
html.studio-locked #task-sheet {
  display: none !important;
}
html.studio-locked #sync-sheet {
  align-items: center;
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.studio-locked #sync-close { display: none !important; }

.ask-layer {
  position: fixed;
  z-index: 600;
  inset: 0;
  display: grid;
  place-items: start center;
  padding: max(12vh, 80px) 16px 16px;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(var(--blur-scrim));
  -webkit-backdrop-filter: blur(var(--blur-scrim));
}
.ask-layer[hidden] { display: none; }
.ask-dialog { width: min(560px, 100%); padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lg); }
.ask-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 2px 2px 12px; }
.ask-dialog header div { display: grid; gap: 2px; }
.ask-dialog header span { color: var(--brand-ink); font-size: 9px; font-weight: var(--w-bold); letter-spacing: .12em; text-transform: uppercase; }
.ask-dialog header strong { font-size: 15px; }
.ask-dialog header button { display: grid; width: 32px; height: 32px; place-items: center; border-radius: var(--r-xs); color: var(--muted); }
.ask-dialog header svg,
.ask-field svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ask-field { display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-inset); color: var(--muted); }
.ask-field input { width: 100%; min-height: 48px; border: 0; outline: 0; background: transparent; color: var(--ink); }
.ask-body { display: grid; gap: 6px; padding-top: 10px; }
.ask-suggestion { padding: 11px 12px; border-radius: var(--r-sm); color: var(--ink-2); text-align: left; font-size: 12px; }
.ask-suggestion:hover { background: var(--surface-2); }
.ask-answer { display: grid; gap: 7px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.ask-answer p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.ask-answer .chip-btn { justify-self: start; }

.summary-hero { background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 42%), var(--hero-bg); }
.summary-kicker { color: var(--muted); }
.summary-kicker i { box-shadow: none; }
.summary-copy { max-width: 58ch; }
.summary-actions { margin-top: 13px; }
.summary-actions .hero-btn { min-height: 32px; padding: 0 11px; border-color: var(--hero-line); background: var(--hero-inset); color: var(--hero-ink); }
.summary-signals { gap: 7px; overflow: visible; border-radius: 0; background: transparent; }
.summary-signal { position: relative; overflow: hidden; border: 1px solid var(--hero-line); border-radius: var(--r-md); background: rgba(255,255,255,.035); }
.summary-signal::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .7; pointer-events: none; }
.summary-signal.sector-tasks { border-color: color-mix(in srgb, var(--brand) 22%, var(--hero-line)); }
.summary-signal.sector-tasks::after { background: radial-gradient(circle at 12% 0%, var(--brand-glow), transparent 56%); }
.summary-signal.sector-agenda { border-color: color-mix(in srgb, var(--future) 24%, var(--hero-line)); }
.summary-signal.sector-agenda::after { background: radial-gradient(circle at 14% 0%, var(--future-glow), transparent 58%); }
.summary-signal.sector-cash { border-color: color-mix(in srgb, var(--cash) 22%, var(--hero-line)); }
.summary-signal.sector-cash::after { background: radial-gradient(circle at 15% 0%, var(--cash-glow), transparent 58%); }
.summary-signal.sector-tasks .summary-signal-icon { color: var(--brand-2); }
.summary-signal.sector-agenda .summary-signal-icon { color: var(--future-2); }
.summary-signal.sector-cash .summary-signal-icon { color: var(--cash-2); }

.tl-block { cursor: pointer; }
.tl-block:hover { border-color: color-mix(in srgb, var(--future) 58%, transparent); }
.block-context { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-inset); }
.block-context[hidden] { display: none; }
.block-context strong { width: 100%; color: var(--muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.block-context > span { color: var(--ink-2); font-size: 11px; }
.insight-btn.danger { color: var(--late-2); }


@media (max-width: 859px) {
  .topbar { padding-left: 13px; padding-right: 13px; }
  .top-command span, .top-command kbd, .clock { display: none; }
  .top-command { width: 36px; padding: 0; justify-content: center; }
  .scrim { z-index: 190; background: rgba(0, 0, 0, 0.22); backdrop-filter: blur(var(--blur-scrim)); -webkit-backdrop-filter: blur(var(--blur-scrim)); }
  #capture { z-index: 220; pointer-events: none; opacity: 0; transform: translateY(24px); }
  #capture[data-open="1"] { pointer-events: auto; opacity: 1; transform: none; }
  .pad { position: relative; z-index: 2; border-radius: var(--r-block) var(--r-block) var(--r-block) var(--r-block); background: var(--surface-inset); box-shadow: 0 -16px 48px rgba(0,0,0,.44); }
  body.pad-open { overflow: hidden; }
  .summary-signals { gap: 6px; }
}

/* ===========================================================================
   Warehouse Ops premium layer
   Mantém o contrato funcional e amplia o produto de mobile para desktop.
   ========================================================================== */

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  position: relative;
  background:
    radial-gradient(ellipse 72% 42% at 50% -14%, rgba(255, 84, 38, 0.1), transparent 68%),
    radial-gradient(ellipse 52% 40% at 86% 28%, rgba(139, 147, 245, 0.035), transparent 72%),
    var(--bg);
  font-size: 15.5px;
  letter-spacing: -0.008em;
}

body::before {
  inset: 0;
  height: 520px;
  background:
    radial-gradient(55% 86% at 15% -8%, rgba(255, 84, 38, 0.13), transparent 72%),
    radial-gradient(42% 68% at 88% 0%, rgba(255, 107, 115, 0.08), transparent 76%);
  opacity: 0.75;
}

body::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0.19;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}

::selection { background: var(--brand); color: #fff; }

.topbar {
  min-height: 72px;
  padding: calc(14px + env(safe-area-inset-top)) 24px 14px;
  border: 1px solid transparent;
}

html[data-scroll="on"] .topbar {
  border-bottom-color: color-mix(in srgb, var(--line) 74%, transparent);
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.018);
}

.topbar .brand { gap: 12px; }

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: var(--r-ctl);
  background: linear-gradient(145deg, #fff 0%, #d9d9df 100%);
  color: #0c0c0e;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform var(--t-slow) var(--spring), box-shadow var(--t-base) var(--ease);
}

.topbar .brand:hover .brand-mark {
  transform: rotate(-4deg) scale(1.04);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36), inset 0 1px 0 #fff;
}

.brand-copy strong {
  font-size: 12.5px;
  font-weight: 760;
  letter-spacing: 0.17em;
}

.kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.clock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-color: color-mix(in srgb, var(--line-2) 72%, transparent);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), var(--shadow-xs);
}

.clock::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cash);
  box-shadow: 0 0 0 4px var(--cash-glow);
}

.phone {
  width: 100%;
  max-width: var(--col);
  padding: 34px 24px 132px;
}

#view-home,
#view-dash { gap: 24px; }

.greeting { padding: 8px 2px 2px; }

.greet-line {
  gap: 10px;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 780;
  letter-spacing: -0.055em;
  line-height: 1.05;
}

.greet-line span { font-weight: 470; }

.greet-sub {
  max-width: 650px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
}

.hero {
  isolation: isolate;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 36%),
    var(--hero-bg);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.055);
  animation: hero-reveal var(--t-enter) both var(--ease);
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 10%, rgba(255, 255, 255, 0.035) 45%, transparent 70%);
  transform: translateX(-70%);
  animation: surface-sheen 1.1s 0.15s both var(--ease);
}

.hero::after {
  right: -80px;
  top: -110px;
  width: 300px;
  height: 300px;
  filter: blur(var(--blur-scrim));
  animation: halo-breathe 7s ease-in-out infinite alternate;
}

.hero-top { margin-bottom: 18px; }

.hero-kicker {
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.17em;
}

.hero-days {
  padding: 6px 11px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(var(--blur-veil));
}

.hero-amount {
  font-size: clamp(40px, 5.8vw, 68px);
  font-weight: 720;
  letter-spacing: -0.06em;
}

.hero-sub {
  max-width: 620px;
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.6;
}

.compose { margin-top: 24px; }

.compose-track {
  height: 12px;
  padding: 2px;
  gap: 3px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.38);
}

.compose-seg {
  border-radius: var(--r-pill);
  transform-origin: left;
  animation: bar-grow 0.9s 0.18s both var(--ease);
}

.compose-legend {
  gap: 7px 18px;
  margin-top: 13px;
  font-size: 11.5px;
}

.hero-actions { gap: 9px; margin-top: 22px; }

.hero-btn {
  min-height: 39px;
  padding: 0 17px;
  border-radius: var(--r-ctl);
  font-size: 12.5px;
}

.hero-btn.solid {
  background: linear-gradient(145deg, var(--brand-2), var(--brand));
  box-shadow: 0 12px 30px -12px var(--brand), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.section-head { margin-bottom: 14px; }

.section-head h2 {
  font-size: 14.5px;
  font-weight: 710;
  letter-spacing: -0.025em;
}

.section-head h2 i { width: 6px; height: 6px; }

.section-meta {
  color: var(--muted-2);
  font-size: 11px;
  letter-spacing: 0.015em;
}

.portals { gap: 13px; }

.portal {
  isolation: isolate;
  min-height: 170px;
  padding: 17px 17px 18px 19px;
  border-color: color-mix(in srgb, var(--line-2) 72%, transparent);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.025), transparent 52%),
    color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.028);
  transition: transform var(--t-slow) var(--spring), box-shadow var(--t-slow) var(--ease), border-color var(--t-base) ease;
}

.portal-glow {
  right: -76px;
  top: -88px;
  width: 230px;
  height: 230px;
  opacity: 0.88;
  transition: transform var(--t-enter) var(--ease), opacity var(--t-slow) ease;
}

.portal:hover .portal-glow { transform: translate(-10px, 10px) scale(1.12); opacity: 1; }

.portal-top { margin-bottom: 15px; }

.portal-ico {
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: var(--r-ctl);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.portal-ico svg { width: 18px; height: 18px; }

.portal-metric {
  font-size: clamp(29px, 3vw, 38px);
  font-weight: 730;
  letter-spacing: -0.055em;
}

.portal-name {
  margin-top: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.005em;
}

.portal-preview {
  margin-top: 8px;
  font-size: 11.75px;
  line-height: 1.5;
}

.dash-hdr {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 60%), var(--surface-inset);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.dash-hdr::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow), transparent 68%);
  filter: blur(var(--blur-scrim));
}

.back {
  padding-bottom: 18px;
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

#dash-title {
  max-width: 230px;
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 720;
  letter-spacing: -0.06em;
  overflow-wrap: anywhere;
}

body[data-view="cliente"] #dash-title {
  font-size: clamp(34px, 3.2vw, 48px);
  line-height: 0.96;
}

.dash-sub {
  max-width: 260px;
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.6;
}

.lenses { gap: 7px; margin-top: 22px; }

.lens {
  min-height: 34px;
  padding: 0 14px;
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  font-size: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.lens[aria-pressed="true"] {
  background: linear-gradient(145deg, #fff, #dcdce2);
  border-color: #fff;
  color: #0b0b0e;
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.28);
}

#capture { padding: 0; border: 0; background: none; }

.quick input {
  height: 50px;
  padding-left: 17px;
  border-radius: var(--r-block);
  background: color-mix(in srgb, var(--surface) 88%, var(--brand-bg));
  font-size: 13px;
}

.quick-send { right: 8px; width: 34px; height: 34px; }

.quick-hint { margin: 9px 4px 0; line-height: 1.55; }

#dash-body { gap: 28px; min-width: 0; }

.kpi-row { gap: 12px; }

.kpi {
  min-height: 112px;
  padding: 18px 17px;
  border-color: color-mix(in srgb, var(--line-2) 72%, transparent);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.025), transparent 60%), var(--surface);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.k-label { font-size: 9.5px; letter-spacing: 0.12em; }

.k-value {
  margin-top: 10px;
  font-size: clamp(18px, 2.2vw, 27px);
  font-weight: 720;
}

.k-hint { margin-top: 5px; font-size: 10.5px; }

.list { gap: 10px; }

.item,
.insight,
.client {
  border-color: color-mix(in srgb, var(--line-2) 70%, transparent);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), transparent 55%), var(--surface);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.022);
  transition: transform var(--t-slow) var(--spring), box-shadow var(--t-slow) var(--ease), border-color var(--t-base) ease;
}

.item { min-height: 78px; padding: 16px 18px 16px 20px; }
.insight { padding: 17px 18px 17px 20px; gap: 14px; }
.client { min-height: 78px; padding: 16px 18px 16px 20px; }

.item-title,
.insight-title,
.client-info strong { font-size: 14px; font-weight: 680; }

.item-sub,
.client-info span { margin-top: 5px; font-size: 12px; line-height: 1.45; }

.item-amount,
.client-total { font-size: 15px; font-weight: 720; }

.insight-copy { margin-top: 6px; font-size: 12.75px; line-height: 1.58; }

.insight-ico {
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: var(--r-ctl);
}

.chip-btn,
.insight-btn {
  min-height: 32px;
  border-radius: var(--r-ctl);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.badge {
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: 9px;
  letter-spacing: 0.075em;
}

.client-avatar {
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--line-2) 72%, transparent);
  border-radius: var(--r-block);
}

.share-track { width: 54px; height: 5px; }

.empty {
  min-height: 150px;
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.018), transparent), var(--surface-inset);
}

.foot { padding: 18px 2px 0; }

.dock {
  max-width: min(520px, calc(100vw - 32px));
  bottom: 16px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line-2) 78%, transparent);
  border-radius: var(--r-block);
  background: color-mix(in srgb, var(--surface-inset) 78%, transparent);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.tab {
  min-height: 51px;
  border-radius: var(--r-block);
  font-size: 9.5px;
  font-weight: 650;
  transition: color var(--t-base) var(--ease), background var(--t-slow) var(--ease), transform var(--t-slow) var(--spring);
}

.tab:hover { transform: translateY(-2px); }

.tab.active {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.tab.active::after { top: 5px; width: 5px; height: 5px; }

.toast {
  bottom: 92px;
  padding: 13px 14px 13px 17px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(245, 245, 247, 0.94);
  color: #111114;
  backdrop-filter: blur(var(--blur-veil));
}

@keyframes hero-reveal {
  from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(var(--blur-scrim)); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes surface-sheen {
  from { transform: translateX(-85%); }
  to { transform: translateX(110%); }
}

@keyframes halo-breathe {
  from { transform: translate3d(0, 0, 0) scale(0.95); opacity: 0.58; }
  to { transform: translate3d(-16px, 14px, 0) scale(1.08); opacity: 0.88; }
}

@keyframes bar-grow {
  from { transform: scaleX(0); opacity: 0.35; }
  to { transform: scaleX(1); opacity: 1; }
}

@media (hover: hover) {
  .portal:hover { transform: translateY(-5px) scale(1.012); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38); }
  .item:hover, .insight:hover, .client:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32); }
  .kpi:hover { transform: translateY(-4px); box-shadow: 0 22px 52px rgba(0, 0, 0, 0.34); }
}

@media (min-width: 860px) {
  body[data-view="cliente"] #dash-title {
    font-size: 34px;
    overflow-wrap: normal;
  }

  #view-home {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(380px, 0.88fr);
    grid-template-rows: auto auto auto;
    column-gap: 28px;
    row-gap: 26px;
    align-items: start;
  }

  #view-home > .greeting { grid-column: 1 / -1; }
  #home-hero { grid-column: 1; grid-row: 2; align-self: stretch; }
  #home-hero .hero { min-height: 392px; height: 100%; display: flex; flex-direction: column; }
  #home-hero .hero .compose { margin-top: auto; padding-top: 28px; }
  #home-portals { grid-column: 2; grid-row: 2 / span 2; }
  #home-action { grid-column: 1; grid-row: 3; }

  .portal { min-height: 174px; }

  #view-dash {
    display: grid;
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 42px;
    row-gap: 18px;
    align-items: start;
  }

  #view-dash[hidden] { display: none !important; }
  .dash-hdr { grid-column: 1; grid-row: 1; }
  #capture { grid-column: 1; grid-row: 2; }
  #dash-body { grid-column: 2; grid-row: 1 / span 3; }

  .dash-hdr,
  #capture { position: sticky; top: 104px; }
  #capture { top: 430px; }

  body:not([data-view="tasks"]):not([data-view="cliente"]) .dash-hdr { top: 104px; }

  .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1320px) {
  .dock {
    left: max(18px, calc(50% - 690px));
    right: auto;
    top: 50%;
    bottom: auto;
    width: 76px;
    max-width: none;
    padding: 10px;
    flex-direction: column;
    transform: translateY(-50%);
  }

  .tab { min-height: 66px; flex: 0 0 auto; }
  .tab.active::after { top: 50%; left: 5px; margin: -2.5px 0 0; }
  .toast { bottom: 28px; }
}

@media (max-width: 859px) {
  .topbar { min-height: 62px; padding: calc(11px + env(safe-area-inset-top)) 16px 11px; }
  .brand-mark { width: 34px; height: 34px; border-radius: var(--r-ctl); }
  .phone { padding: 22px 16px 116px; }
  .greeting { padding-top: 2px; }
  .greet-line { font-size: clamp(25px, 7vw, 33px); }
  .hero { padding: 23px 21px 21px; }
  .hero-amount { font-size: clamp(38px, 10vw, 48px); }
  .portal { min-height: 154px; padding: 15px 14px 15px 17px; }
  .portal-metric { font-size: clamp(27px, 7vw, 34px); }
  .dash-hdr { padding: 21px; }
  #dash-title { max-width: none; font-size: clamp(34px, 10vw, 48px); }
  .kpi { min-height: 98px; padding: 15px 13px; }
  .k-value { font-size: clamp(15px, 4.4vw, 20px); }
}

@media (max-width: 430px) {
  body { font-size: 15px; }
  .clock::before { display: none; }
  .clock { padding-inline: 10px; }
  .hero { border-radius: var(--r-block); }
  .hero-actions { margin-top: 18px; }
  .portals { gap: 10px; }
  .portal { min-height: 148px; }
  .portal-top { margin-bottom: 12px; }
  .portal-ico { width: 34px; height: 34px; }
  .portal-preview { font-size: 11px; }
  .section-head { align-items: flex-end; }
  .section-meta { max-width: 42%; text-align: right; }
  .item { padding: 14px 13px 14px 16px; }
  .insight { padding: 15px 13px 15px 16px; }
  .client { padding: 14px 13px 14px 16px; }
  .kpi-row { gap: 8px; }
  .dock { bottom: 8px; max-width: calc(100vw - 16px); border-radius: var(--r-block); }
  .toast { bottom: 83px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::before, .hero::after, .compose-seg { animation: none !important; }
}

/* ===========================================================================
   Visual direction V2: hierarchy first, effects second
   =========================================================================== */

body {
  background:
    radial-gradient(70% 48% at 50% -12%, rgba(255, 84, 38, 0.09), transparent 72%),
    radial-gradient(48% 36% at 92% 34%, rgba(139, 147, 245, 0.035), transparent 74%),
    var(--bg);
  font-family: var(--sans);
  font-weight: var(--w-regular);
  letter-spacing: -0.01em;
}

body::before {
  height: 440px;
  background:
    radial-gradient(55% 80% at 6% -12%, rgba(255, 84, 38, 0.12), transparent 74%),
    radial-gradient(44% 65% at 96% -8%, rgba(139, 147, 245, 0.055), transparent 76%);
  opacity: 0.62;
}

body::after {
  opacity: 0.1;
  background-size: 64px 64px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--r-ctl);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: var(--w-heavy);
  letter-spacing: -0.05em;
  box-shadow: none;
  transition: opacity var(--t-base) var(--ease);
}

.topbar .brand:hover .brand-mark {
  transform: none;
  box-shadow: none;
  opacity: 0.84;
}

.brand-copy strong {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: 0.13em;
}

.brand-copy strong span { color: var(--brand); }

.topbar {
  min-height: 64px;
  padding: calc(12px + env(safe-area-inset-top)) 24px 12px;
}

/* O vidro desta camada também espera haver algo atrás dele. */
html[data-scroll="on"] .topbar {
  background: rgba(8, 9, 11, 0.7);
  border-bottom-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.018);
  backdrop-filter: saturate(150%) blur(var(--blur-veil));
  -webkit-backdrop-filter: saturate(150%) blur(var(--blur-veil));
}

.clock {
  font-weight: var(--w-semibold);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border-color: rgba(255, 255, 255, 0.08);
}

.phone { padding-top: 30px; }

.greeting {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 2px;
}

.greet-line {
  flex: 0 0 auto;
  font-size: clamp(27px, 2.5vw, 36px);
  font-weight: var(--w-bold);
  letter-spacing: -0.05em;
}

.greet-line span { font-weight: var(--w-regular); }

.greet-sub {
  max-width: 440px;
  margin: 0 0 2px;
  text-align: right;
  font-size: 12.5px;
  font-weight: var(--w-regular);
}

.greet-sub b { font-weight: var(--w-semibold); }

.hero {
  padding: 28px 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-block);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 38%),
    rgba(18, 21, 27, 0.78);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(var(--blur-veil)) saturate(125%);
  -webkit-backdrop-filter: blur(var(--blur-veil)) saturate(125%);
}

.hero::before {
  display: none;
}

.hero::after {
  width: 320px;
  height: 320px;
  right: -90px;
  top: -130px;
  filter: blur(var(--blur-scrim));
  opacity: 0.72;
  animation: halo-drift 8s ease-in-out infinite alternate;
}

.hero-home {
  --hero-glow: var(--brand-glow);
  min-height: 0;
  background:
    radial-gradient(65% 100% at 94% 4%, rgba(255, 84, 38, 0.1), transparent 68%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 42%),
    rgba(18, 21, 27, 0.82);
}

.hero-finance {
  --hero-glow: rgba(240, 180, 69, 0.2);
  background:
    radial-gradient(62% 105% at 92% 8%, rgba(240, 180, 69, 0.12), transparent 68%),
    radial-gradient(42% 75% at 72% 110%, rgba(139, 147, 245, 0.09), transparent 72%),
    rgba(18, 21, 27, 0.84);
}

.hero-client {
  --hero-glow: var(--brand-glow);
  background:
    radial-gradient(58% 98% at 94% 4%, rgba(255, 84, 38, 0.13), transparent 68%),
    rgba(18, 21, 27, 0.84);
}

.hero-top { margin-bottom: 22px; }

.hero-kicker,
.summary-kicker {
  font-weight: var(--w-bold);
  letter-spacing: 0.16em;
}

.hero-days,
.summary-date {
  font-weight: var(--w-medium);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(var(--blur-veil));
}

.hero-amount {
  font-size: var(--type-hero);
  font-weight: var(--w-bold);
  letter-spacing: -0.065em;
  line-height: 0.98;
}

.hero-home .hero-amount { font-size: clamp(2.75rem, 4.8vw, 4rem); }
.hero-finance .hero-amount,
.hero-client .hero-amount { font-size: var(--type-display); }

.hero-sub {
  max-width: 660px;
  font-size: 13px;
  font-weight: var(--w-regular);
  line-height: 1.55;
}

.hero-sub b { font-weight: var(--w-semibold); }

.compose { margin-top: 26px; }
.compose-track { height: 9px; padding: 2px; }
.compose-legend { font-size: 11px; font-weight: var(--w-regular); }
.compose-legend b { font-weight: var(--w-semibold); }

.hero-actions { margin-top: 20px; }

.hero-btn {
  min-height: 38px;
  font-weight: var(--w-semibold);
  transition: transform var(--t-base) var(--spring), background var(--t-base) ease, border-color var(--t-base) ease;
}

.hero-btn.solid {
  background: var(--brand);
  box-shadow: 0 12px 30px -14px var(--brand), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.section-head h2 {
  font-size: 14px;
  font-weight: var(--w-semibold);
}

.section-meta { font-weight: var(--w-regular); }
.link-btn { font-weight: var(--w-semibold); }

.portal {
  cursor: pointer;
  min-height: 154px;
  padding: 17px 18px 18px;
  border-color: rgba(255, 255, 255, 0.085);
  border-radius: var(--r-block);
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 30px rgba(0, 0, 0, 0.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform var(--t-base) var(--spring), border-color var(--t-base) ease, background var(--t-base) ease, box-shadow var(--t-base) var(--ease);
}

.portal::after {
  content: "↗";
  position: absolute;
  right: 17px;
  bottom: 15px;
  color: var(--muted-2);
  font-size: 13px;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity var(--t-base) ease, transform var(--t-base) var(--spring), color var(--t-base) ease;
}

.portal:hover::after,
.portal:focus-visible::after {
  opacity: 1;
  transform: none;
  color: var(--ink-2);
}

.portal-top { margin-bottom: 14px; }
.portal-ico { width: 36px; height: 36px; border-radius: var(--r-ctl); }

.portal-metric {
  font-size: var(--type-card);
  font-weight: var(--w-bold);
}

.portal-name { font-weight: var(--w-semibold); }

.portal-preview {
  max-width: calc(100% - 18px);
  font-weight: var(--w-regular);
}

.dash-hdr {
  padding: 25px;
  background: rgba(15, 17, 22, 0.58);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 48px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(var(--blur-veil)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--blur-veil)) saturate(120%);
}

body[data-view="principal"] .dash-hdr {
  overflow: visible;
  padding: 8px 2px 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-view="principal"] .dash-hdr::after { display: none; }

.back { font-weight: var(--w-semibold); }

#dash-title {
  font-size: var(--type-title);
  font-weight: var(--w-bold);
  line-height: 0.98;
}

.dash-sub { font-weight: var(--w-regular); }

.lens { font-weight: var(--w-medium); }
.lens[aria-pressed="true"] { font-weight: var(--w-semibold); }



.quick input { font-weight: var(--w-regular); }
.quick-hint { font-weight: var(--w-regular); }

.kpi,
.item,
.insight,
.client {
  border-color: rgba(255, 255, 255, 0.075);
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.032), 0 12px 32px rgba(0, 0, 0, 0.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.k-label,
.badge { font-weight: var(--w-bold); }
.k-value { font-weight: var(--w-bold); }
.k-hint { font-weight: var(--w-regular); }
.item-title,
.insight-title,
.client-info strong { font-weight: var(--w-semibold); }
.item-title strong { font-weight: var(--w-semibold); }
.item-sub,
.client-info span,
.insight-copy { font-weight: var(--w-regular); }
.item-sub b,
.insight-copy b { font-weight: var(--w-semibold); }
.item-amount,
.client-total { font-weight: var(--w-semibold); }
.chip-btn,
.insight-btn { font-weight: var(--w-semibold); }

.summary-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-block);
  background:
    radial-gradient(55% 100% at 100% 0%, rgba(255, 84, 38, 0.12), transparent 72%),
    radial-gradient(48% 85% at 0% 100%, rgba(139, 147, 245, 0.08), transparent 74%),
    #12151b;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.065);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: hero-reveal var(--t-slow) both var(--ease);
}

.summary-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -100px;
  top: -140px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow), transparent 68%);
  filter: blur(var(--blur-veil));
  animation: halo-drift 9s ease-in-out infinite alternate;
}

.summary-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.summary-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  color: var(--hero-muted);
  font-size: 10px;
  text-transform: uppercase;
}

.summary-kicker i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-glow);
}

.summary-title {
  margin: 0;
  max-width: 620px;
  color: var(--hero-ink);
  font-size: clamp(2.25rem, 4vw, 3.45rem);
  font-weight: var(--w-bold);
  letter-spacing: -0.06em;
  line-height: 0.98;
}

.summary-copy {
  margin: 13px 0 0;
  color: var(--hero-muted);
  font-size: 13px;
  font-weight: var(--w-regular);
}

.summary-date {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: var(--r-pill);
  color: var(--hero-muted);
  font-size: 10.5px;
  white-space: nowrap;
}

.summary-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.summary-signal {
  position: relative;
  overflow: hidden;
  display: flex;
  min-width: 0;
  min-height: 142px;
  padding: 16px;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: var(--r-block);
  background: var(--hero-inset);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform var(--t-base) var(--spring), background var(--t-base) ease, border-color var(--t-base) ease, box-shadow var(--t-base) var(--ease);
}

.summary-signal::before {
  content: "";
  position: absolute;
  inset: auto -35px -55px auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  opacity: 0.65;
  background: radial-gradient(circle, var(--signal-glow, transparent), transparent 70%);
  transition: transform var(--t-slow) var(--ease), opacity var(--t-base) ease;
}

.summary-signal.late { --signal-color: var(--late); --signal-glow: var(--late-glow); }
.summary-signal.due { --signal-color: var(--due); --signal-glow: var(--due-glow); }
.summary-signal.cash { --signal-color: var(--cash); --signal-glow: var(--cash-glow); }
.summary-signal.future { --signal-color: var(--future); --signal-glow: var(--future-glow); }
.summary-signal.quiet { --signal-color: var(--muted); --signal-glow: rgba(255, 255, 255, 0.06); }

.summary-signal-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary-signal-icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: var(--r-ctl);
  background: color-mix(in srgb, var(--signal-color) 12%, transparent);
  color: var(--signal-color);
}

.summary-signal-icon svg { width: 15px; height: 15px; }

.summary-signal-label {
  color: var(--hero-muted);
  font-size: 10px;
  font-weight: var(--w-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.summary-signal-arrow {
  margin-left: auto;
  color: var(--hero-muted);
  font-size: 12px;
  opacity: 0.6;
  transition: transform var(--t-base) var(--spring), opacity var(--t-base) ease;
}

.summary-signal-value {
  position: relative;
  margin-top: auto;
  color: var(--hero-ink);
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  font-weight: var(--w-bold);
  letter-spacing: -0.055em;
  line-height: 1;
}

.summary-signal-detail {
  position: relative;
  margin-top: 7px;
  overflow: hidden;
  color: var(--hero-muted);
  font-size: 11px;
  font-weight: var(--w-regular);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.principal-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.principal-flow .item {
  min-height: 84px;
  grid-template-columns: auto minmax(0, 1fr);
}

.principal-flow .item.with-side { grid-template-columns: minmax(0, 1fr) auto; }


/* ── accent por dash: superfície continua neutra, a cor mora no ponto ── */

body { --dash: var(--brand); --dash-glow: var(--brand-glow); }
body[data-view="financeiro"] { --dash: var(--cash); --dash-glow: var(--cash-glow); }
body[data-view="agenda"] { --dash: var(--future); --dash-glow: var(--future-glow); }
body[data-view="tasks"],
body[data-view="cliente"],
body[data-view="principal"],
body[data-view="home"] { --dash: var(--brand); --dash-glow: var(--brand-glow); }

.hero-kicker i,
.summary-kicker i {
  background: var(--dash);
  box-shadow: 0 0 0 3px var(--dash-glow);
}

.hero-finance {
  --hero-glow: var(--cash-glow);
  background:
    radial-gradient(62% 105% at 92% 8%, rgba(62, 217, 155, 0.11), transparent 68%),
    radial-gradient(42% 75% at 72% 110%, rgba(240, 180, 69, 0.07), transparent 72%),
    rgba(18, 21, 27, 0.84);
}

.lens[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--dash) 42%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dash) 18%, transparent);
}


/* ── gramática de estado v3: nenhum filete em card nenhum ──────────────────
   O estado emerge em quatro lugares e só neles: o canto do card recebe um
   véu do tom, o ícone carrega a cor, o número monetário é tinta e o badge
   nomeia. A superfície continua neutra e nenhum card é tingido por inteiro. */

.portal,
.kpi,
.item,
.insight,
.client,
.note {
  --tone: var(--muted-2);
  --tone-wash: transparent;
  --tone-edge: rgba(255, 255, 255, 0.075);
}

.portal[data-state="late"], .kpi.late, .item.is-late, .insight.late, .client.risk, .note.is-late,
.portal[data-state="due"], .kpi.due, .item.is-due, .insight.due, .note.is-due,
.portal[data-state="cash"], .kpi.cash, .item.is-cash, .insight.cash, .note.is-cash,
.portal[data-state="future"], .kpi.future, .item.is-future, .insight.future, .note.is-future,
.portal[data-state="brand"], .item.is-brand, .insight.brand, .client.top, .note.is-brand,
.item.is-review {
  --tone-wash: color-mix(in srgb, var(--tone) 11%, transparent);
  --tone-edge: color-mix(in srgb, var(--tone) 13%, rgba(255, 255, 255, 0.08));
}

.portal[data-state="late"], .kpi.late, .item.is-late, .item.is-review,
.insight.late, .client.risk, .note.is-late { --tone: var(--late); }
.portal[data-state="due"], .kpi.due, .item.is-due, .insight.due, .note.is-due { --tone: var(--due); }
.portal[data-state="cash"], .kpi.cash, .item.is-cash, .insight.cash, .note.is-cash { --tone: var(--cash); }
.portal[data-state="future"], .kpi.future, .item.is-future, .insight.future, .note.is-future { --tone: var(--future); }
.portal[data-state="brand"], .item.is-brand, .insight.brand, .client.top, .note.is-brand { --tone: var(--brand); }

/* estados frios não merecem véu: em dia é ausência de cor, não verde por toda parte */
.portal[data-state="cash"], .kpi.cash, .item.is-cash, .insight.cash, .note.is-cash,
.item.is-future, .insight.future, .note.is-future, .kpi.future, .portal[data-state="future"] {
  --tone-wash: color-mix(in srgb, var(--tone) 6%, transparent);
  --tone-edge: color-mix(in srgb, var(--tone) 8%, rgba(255, 255, 255, 0.08));
}

.portal,
.kpi,
.item,
.insight,
.client {
  border-color: var(--tone-edge);
  background:
    radial-gradient(122% 128% at 100% 0%, var(--tone-wash), transparent 58%),
    var(--surface);
}

.portal-glow { display: none; }

/* o ícone é o portador da cor no card frio ou quente */
.item.is-late .item-time, .item.is-due .item-time { color: var(--tone); }
.kpi .k-label { color: var(--tone); }

/* ── kicker nomeia o lugar; a explicação vira caption discreta ── */

.hero-cap {
  margin: 0 0 3px;
  color: var(--hero-muted);
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── portais: hierarquia real, sem filete ── */
.portal:active { transform: scale(0.97); }

.portal:nth-child(1) { animation-delay: 0s; }
.portal:nth-child(2) { animation-delay: var(--t-fast); }
.portal:nth-child(3) { animation-delay: var(--t-fast); }
.portal:nth-child(4) { animation-delay: var(--t-base); }

#home-portals .portals { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* principal não é irmão dos outros três: é a faixa de decisão do dia */
.portal[data-sector="principal"] {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "ico metric name badge"
    "ico prev prev prev";
  align-items: center;
  column-gap: 11px;
  row-gap: 3px;
  min-height: 0;
  padding: 13px 15px 14px;
}

.portal[data-sector="principal"] .portal-top { display: contents; }
.portal[data-sector="principal"] .portal-ico { grid-area: ico; align-self: center; }
.portal[data-sector="principal"] .badge { grid-area: badge; align-self: center; }
.portal[data-sector="principal"] .portal-metric { grid-area: metric; font-size: 27px; }
.portal[data-sector="principal"] .portal-name { grid-area: name; margin: 0; }
.portal[data-sector="principal"] .portal-preview { grid-area: prev; margin: 0; -webkit-line-clamp: 1; }
.portal[data-sector="principal"]::after { display: none; }

/* cada setor tem voz própria no número */
.portal[data-sector="caixa"] .portal-metric,
.portal[data-sector="agenda"] .portal-metric {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.055em;
}

.portal[data-sector="caixa"] .portal-name { color: var(--cash-2); }
.portal[data-sector="agenda"] .portal-name { color: var(--future-2); }
.portal[data-sector="tasks"] .portal-name { color: var(--brand-2); }

.portal[data-sector="agenda"] .portal-metric { font-size: clamp(20px, 5.4vw, 25px); }
.portal[data-sector="tasks"] .portal-metric { font-variant-numeric: tabular-nums; }

/* ── insight: título trunca com consciência, cliente vira meta ── */

.insight-title { align-items: flex-start; }

.insight-name {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.insight-title .badge { flex: 0 0 auto; margin-top: 1px; }

.insight-copy {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.insight-who {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--w-semibold);
  transition: color var(--t-fast) ease;
}

.insight-who:hover { color: var(--ink-2); }

.insight-avatar {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 8.5px;
  font-weight: var(--w-heavy);
  letter-spacing: 0.02em;
}

.insight-actions { margin-top: 11px; }

/* na ficha todo insight é do mesmo cliente: repetir o nome vira ruído */
body[data-view="cliente"] .insight-who { display: none; }
.insight-btn:active { transform: scale(0.97); }

/* ── sinais da principal: headline do setor, não abreviação ── */

.summary-signal-meta {
  display: none;
  position: relative;
  margin-top: 6px;
  color: var(--hero-muted);
  font-size: 10px;
  font-weight: var(--w-medium);
  opacity: 0.72;
}

.summary-signal-detail {
  color: rgba(255, 255, 255, 0.78);
  font-weight: var(--w-medium);
}

.summary-signal:active { transform: scale(0.985); }

/* ── lançamento: brief de task e bloco de agenda ── */

.launch { display: flex; flex-direction: column; gap: 10px; }
.launch[hidden] { display: none; }

.launch-btn {
  align-self: flex-end;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: var(--w-semibold);
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-base) var(--spring);
}

.launch-btn::before {
  content: "+";
  margin-right: 6px;
  color: var(--future-2);
  font-weight: var(--w-heavy);
}

.launch-btn:hover { border-color: var(--future-line); background: var(--future-bg); color: var(--future-2); }
.launch-btn:active { transform: scale(0.97); }

.brief {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  animation: brief-open var(--t-base) var(--ease) both;
}

.brief[hidden] { display: none; }
#blocker { margin-top: 0; border-color: var(--future-line); }

.brief-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field[hidden],
#sync-copy-sql[hidden],
#sync-close[hidden] { display: none !important; }

.field > span {
  color: var(--muted-2);
  font-size: 9.5px;
  font-weight: var(--w-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  outline: none;
  background: var(--surface-inset);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: var(--w-medium);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.field textarea { resize: vertical; line-height: 1.45; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--dash); box-shadow: 0 0 0 3px var(--dash-glow); }

.toggle {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--w-bold);
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-base) var(--spring);
}

.toggle:active { transform: scale(0.96); }
.toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--dash) 46%, var(--line));
  background: color-mix(in srgb, var(--dash) 13%, var(--surface-2));
  color: var(--ink);
}

.brief-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.brief-actions .insight-btn { min-height: 34px; }

/* ── agenda: grade horária, marcos do dia e semana ── */

/* ── caixa: infográfico de horizonte e sparklines nos KPIs ── */

.horizon {
  padding: 16px 15px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.horizon-chart { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: end; }

.horizon-col {
  display: grid;
  grid-template-rows: 54px auto auto;
  gap: 5px;
  min-width: 0;
  justify-items: start;
  align-items: end;
}

.horizon-bar {
  width: 100%;
  height: var(--h);
  min-height: 8px;
  align-self: end;
  border-radius: var(--r-ctl) var(--r-ctl) 2px 2px;
  background: linear-gradient(180deg, var(--bar), color-mix(in srgb, var(--bar) 30%, transparent));
  transform-origin: bottom;
  animation: bar-rise var(--t-slow) var(--ease) both;
}

.horizon-col.late { --bar: var(--late); }
.horizon-col.due { --bar: var(--due); }
.horizon-col.future { --bar: var(--future); }
.horizon-col.zero { --bar: var(--line-2); opacity: 0.5; }
.horizon-col.zero .horizon-bar { min-height: 3px; }
.horizon-col:nth-child(2) .horizon-bar { animation-delay: var(--t-fast); }
.horizon-col:nth-child(3) .horizon-bar { animation-delay: var(--t-fast); }
.horizon-col:nth-child(4) .horizon-bar { animation-delay: var(--t-base); }
.horizon-col:nth-child(5) .horizon-bar { animation-delay: var(--t-base); }

.horizon-label {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: var(--w-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.horizon-value {
  color: var(--ink);
  font-size: 10.5px;
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kpi { position: relative; overflow: hidden; }

.spark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 30px;
  pointer-events: none;
}

.spark-area { fill: color-mix(in srgb, var(--tone, var(--muted)) 16%, transparent); stroke: none; }
.spark-line {
  fill: none;
  stroke: var(--tone, var(--muted));
  stroke-width: 1.6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 160;
  animation: spark-draw var(--t-slow) var(--ease) both;
}

.spark.late { --tone: var(--late); }
.spark.due { --tone: var(--due); }
.spark.cash { --tone: var(--cash); }
.spark.future { --tone: var(--future); }

.kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { padding-bottom: 30px; }

/* ── listas densas do caixa: mais leitura por scroll ── */

.section.dense .item { min-height: 0; padding: 10px 12px 10px 14px; }
.section.dense .list { gap: 7px; }

/* o valor sobe para a linha do cliente: o serviço fica com a largura toda */
.section.dense .item { align-items: start; }
.section.dense .item-side { align-self: start; }
.section.dense .item-sub { margin-top: 3px; font-size: 11px; }
.section.dense .item-meta { margin-top: 7px; gap: 5px; }
.section.dense .chip-btn { min-height: 24px; padding: 0 8px; font-size: 10px; }

/* ── motion a serviço da leitura ── */

@keyframes brief-open {
  from { opacity: 0; transform: translateY(-6px) scale(0.99); }
  to { opacity: 1; transform: none; }
}

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

@keyframes spark-draw {
  from { stroke-dashoffset: 160; }
  to { stroke-dashoffset: 0; }
}

.compose-seg { animation: seg-fill var(--t-slow) var(--ease) both; transform-origin: left; }
.compose-goal { animation: none; }

@keyframes seg-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.hero-btn:active,
.chip-btn:active,
.check:active,
.tab:active { transform: scale(0.97); }

@keyframes glass-pass {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(105%); opacity: 0.45; }
}

@keyframes halo-drift {
  from { transform: translate3d(0, 0, 0) scale(0.96); }
  to { transform: translate3d(-14px, 12px, 0) scale(1.06); }
}

@media (hover: hover) {
  .portal:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(26, 29, 36, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 24px 58px rgba(0, 0, 0, 0.3);
  }

  .summary-signal:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--signal-color) 34%, rgba(255, 255, 255, 0.1));
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .summary-signal:hover::before { transform: translate(-8px, -7px) scale(1.15); opacity: 0.95; }
  .summary-signal:hover .summary-signal-arrow { transform: translate(2px, -2px); opacity: 1; }
}

@media (min-width: 860px) {
  #view-home {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 24px;
  }

  #view-home > .greeting,
  #home-hero,
  #home-portals,
  #home-action {
    grid-column: 1;
    grid-row: auto;
  }

  #home-hero .hero {
    min-height: 0;
    height: auto;
    display: block;
  }

  #home-hero .hero .compose { margin-top: 26px; padding-top: 0; }

  #home-portals .portals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #home-portals .portal { min-height: 158px; }

  #view-dash {
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
    column-gap: 38px;
  }

  body[data-view="principal"] #view-dash {
    display: flex;
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    flex-direction: column;
    gap: 14px;
  }

  body[data-view="principal"] .dash-hdr {
    position: static;
    width: 100%;
    padding: 0 2px;
  }

  body[data-view="principal"] #dash-title,
  body[data-view="principal"] .dash-sub { display: none; }

  body[data-view="principal"] #dash-body { width: 100%; }

  body[data-view="cliente"] #dash-title {
    font-size: 34px;
    font-weight: var(--w-bold);
  }

  /* no amplo cabe o "por que importa" sob a headline do setor */
  .summary-signal-meta { display: block; }
  .summary-signal { min-height: 158px; }

  .horizon-col { grid-template-rows: 72px auto auto; }
  .horizon-chart { gap: 12px; }

  .hours { border-radius: var(--r-lg); }
  .hour { min-height: 44px; grid-template-columns: 64px minmax(0, 1fr); }

  .brief { padding: 18px; }
  .brief-grid { gap: 14px; }

  #home-portals .portals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #home-portals .portal[data-sector="principal"] { min-height: 0; padding: 17px 22px 18px; }
  .portal[data-sector="principal"] .portal-metric { font-size: 32px; }
  .portal[data-sector="principal"] .portal-ico { width: 40px; height: 40px; }
}

@media (max-width: 859px) {
  .phone {
    padding-top: 18px;
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }

  #view-home,
  #view-dash { gap: 14px; }

  .greeting {
    display: block;
  }

  .greet-sub {
    margin-top: 8px;
    text-align: left;
  }

  .hero-home,
  .hero-finance { padding: 18px 20px; }

  .hero-home .hero-top,
  .hero-finance .hero-top { margin-bottom: 11px; }

  .hero-home .hero-amount,
  .hero-finance .hero-amount { font-size: clamp(2.2rem, 10vw, 2.55rem); }

  .hero-home .hero-sub,
  .hero-finance .hero-sub {
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.42;
  }

  .hero-home .compose,
  .hero-finance .compose { margin-top: 13px; }

  .hero-home .compose-track,
  .hero-finance .compose-track { height: 7px; }

  .hero-home .compose-legend,
  .hero-finance .compose-legend {
    gap: 3px 10px;
    margin-top: 7px;
    font-size: 9.5px;
  }

  .hero-home .hero-actions { margin-top: 12px; }
  .hero-home .hero-btn { min-height: 36px; }

  #home-portals .section-head { margin-bottom: 8px; }

  .portal {
    min-height: 116px;
    padding: 10px 11px 11px 14px;
  }

  .portal::after { display: none; }
  .portal-top { margin-bottom: 7px; }
  .portal-ico { width: 29px; height: 29px; border-radius: var(--r-ctl); }
  .portal-ico svg { width: 15px; height: 15px; }
  .portal-metric { font-size: clamp(22px, 6vw, 27px); }
  .portal-name { font-size: 12px; }
  .portal-preview {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.3;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-view="principal"] .dash-hdr {
    padding: 0 2px;
    background: transparent;
  }

  body[data-view="principal"] #dash-title,
  body[data-view="principal"] .dash-sub { display: none; }

  body[data-view="principal"] .back {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
  }

  .summary-hero { padding: 18px; border-radius: var(--r-block); }
  .summary-title { max-width: 300px; font-size: clamp(1.65rem, 7vw, 1.9rem); line-height: 1.02; }
  .summary-copy { margin-top: 7px; font-size: 11px; }
  .summary-date { display: none; }
  .summary-signals { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }

  .summary-signal {
    min-height: 106px;
    display: flex;
    padding: 9px 8px 9px 10px;
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--r-block);
  }

  .summary-signal-top { display: flex; }
  .summary-signal-icon { width: 23px; height: 23px; border-radius: var(--r-pill); }
  .summary-signal-icon svg { width: 12px; height: 12px; }
  .summary-signal-label { font-size: 8px; letter-spacing: 0.06em; }
  .summary-signal-arrow { display: none; }
  .summary-signal-value {
    margin-top: auto;
    font-size: clamp(0.95rem, 4vw, 1.15rem);
    white-space: nowrap;
  }
  .summary-signal-detail {
    display: -webkit-box;
    margin-top: 5px;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.25;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .principal-decisions { margin-top: 0; }
  .principal-flow { grid-template-columns: 1fr; }

  .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .kpi { min-width: 0; min-height: 84px; padding: 12px 8px; }
  .k-label { font-size: 8.5px; }
  .k-value { overflow: hidden; font-size: clamp(12px, 3.3vw, 15px); text-overflow: ellipsis; white-space: nowrap; }
  .k-hint { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

  .empty-actions { margin-top: 14px; }
  .empty-actions .chip-btn {
    display: inline-flex;
    min-height: 32px;
    padding-inline: 12px;
    align-items: center;
  }

  /* headline do setor pede altura: o sinal vira bloco de leitura, não chip */
  .summary-signal { min-height: 124px; }
  .summary-signal-value { font-size: clamp(0.95rem, 4.2vw, 1.2rem); }
  .summary-signal-detail { -webkit-line-clamp: 3; font-size: 9.5px; line-height: 1.3; }

  .hero-cap { font-size: 9px; letter-spacing: 0.12em; }

  .portal { min-height: 108px; padding: 10px 9px 11px 12px; }
  .portal-ico { width: 26px; height: 26px; border-radius: var(--r-ctl); }
  .portal-ico svg { width: 14px; height: 14px; }
  .portal-top { margin-bottom: 6px; }
  .portal-metric { font-size: clamp(15px, 4.6vw, 20px); }
  .portal-name { font-size: 11px; }
  .portal-preview { font-size: 9.5px; -webkit-line-clamp: 3; }
  .portal .badge { min-width: 0; max-width: 100%; overflow: hidden; padding: 0 5px; font-size: 8px; letter-spacing: 0.02em; text-overflow: ellipsis; }

  .portal[data-sector="principal"] { min-height: 0; padding: 11px 12px 12px; column-gap: 9px; }
  .portal[data-sector="principal"] .portal-ico { width: 32px; height: 32px; }
  .portal[data-sector="principal"] .portal-ico svg { width: 16px; height: 16px; }
  .portal[data-sector="principal"] .portal-preview { font-size: 10.5px; }
  .portal[data-sector="principal"] .badge { font-size: 8.5px; padding: 0 7px; }
  .portal[data-sector="principal"] .portal-metric { font-size: 23px; }
  .portal[data-sector="principal"] .portal-name { font-size: 12px; }

  /* quatro números do caixa em duas fileiras legíveis */
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { min-height: 92px; padding: 12px 11px 30px; }
  .k-value { font-size: clamp(13px, 4vw, 17px); }

  .horizon { margin-top: 14px; padding-top: 12px; }
  .horizon-chart { gap: 5px; }
  .horizon-col { grid-template-rows: 44px auto auto; }
  .horizon-label { font-size: 8.5px; }
  .horizon-value { font-size: 9.5px; }

  .hour { grid-template-columns: 46px minmax(0, 1fr); min-height: 44px; }
  .hour-free { min-height: 34px; }
  .week-add { width: 34px; height: 34px; }
  .hour-label { padding-left: 10px; font-size: 10px; }
  .block strong { font-size: 12px; }

  .brief-grid { gap: 8px; }
  .field input,
  .field select,
  .field textarea { min-height: 40px; font-size: 13px; }

  .launch { margin-top: -4px; }

  .section.dense .item { padding: 10px 11px; }
}

@media (max-width: 430px) {
  .phone { padding-top: 16px; }
  .hero { padding: 20px; }
  .hero-amount,
  .hero-client .hero-amount { font-size: clamp(2.4rem, 11vw, 3rem); }
  .hero-top { margin-bottom: 14px; }
  .summary-hero-head { display: block; }
  .summary-date { display: none; }
  .portal { min-height: 116px; }
}

@media (prefers-reduced-motion: reduce) {
  .summary-hero::before,
  .hero::before,
  .hero::after,
  .horizon-bar,
  .spark-line,
  .compose-seg,
  .brief { animation: none !important; }

  .spark-line { stroke-dasharray: none; }
  .horizon-bar,
  .compose-seg { transform: none !important; opacity: 1 !important; }

  .portal:active,
  .summary-signal:active,
  .insight-btn:active,
  .hero-btn:active,
  .chip-btn:active,
  .toggle:active,
  .week-add:active,
  .launch-btn:active,
  .check:active,
  .tab:active { transform: none !important; }
}

/* ===========================================================================
   Direção v3: a prancheta do operador
   Nenhum filete de estado. A informação secundária ganha peça própria e as
   listas deixam de ser cartões repetidos: viram folha contínua com fio de
   cabelo entre as linhas, que é como o Arthur já lê romaneio e caixa.
   =========================================================================== */

/* ── cabeça de seção: título de verdade sobre um fio de largura inteira ── */

.section-head {
  align-items: baseline;
  margin-bottom: 13px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.section-head h2 {
  gap: 9px;
  color: var(--ink);
  font-size: 16.5px;
  font-weight: var(--w-bold);
  letter-spacing: -0.035em;
}

.section-head h2 i { width: 6px; height: 6px; align-self: center; }

.section-meta {
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ── hero: uma voz. A legenda viaja na linha do número ── */

.hero-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 11px;
}

.hero-cap {
  margin: 0;
  color: var(--hero-muted);
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── faixa de fatos: o que era parágrafo muted vira medida ── */

.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: var(--r-block);
  background: var(--hero-line);
}

.fact {
  position: relative;
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 11px 12px 12px;
  background: rgba(255, 255, 255, 0.045);
}

.fact.off { background: rgba(255, 255, 255, 0.022); }

.fact-k {
  color: var(--hero-muted);
  font-size: 9px;
  font-weight: var(--w-heavy);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fact-v {
  color: var(--hero-ink);
  font-size: 14.5px;
  font-weight: var(--w-bold);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.fact.late .fact-v { color: var(--late-2); }
.fact.due .fact-v { color: var(--due-2); }
.fact.future .fact-v { color: var(--future-2); }
.fact.off .fact-v { color: var(--hero-muted); }

.fact-n { color: var(--hero-muted); font-size: 10px; font-weight: var(--w-regular); }

.fact-hit { position: absolute; inset: 0; }

/* ── principal: o cartaz decide onde é lido ── */

.summary-hero-copy { min-width: 0; }

.summary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 17px;
}

.summary-who {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--hero-muted);
  font-size: 11px;
  font-weight: var(--w-semibold);
  transition: color var(--t-fast) ease;
}

.summary-who:hover { color: var(--hero-ink); }
.summary-who .insight-avatar { background: rgba(255, 255, 255, 0.1); color: var(--hero-ink); }

.summary-signals {
  gap: 1px;
  margin-top: 22px;
  overflow: hidden;
  border-radius: var(--r-block);
  background: var(--hero-line);
}

.summary-signal {
  min-height: 0;
  padding: 13px 12px 14px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: none;
}

.summary-signal::before { display: none; }

@media (hover: hover) {
  .summary-signal:hover {
    transform: none;
    border: 0;
    background: rgba(255, 255, 255, 0.085);
    box-shadow: none;
  }
}

/* ── pauta do dia: prazo, bloco e dinheiro na mesma folha ── */

.pauta {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.beat {
  --tone: var(--muted-2);
  --tone-wash: transparent;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 15px;
  border-top: 1px solid var(--line);
  background: radial-gradient(110% 170% at 100% 0%, var(--tone-wash), transparent 58%);
  animation: rise var(--t-slow) both var(--ease);
}

.beat:first-child { border-top: 0; }
.beat.is-late { --tone: var(--late); --tone-wash: color-mix(in srgb, var(--late) 10%, transparent); }
.beat.is-due { --tone: var(--due); --tone-wash: color-mix(in srgb, var(--due) 9%, transparent); }
.beat.is-future { --tone: var(--future); --tone-wash: color-mix(in srgb, var(--future) 7%, transparent); }

.beat-when {
  color: var(--tone);
  font-size: 10px;
  font-weight: var(--w-heavy);
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.beat-body { min-width: 0; }

.beat-title {
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: var(--w-semibold);
  letter-spacing: -0.015em;
  line-height: 1.32;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.beat-note {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: var(--w-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.beat-do { display: flex; align-items: center; gap: 6px; }
.beat-do .check { margin: 0; }

/* ── Tasks: bloco de notas, não extrato ── */

.notepad {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px 15px;
  border-top: 1px solid var(--line);
  background: radial-gradient(105% 165% at 100% 0%, var(--tone-wash), transparent 56%);
  animation: rise var(--t-slow) both var(--ease);
}

.note:first-child { border-top: 0; }
.note .check { margin-top: 2px; }

.note-title {
  margin: 0;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: var(--w-semibold);
  letter-spacing: -0.018em;
  line-height: 1.34;
}

.note.is-idea .note-title { font-style: italic; font-weight: var(--w-medium); }

.note-margin {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: var(--w-regular);
  line-height: 1.4;
}

.note-link {
  color: var(--muted-2);
  font-weight: var(--w-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--line-2);
}

.note-link:hover { color: var(--ink-2); }

.note-brief {
  margin: 6px 0 0;
  color: var(--muted-2);
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.45;
}

.note-flag {
  align-self: center;
  color: var(--tone);
  font-size: 9px;
  font-weight: var(--w-heavy);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.note.is-done { opacity: 0.5; }
.note.is-done .note-title { color: var(--muted); text-decoration: line-through; }

/* ── o rascunho: papel pautado que acompanha o polegar ── */

.pad {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--brand-line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 84, 38, 0.06), transparent 44%), var(--surface-inset);
  box-shadow: var(--shadow-sm);
}

.pad-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.pad-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--brand-ink);
  font-size: 9.5px;
  font-weight: var(--w-heavy);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.pad-tab::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

.pad-close {
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--r-ctl);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: var(--w-semibold);
}

.pad-close:hover { color: var(--ink-2); }

.pad-paper {
  width: 100%;
  min-height: 96px;
  padding: 9px 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  outline: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: var(--w-regular);
  line-height: 28px;
  resize: vertical;
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 27px,
    color-mix(in srgb, var(--line-2) 62%, transparent) 27px 28px
  );
  background-position: 0 9px;
  background-attachment: local;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.pad-paper::placeholder { color: var(--muted-2); }
.pad-paper:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }

.pad-read {
  margin: 0;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: var(--w-regular);
  line-height: 1.45;
}

.pad-read[data-on="1"] {
  color: var(--ink-2);
  font-weight: var(--w-semibold);
}

.pad-boost { display: flex; flex-wrap: wrap; gap: 6px; }

.boost {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: var(--w-semibold);
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-base) var(--spring);
}

.boost:hover { border-color: var(--line-2); color: var(--ink-2); }
.boost:active { transform: scale(0.96); }

.boost[aria-pressed="true"],
.boost[aria-expanded="true"] {
  border-color: var(--brand-line);
  background: var(--brand-bg);
  color: var(--brand-2);
}

.pad-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pad-foot .quick-hint { margin: 0; flex: 1; min-width: 0; }
.pad .brief { margin: 0; }

.scrim {
  position: fixed;
  z-index: 150;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  animation: fade-in var(--t-base) var(--ease) both;
}

.scrim[hidden] { display: none; }

.fab {
  position: fixed;
  z-index: 160;
  right: 16px;
  bottom: calc(var(--dock-h) + 30px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 19px 0 15px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
  box-shadow: 0 16px 36px -12px var(--brand), 0 6px 18px rgba(0, 0, 0, 0.42);
  transition: transform var(--t-base) var(--spring), background var(--t-base) ease;
}

.dock { transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease); }

.fab[hidden] { display: none; }
.fab svg { width: 18px; height: 18px; }
.fab:hover { background: var(--brand-ink); transform: translateY(-2px); }
.fab:active { transform: scale(0.96); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── agenda: o dia como tempo ── */

.daynav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px 2px;
}

.daynav-step {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 17px;
  font-weight: var(--w-bold);
  line-height: 1;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}

.daynav-step:hover { border-color: var(--line-2); background: var(--surface-2); }

.daynav-label { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin-right: auto; }
.daynav-label strong { font-size: 15px; font-weight: var(--w-bold); letter-spacing: -0.03em; }
.daynav-label span { color: var(--muted); font-size: 11.5px; font-weight: var(--w-regular); }

.daynav-today {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--future-line);
  border-radius: var(--r-pill);
  background: var(--future-bg);
  color: var(--future-2);
  font-size: 11px;
  font-weight: var(--w-semibold);
  white-space: nowrap;
}

.allday {
  padding: 11px 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-inset);
}

.allday-head {
  margin: 0 0 9px;
  color: var(--muted-2);
  font-size: 9.5px;
  font-weight: var(--w-heavy);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.allday-row { display: grid; gap: 6px; }

.adchip {
  --tone: var(--due);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  min-width: 0;
  padding: 8px 10px 9px;
  border: 1px solid color-mix(in srgb, var(--tone) 18%, var(--line));
  border-radius: var(--r-ctl);
  background: color-mix(in srgb, var(--tone) 6%, var(--surface));
}

.adchip .chip-btn { grid-column: 2; grid-row: 1 / span 2; }

.adchip.is-late { --tone: var(--late); }
.adchip.is-future { --tone: var(--future); cursor: pointer; }
.adchip-who {
  grid-column: 1;
  color: var(--muted);
  font-size: 11px;
}

#blk-time-wrap[hidden],
#blk-until-wrap[hidden],
#blk-duration-wrap[hidden],
#blk-clock-row[hidden] { display: none; }

.sheet-actions .insight-btn.danger[hidden] { display: none !important; }

.agenda-switch {
  display: flex;
  gap: 3px;
  width: fit-content;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-inset);
}

.agenda-switch-btn {
  min-height: 44px;
  min-width: 92px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--w-semibold);
}

.agenda-switch-btn[aria-pressed="true"] {
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* Dobradiça: hoje/semana empilhados — menos largura, cards mais juntos. */
.agenda-switch.is-stack {
  flex-direction: column;
  align-self: center;
  width: auto;
  min-width: 0;
  border-radius: var(--r-ctl);
}

.agenda-switch.is-stack .agenda-switch-btn {
  min-width: 72px;
  min-height: 38px;
  width: 100%;
  padding: 0 12px;
  border-radius: calc(var(--r-ctl) - 2px);
  font-size: 12px;
}

.adchip-k {
  color: var(--tone);
  font-size: 9px;
  font-weight: var(--w-heavy);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.adchip-t {
  overflow: hidden;
  grid-column: 1;
  font-size: 12.5px;
  font-weight: var(--w-semibold);
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline {
  --row: 46px;
  position: relative;
  max-height: 58vh;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.tl-track {
  position: relative;
  --tl-pad: 12px;
  --tl-inset-l: 52px;
  --tl-inset-r: 8px;
  --tl-col-gap: 4px;
  height: calc(var(--span) * var(--row) + var(--tl-pad) + 8px);
}

.tl-hour {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--top) * var(--row) + var(--tl-pad));
  height: var(--row);
  border-top: 1px solid var(--line);
  pointer-events: none;
}

.tl-hour:first-of-type { border-top-color: transparent; }

.tl-hour .hour-label {
  position: absolute;
  left: 0;
  top: -8px;
  width: 46px;
  padding-right: 8px;
  color: var(--muted-2);
  font-size: 10px;
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tl-free {
  position: absolute;
  left: var(--tl-inset-l);
  right: var(--tl-inset-r);
  top: calc(var(--top) * var(--row) + var(--tl-pad));
  z-index: 1;
  height: var(--row);
  border: 1px dashed transparent;
  border-radius: var(--r-ctl);
  background: transparent;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}

.tl-free:hover,
.tl-free:focus-visible {
  border-color: var(--future-line);
  background: color-mix(in srgb, var(--future) 9%, transparent);
}

.tl-block {
  --lane: 0;
  --lanes: 1;
  position: absolute;
  left: calc(
    var(--tl-inset-l) +
    (100% - var(--tl-inset-l) - var(--tl-inset-r)) * var(--lane) / var(--lanes) +
    var(--tl-col-gap) * 0.5
  );
  width: calc(
    (100% - var(--tl-inset-l) - var(--tl-inset-r)) / var(--lanes) - var(--tl-col-gap)
  );
  right: auto;
  top: calc(var(--top) * var(--row) + var(--tl-pad));
  z-index: calc(2 + var(--lane));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  height: calc(var(--h) * var(--row) - 5px);
  min-height: 34px;
  padding: 7px 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--future) 34%, transparent);
  border-radius: var(--r-ctl);
  background: linear-gradient(150deg, color-mix(in srgb, var(--future) 26%, transparent), color-mix(in srgb, var(--future) 13%, transparent));
  animation: tl-lane-in var(--t-slow) both var(--ease);
  transition: box-shadow var(--t-fast) ease, border-color var(--t-fast) ease, z-index 0s;
}

.tl-block[data-lanes] {
  padding-inline: 8px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--future) 12%, transparent);
}

.tl-block:hover,
.tl-block:focus-visible {
  z-index: 20;
}

@keyframes tl-lane-in {
  from {
    opacity: 0;
    transform: translateX(6px) scaleX(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.tl-block strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: var(--w-semibold);
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-block span {
  color: var(--future-2);
  font-size: 10.5px;
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

.tl-block .block-who {
  overflow: hidden;
  color: var(--muted);
  font-weight: var(--w-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-now {
  position: absolute;
  left: 20px;
  right: 0;
  top: calc(var(--top) * var(--row) + var(--tl-pad));
  z-index: 3;
  border-top: 2px solid var(--brand);
  pointer-events: none;
}

.tl-now::after {
  content: "";
  position: absolute;
  left: -4px;
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-glow);
}

.tl-now-tag {
  position: absolute;
  right: 8px;
  top: -9px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  font-size: 9px;
  font-weight: var(--w-heavy);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.tl-hint {
  margin: 0;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: var(--w-regular);
  line-height: 1.45;
}

/* ── agenda: a semana é grade, não lista ── */

.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--line);
}

.week-day {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: stretch;
  min-height: 186px;
  padding: 9px 5px 9px;
  background: var(--surface);
}

.week-day.quiet { background: var(--surface-inset); }
.week-day.today { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }

.wk-open {
  display: grid;
  gap: 1px;
  justify-items: center;
  padding: 2px 0 3px;
  border-radius: var(--r-ctl);
}

.wk-open:hover { background: var(--surface-3); }

.wk-dow {
  color: var(--muted-2);
  font-size: 8.5px;
  font-weight: var(--w-heavy);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.wk-num {
  color: var(--ink-2);
  font-size: 15px;
  font-weight: var(--w-bold);
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.week-day.today .wk-num { color: var(--brand-2); }

.wk-track {
  position: relative;
  flex: 1;
  min-height: 78px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--line) 80%, transparent) 0 1px, transparent 1px 25%),
    var(--surface-inset);
}

.week-day.today .wk-track { background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--line-2) 70%, transparent) 0 1px, transparent 1px 25%), var(--surface-inset); }

.wk-mark.event {
  position: absolute;
  left: 2px;
  right: 2px;
  top: var(--top);
  height: var(--h);
  min-height: 8px;
  border-radius: 4px;
  background: var(--future);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--future) 40%, transparent);
}

.wk-mark.event.allday {
  opacity: 0.38;
  border-radius: var(--r-sm);
}

.wk-foot { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; min-height: 14px; }

.wk-mark.cash {
  color: var(--due);
  font-size: 8.5px;
  font-weight: var(--w-heavy);
  letter-spacing: 0.02em;
}

.wk-mark.task { color: var(--muted); font-size: 13px; line-height: 0.8; }

.week-add {
  display: grid;
  width: 100%;
  min-height: 28px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface-2);
  color: var(--muted-2);
  font-size: 14px;
  font-weight: var(--w-bold);
  transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}

.week-add:hover { border-color: var(--future-line); background: var(--future-bg); color: var(--future-2); }

/* ── caixa: o mês é contexto, os quatro números moram no hero ── */

.month-plate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hero-line);
}

.month-nav { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Setas de competência: discretas no hero escuro, alvo de toque cheio. */
.month-step {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--hero-line);
  border-radius: var(--r-ctl);
  background: rgba(255, 255, 255, 0.045);
  color: var(--hero-muted);
  font-size: 14px;
  line-height: 1;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.month-step:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.09); color: var(--hero-ink); }
.month-step:active { transform: scale(0.94); }

.month-label { display: flex; align-items: baseline; gap: 9px; min-width: 0; }

.month-label strong {
  color: var(--hero-ink);
  font-size: 15.5px;
  font-weight: var(--w-bold);
  letter-spacing: -0.035em;
  text-transform: capitalize;
}

.month-label span {
  color: var(--hero-muted);
  font-size: 11px;
  font-weight: var(--w-regular);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A competência é uma linha só: setas, nome e dia; o dia cede espaço antes de quebrar. */
.month-nav { flex: 1 1 auto; justify-content: flex-start; min-width: 0; }
.month-label { flex: 1 1 auto; justify-content: space-between; gap: 8px; min-width: 0; }
.month-label strong { flex: 0 0 auto; white-space: nowrap; }
.month-label span { overflow: hidden; min-width: 0; text-overflow: ellipsis; }

.month-goal {
  flex: 0 0 auto;
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--due) 34%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--due) 13%, transparent);
  color: var(--due-2);
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.hero-kpis {
  margin-top: 20px;
  gap: 1px;
  overflow: hidden;
  border-radius: var(--r-block);
  background: var(--hero-line);
}

.hero-kpis .kpi {
  min-height: 0;
  padding: 13px 12px 28px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: none;
}

.hero-kpis .kpi { min-width: 0; }
.hero-kpis .kpi:hover { transform: none; background: rgba(255, 255, 255, 0.085); box-shadow: none; }

/* Quatro valores de caixa em uma fileira: o número cede antes de encostar na borda. */
.hero-finance .hero-kpis .k-value { font-size: clamp(15px, 1.5vw, 22px); }
.hero-finance .hero-kpis .k-hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-kpis .k-value { color: var(--hero-ink); }
.hero-kpis .k-hint { color: var(--hero-muted); }
.hero-kpis .spark { opacity: 0.85; }

/* ── amplo ── */

@media (min-width: 860px) {
  .fab, .scrim { display: none !important; }
  .timeline { --row: 54px; max-height: 64vh; }
  .week-day { min-height: 230px; padding: 12px 8px; }
  .wk-track { min-height: 118px; }
  .beat { grid-template-columns: 76px minmax(0, 1fr) auto; padding: 15px 18px; }
  .note {
    grid-template-columns: auto minmax(0, 620px) auto;
    justify-content: start;
    column-gap: 18px;
    padding: 16px 18px;
  }
  .hero-facts { margin-top: 22px; }
  .fact { padding: 14px 16px 15px; }
  .fact-v { font-size: 17px; }
  .pad-paper { min-height: 120px; }
}

/* ── compacto: a barra é 390 ── */

@media (max-width: 859px) {
  #capture {
    position: fixed;
    z-index: 200;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 10px calc(10px + env(safe-area-inset-bottom));
    transform: translateY(115%);
    transition: transform var(--t-base) var(--ease);
  }

  #capture[data-open="1"] { transform: none; visibility: visible; }
  .pad { max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; }

  /* Com o rascunho aberto o dock sai da frente: a folha usa o rodapé inteiro. */
  body.pad-open .dock { transform: translateY(150%); }

  /* Fechado, o rascunho não é só invisível: ele sai do caminho do Tab. */
  #capture:not([data-open="1"]) { visibility: hidden; }
  .pad { border-radius: var(--r-block) var(--r-block) var(--r-block) var(--r-block); box-shadow: 0 -22px 60px rgba(0, 0, 0, 0.6); }
  .pad-paper { min-height: 88px; }

  .dash-hdr { padding: 15px 17px 17px; }
  .back { padding-bottom: 12px; }
  #dash-title { font-size: clamp(28px, 8.6vw, 36px); }
  .dash-sub { margin-top: 7px; font-size: 12px; }
  .lenses { gap: 6px; margin-top: 14px; }
  .lens { min-height: 32px; padding: 0 13px; }

  .summary-signals { margin-top: 16px; }
  .summary-actions { margin-top: 14px; }
  .summary-actions .hero-btn { min-height: 36px; font-size: 12px; }

  .section-head { margin-bottom: 11px; padding-bottom: 8px; }
  .section-head h2 { font-size: 15.5px; }

  .beat { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; padding: 12px 13px; }
  .beat-when { font-size: 9px; letter-spacing: 0.05em; }

  /* No estreito o título respira em duas linhas em vez de cortar no meio da frase. */
  .beat-title {
    display: -webkit-box;
    font-size: 13.5px;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .beat-note { font-size: 11px; }

  .note { gap: 11px; padding: 13px; }
  .note-title { font-size: 14px; }
  .note-margin { font-size: 11px; }

  .timeline { --row: 44px; max-height: 52vh; }
  .tl-hour .hour-label { width: 40px; padding-right: 7px; font-size: 9.5px; }
  .tl-track { --tl-inset-l: 46px; --tl-inset-r: 6px; }
  .tl-now { left: 16px; }

  .week-day { min-height: 168px; padding: 8px 3px; gap: 6px; }
  .wk-num { font-size: 13.5px; }
  .wk-track { min-height: 70px; }
  .week-add { min-height: 26px; font-size: 13px; }

  .month-plate { margin-bottom: 14px; padding-bottom: 11px; }
  /* No estreito o dia desce uma linha em vez de virar reticências. */
  .month-label { display: grid; justify-items: start; gap: 1px; }
  .month-label strong { font-size: 14px; }
  .month-label span { font-size: 10px; }
  .month-step { width: 32px; height: 32px; }
  .month-nav { gap: 8px; }
  .month-goal { padding: 4px 9px; font-size: 9px; }

  .hero-kpis { margin-top: 15px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-kpis .kpi { min-height: 0; padding: 11px 12px 26px; }

  .hero-facts { margin-top: 13px; border-radius: var(--r-ctl); }
  .fact { padding: 9px 9px 10px; gap: 2px; }
  .fact-k { font-size: 8px; letter-spacing: 0.09em; }
  .fact-v { font-size: clamp(10.5px, 3.3vw, 12.5px); }
  .fact-n { font-size: 9px; }
}

@media (max-width: 430px) {
  .beat { padding: 11px 12px; }
  .note { padding: 12px 13px; }
  .fab { right: 12px; min-height: 46px; padding: 0 16px 0 13px; font-size: 12.5px; }
  .portal .badge { padding: 0 4px; font-size: 7.5px; }

  /* ── o fold de 390x844: a fileira dos setores termina acima do dock ── */

  #view-home { gap: 11px; }
  .greeting { padding: 0 2px; }
  .greet-sub { margin-top: 5px; font-size: 11.5px; line-height: 1.4; }

  .hero-home { padding: 15px 16px 16px; }
  .hero-home .hero-top { margin-bottom: 8px; }
  .hero-home .compose { margin-top: 11px; }
  .hero-home .hero-facts { margin-top: 11px; }
  .hero-home .fact { padding: 7px 8px 8px; }
  .hero-home .fact-v { font-size: clamp(10.5px, 3.3vw, 12.5px); }
  .hero-home .fact-n { font-size: 8.5px; }

  #home-action .section-head { margin-bottom: 9px; padding-bottom: 7px; }
  #home-action .insight { gap: 11px; padding: 12px 13px; }
  #home-action .insight-ico { width: 30px; height: 30px; }
  #home-action .insight-copy { -webkit-line-clamp: 2; margin-top: 4px; font-size: 12px; }
  #home-action .insight-who { margin-top: 7px; }
  #home-action .insight-actions { margin-top: 9px; }
  #home-action .insight-btn { min-height: 34px; }

  #home-portals .portals { gap: 8px; }
  .portal { min-height: 0; padding: 10px 10px 11px; }
  .portal-top { margin-bottom: 5px; }
  .portal-name { margin-top: 4px; }
  .portal-preview { margin-top: 5px; -webkit-line-clamp: 3; }
  .portal[data-sector="principal"] { padding: 10px 12px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .beat, .note, .scrim { animation: none !important; }
  #capture { transition: none !important; }
  .fab:hover, .boost:active, .fab:active { transform: none !important; }
}

/* ==========================================================================
   Daybook: a home é o começo do dia. Principal deixa de ser uma área separada.
   ========================================================================== */

body[data-view="home"] { --dash: var(--brand); --dash-glow: var(--brand-glow); }

#view-home { gap: 22px; }
#view-home .greeting { margin-bottom: -3px; }
#view-home .summary-hero {
  background:
    radial-gradient(70% 105% at 100% 0%, rgba(255, 84, 38, 0.085), transparent 72%),
    radial-gradient(60% 100% at 0% 100%, rgba(139, 147, 245, 0.075), transparent 76%),
    #12151b;
}

#view-home .summary-title { max-width: 720px; }
.home-stream { min-width: 0; }
.home-stream .section { animation: daybook-in var(--t-slow) both var(--ease); }
#home-agenda .section { animation-delay: var(--t-fast); }
#home-tasks .section { animation-delay: var(--t-fast); }
#home-finance .section { animation-delay: var(--t-base); }

.home-agenda-list .beat { min-height: 64px; }

.home-cash-snapshot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--line);
  transition: transform var(--t-base) var(--spring), border-color var(--t-base) ease;
}

.home-cash-fact {
  --fact-tone: var(--muted-2);
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 18px;
  background:
    radial-gradient(120% 180% at 100% 0%, color-mix(in srgb, var(--fact-tone) 9%, transparent), transparent 62%),
    var(--surface);
}

.home-cash-fact.cash { --fact-tone: var(--cash); }
.home-cash-fact.due { --fact-tone: var(--due); }
.home-cash-fact.late { --fact-tone: var(--late); }
.home-cash-fact small {
  color: var(--muted);
  font-size: 9px;
  font-weight: var(--w-heavy);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.home-cash-fact strong {
  overflow: hidden;
  color: var(--fact-tone);
  font-size: clamp(16px, 4vw, 25px);
  font-weight: var(--w-bold);
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.block-resize {
  position: absolute;
  z-index: 4;
  left: 9px;
  right: 9px;
  bottom: 0;
  height: 12px;
  border: 0;
  background: transparent;
  cursor: ns-resize;
  touch-action: none;
}

.block-resize::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 28px;
  height: 3px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--future-2) 62%, transparent);
  opacity: 0;
  transform: translateX(-50%) scaleX(0.65);
  transition: opacity var(--t-fast) ease, transform var(--t-base) var(--spring);
}

.tl-block:hover .block-resize::after,
.block-resize:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

@keyframes daybook-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 860px) {
  #view-home {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
  }
  #view-home .summary-hero { padding: 34px; }
}

@media (max-width: 859px) {
  #view-home { gap: 18px; }
  #view-home .summary-hero { padding: 19px; border-radius: var(--r-block); }
  #view-home .summary-title { font-size: clamp(1.8rem, 8.5vw, 2.25rem); }
  #view-home .summary-copy { max-width: 31ch; line-height: 1.4; }
  #view-home .summary-signals { margin-top: 17px; }
  .home-cash-fact { padding: 14px 11px; }
  .home-cash-fact strong { font-size: clamp(12px, 4vw, 17px); }
}

@media (max-width: 430px) {
  #view-home { gap: 17px; }
  #view-home .greeting { margin-bottom: 0; }
  #view-home .summary-signal { min-height: 112px; }
  #view-home .summary-signal:nth-child(3) .summary-signal-value { font-size: clamp(0.82rem, 3.7vw, 0.98rem); }
  .home-cash-fact { padding: 13px 9px; gap: 6px; }
  .home-cash-fact small { font-size: 7.5px; letter-spacing: 0.07em; }
}

@media (hover: hover) {
  .home-cash-snapshot:hover { transform: translateY(-3px); border-color: var(--line-2); }
}

@media (prefers-reduced-motion: reduce) {
  .home-stream .section { animation: none !important; }
  .block-resize::after { transition: none !important; }
  .tl-block { animation: none !important; }
}

/* Final integration overrides */
.phone { z-index: auto; }
html[data-scroll="on"] .topbar { background: color-mix(in srgb, var(--bg) 84%, transparent); }
#view-home .summary-hero,
.summary-hero {
  background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 42%), var(--hero-bg);
  border-radius: var(--r-xl);
}
.summary-signals { gap: 7px; overflow: visible; border-radius: 0; background: transparent; }
.summary-signal { border: 1px solid var(--hero-line); border-radius: var(--r-md); background: rgba(255,255,255,.035); }
.summary-signal.sector-tasks { border-color: color-mix(in srgb, var(--brand) 22%, var(--hero-line)); background: radial-gradient(circle at 12% 0%, var(--brand-glow), transparent 62%), rgba(255,255,255,.03); }
.summary-signal.sector-agenda { border-color: color-mix(in srgb, var(--future) 24%, var(--hero-line)); background: radial-gradient(circle at 14% 0%, var(--future-glow), transparent 64%), rgba(255,255,255,.03); }
.summary-signal.sector-cash { border-color: color-mix(in srgb, var(--cash) 22%, var(--hero-line)); background: radial-gradient(circle at 15% 0%, var(--cash-glow), transparent 64%), rgba(255,255,255,.03); }
.hero { border-radius: var(--r-xl); }
.lenses, .pauta, .home-cash-snapshot { border-radius: var(--r-lg); }
.tl-block, .tl-free { border-radius: var(--r-sm); }

@media (max-width: 859px) {
  .scrim { z-index: 190; background: rgba(0,0,0,.22); backdrop-filter: blur(var(--blur-scrim)); -webkit-backdrop-filter: blur(var(--blur-scrim)); }
  #capture { z-index: 220; pointer-events: none; opacity: 0; transform: translateY(24px); transition: opacity var(--t-base) ease, transform var(--t-base) var(--ease); }
  #capture[data-open="1"] { visibility: visible; pointer-events: auto; opacity: 1; transform: none; }
  .pad { position: relative; z-index: 2; border-radius: var(--r-block) var(--r-block) var(--r-block) var(--r-block); background: var(--surface-inset); box-shadow: 0 -16px 48px rgba(0,0,0,.44); }
  body.pad-open { overflow: hidden; }
  #view-home .summary-hero { border-radius: var(--r-xl); }
}

/* Caixa completo: estrutura e acabamento herdados do financeiro original */

body[data-view="financeiro"] #dash-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

/* Cabeçalho das abas secundárias: mesma placa do Mês, sem herói. */
.finance-month-row,
.finance-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.finance-title-row > div { display: grid; min-width: 0; gap: 2px; }
.finance-month-row > .badge,
.finance-title-row > .badge { flex: 0 0 auto; }
/* Selo e "+ Novo" viajam juntos na direita: soltos, o selo caía no meio da linha. */
.finance-month-row > .badge { margin-left: auto; }
.finance-month-row > .chip-btn { flex: 0 0 auto; }

.finance-month-switch { display: flex; align-items: center; gap: 10px; min-width: 0; }
.finance-month-nav {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface);
  color: var(--muted);
  font-size: 15px;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease, background var(--t-fast) ease;
}
.finance-month-nav:hover { border-color: var(--line-2); background: var(--surface-2); color: var(--ink); }
.finance-month-label { display: grid; min-width: 0; gap: 2px; text-align: center; }
.finance-month-label strong { text-transform: capitalize; }
.finance-month-label strong,
.finance-title-row > div > strong { color: var(--ink); font-size: 17px; font-weight: var(--w-semibold); letter-spacing: -.03em; }
.finance-month-label span,
.finance-title-row > div > span { color: var(--muted); font-size: 10.5px; font-weight: var(--w-medium); }

/* Cadeia do mês: os estados por onde o dinheiro passa, na ordem em que ele passa. */
.finance-stage-wrap { display: grid; gap: 14px; }

.finance-stepper {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 0 -2px;
  padding: 2px;
  scrollbar-width: none;
}

.finance-stepper::-webkit-scrollbar { display: none; }

.finance-stepper button,
.finance-filters button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: var(--w-medium);
  white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.finance-filters button > span {
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--muted-2);
  font-size: 9.5px;
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

.finance-stepper button:hover,
.finance-filters button:hover { border-color: var(--line-2); color: var(--ink-2); }

.finance-stepper button.active,
.finance-filters button.active {
  border-color: color-mix(in srgb, var(--brand) 46%, transparent);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  color: var(--ink);
}

.finance-filters button.active > span {
  background: color-mix(in srgb, var(--brand) 26%, transparent);
  color: var(--ink);
}

.finance-stage { display: grid; gap: 12px; }
.finance-stage > .section { margin: 0; }

/* ── portais do caixa ───────────────────────────────────────────────────
   Régua fixa, carrossel e cartões de estado. O portal em foco manda; os
   vizinhos ficam encostados na borda só para dizer o que vem depois. */

.finance-rail {
  position: sticky;
  z-index: 24;
  top: calc(var(--rail-top, 56px) + 6px);
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background-color: color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter: saturate(180%) blur(var(--blur-veil));
  -webkit-backdrop-filter: saturate(170%) blur(var(--blur-veil));
  /* Enquanto o herói está à vista a régua é rodapé do número grande, não manchete. */
  opacity: 0.5;
  transition: opacity var(--t-slow) var(--ease), border-color var(--t-base) ease, box-shadow var(--t-base) var(--ease);
}

body[data-rail="on"] .finance-rail {
  opacity: 1;
  border-color: var(--line);
  box-shadow: 0 18px 34px -26px rgba(0, 0, 0, 0.92);
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .finance-rail { background: var(--bg); }
}

.finance-rail-track { display: flex; height: 3px; overflow: hidden; border-radius: var(--r-pill); background: var(--surface-3); }
.rail-seg { display: block; height: 100%; min-width: 0; transition: width var(--t-enter) var(--ease); }
.rail-seg.cash { background: var(--cash); }
.rail-seg.due { background: var(--due); }
.rail-seg.future { background: var(--future); }

.finance-rail-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.rail-cell {
  --tone: var(--muted);
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border-left: 2px solid color-mix(in srgb, var(--tone) 62%, transparent);
  background: transparent;
  text-align: left;
  transition: background var(--t-fast) var(--ease);
}
.rail-cell:first-child { border-left-color: color-mix(in srgb, var(--tone) 62%, transparent); }
.rail-cell.cash { --tone: var(--cash); }
.rail-cell.due { --tone: var(--due); }
.rail-cell.late { --tone: var(--late); }
.rail-cell.future { --tone: var(--future); }
.rail-cell:hover { background: color-mix(in srgb, var(--tone) 7%, transparent); }
.rail-cell.on { background: color-mix(in srgb, var(--tone) 11%, transparent); }
.rail-label { color: var(--tone); font-size: 8.5px; font-weight: var(--w-heavy); letter-spacing: .12em; text-transform: uppercase; }
.rail-value {
  overflow: hidden;
  color: var(--tone);
  font: var(--w-bold) clamp(15px, 2.1vw, 20px) var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-hint { overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }

.finance-stepper button > i.step-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--step, var(--muted)) 78%, transparent);
}
.finance-stepper button[data-tone="brand"] { --step: var(--brand); }
.finance-stepper button[data-tone="due"] { --step: var(--due); }
.finance-stepper button[data-tone="future"] { --step: var(--future); }
.finance-stepper button[data-tone="cash"] { --step: var(--cash); }
.finance-stepper button[data-tone="cost"] { --step: var(--cost); }
.finance-stepper button.active {
  border-color: color-mix(in srgb, var(--step, var(--brand)) 52%, transparent);
  background: color-mix(in srgb, var(--step, var(--brand)) 13%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--step, var(--brand)) 9%, transparent);
}

.deck-nav { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 10px; }
.deck-step {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1;
  transition: transform var(--t-fast) var(--spring), border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.deck-step:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--line-2); color: var(--ink); }
.deck-step:disabled { opacity: 0.28; }
.deck-now { display: grid; gap: 2px; justify-items: center; text-align: center; }
.deck-now > span { color: var(--muted-2); font-size: 8.5px; font-weight: var(--w-heavy); letter-spacing: .16em; text-transform: uppercase; }
.deck-now > small { color: var(--muted); font-size: 10.5px; }
.deck-dots { display: flex; grid-column: 1 / -1; justify-content: center; gap: 7px; }
.deck-dot {
  --tone: var(--muted-2);
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  transition: width var(--t-slow) var(--spring), background var(--t-base) var(--ease);
}
.deck-dot.brand { --tone: var(--brand); }
.deck-dot.due { --tone: var(--due); }
.deck-dot.future { --tone: var(--future); }
.deck-dot.cash { --tone: var(--cash); }
.deck-dot.cost { --tone: var(--cost); }
.deck-dot.on { width: 22px; background: var(--tone); }

.finance-deck { display: grid; gap: 12px; outline: none; }
.finance-deck:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; border-radius: var(--r-lg); }

.stage-card {
  --tone: var(--brand);
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--tone) 24%, var(--line));
  border-radius: var(--r-lg);
  background: radial-gradient(90% 130% at 0% 0%, color-mix(in srgb, var(--tone) 9%, transparent), transparent 58%), var(--surface);
}
.stage-card.tone-brand { --tone: var(--brand); }
.stage-card.tone-due { --tone: var(--due); }
.stage-card.tone-future { --tone: var(--future); }
.stage-card.tone-cash { --tone: var(--cash); }
.stage-card.tone-cost { --tone: var(--cost); }

.stage-card.focus {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone) 22%, transparent),
    0 0 44px -18px color-mix(in srgb, var(--tone) 62%, transparent), var(--shadow-sm);
  backdrop-filter: saturate(150%) blur(var(--blur-veil));
  -webkit-backdrop-filter: saturate(150%) blur(var(--blur-veil));
}

.stage-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.stage-card-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.stage-card-title > i { width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--tone); box-shadow: 0 0 12px -1px color-mix(in srgb, var(--tone) 72%, transparent); }
.stage-card-title > strong { color: var(--ink); font-size: clamp(16px, 2.2vw, 20px); font-weight: var(--w-semibold); letter-spacing: -.03em; }
.stage-card-meta { color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stage-card-body { display: grid; gap: 10px; min-width: 0; }

.stage-ledger { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.stage-ledger > strong { color: var(--tone); font: var(--w-bold) clamp(21px, 3.4vw, 30px) var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.stage-ledger > span { color: var(--muted); font-size: 10.5px; text-align: right; }
.stage-rest { margin: 0; color: var(--muted-2); font-size: 10px; text-align: center; }

.stage-peek-hit { position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: transparent; }

/* Custos: o gasto é do cliente, não do lançamento. Abre e mostra a sobra. */
.cost-group { display: grid; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); overflow: hidden; }
.cost-group.open { border-color: color-mix(in srgb, var(--cost) 34%, var(--line)); }
.cost-group-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 14px; background: transparent; text-align: left; }
.cost-group-head:hover { background: color-mix(in srgb, var(--cost) 6%, transparent); }
.cost-group-copy { display: grid; min-width: 0; gap: 5px; }
.cost-group-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cost-group-title strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.cost-group-copy small { overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.cost-group-side { display: grid; justify-items: end; gap: 3px; }
.cost-group-side strong { color: var(--cost-2); font: var(--w-semibold) 14.5px var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.cost-group-side small { color: var(--muted-2); font-size: 9px; }
.cost-group-dash { display: grid; gap: 8px; padding: 0 14px 14px; animation: caixa-folha var(--t-slow) both var(--ease); }
.cost-group-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.cost-group-facts .finance-detail-fact { min-height: 62px; padding: 10px; }
.cost-group-facts .finance-detail-fact > span { font-size: 8px; letter-spacing: .06em; }
/* Três colunas em 390: o valor encolhe, mas nunca quebra o sinal do menos na linha de baixo. */
.cost-group-facts .finance-detail-fact > strong { font-size: clamp(11px, 3.1vw, 14px); white-space: nowrap; }
.cost-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.cost-line-copy { display: grid; min-width: 0; gap: 2px; }
.cost-line-copy b { color: var(--ink-2); font-size: 11.5px; font-weight: var(--w-medium); }
.cost-line-copy small { overflow: hidden; color: var(--muted-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.cost-line-side { display: grid; justify-items: end; gap: 2px; }
.cost-line-side b { color: var(--cost); font-size: 12px; font-variant-numeric: tabular-nums; }
.cost-line-side small { color: var(--muted-2); font-size: 8.5px; }

@media (min-width: 900px) {
  /* No amplo o carrossel mostra os vizinhos: dá para ver o que vem sem sair do foco. */
  .finance-deck { grid-auto-flow: column; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr) minmax(0, 0.42fr); align-items: start; gap: 14px; }
  .finance-deck.edge-left { grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr); }
  .finance-deck.edge-right { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); }
  .finance-deck.edge-left.edge-right { grid-template-columns: minmax(0, 1fr); }
  .stage-card.peek { cursor: pointer; opacity: 0.52; transform: scale(0.965); transform-origin: center; transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
  .stage-card.peek:hover { opacity: 0.82; transform: scale(0.985); }
  .stage-card.peek .stage-card-body { max-height: 260px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); }
  .stage-card.peek .section-head { display: grid; gap: 3px; }
  .stage-card.peek .section-head h2 { font-size: 11px; }
  .stage-card.peek .stage-ledger { display: grid; gap: 2px; }
  .stage-card.peek .stage-ledger > span { text-align: left; }
  .deck-dots { display: none; }
  .deck-nav { grid-template-columns: 40px minmax(0, 1fr) 40px; }
}

@media (max-width: 899px) {
  /* No estreito o carrossel manda: as setas e os pontos substituem a fileira de chips. */
  .finance-stepper { display: none; }
  .rail-cell { padding: 9px 10px; }
  .rail-hint { font-size: 9px; }
}

.finance-readings { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
.finance-reading { --reading: var(--muted); display: grid; gap: 5px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: radial-gradient(100% 150% at 100% 0%, color-mix(in srgb,var(--reading) 9%,transparent),transparent 65%),var(--surface); }
.finance-reading.cash { --reading: var(--cash); }
.finance-reading.due { --reading: var(--due); }
.finance-reading.late { --reading: var(--late); }
.finance-reading.future { --reading: var(--future); }
.finance-reading strong { color: var(--reading); font-size: 13px; }
.finance-reading p { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }

.finance-toolbar { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,auto); gap: 8px; }
.finance-search,
.finance-select { min-width: 0; min-height: 40px; border: 1px solid var(--line); border-radius: var(--r-sm); outline: none; background: var(--surface); color: var(--ink-2); font-size: 11.5px; }
.finance-search { padding: 0 13px; }
.finance-select { padding: 0 34px 0 11px; }
.finance-search:focus,
.finance-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.finance-search::placeholder { color: var(--muted-2); }
.finance-filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.finance-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 2px 2px 9px; border-bottom: 1px solid var(--line); }
.finance-total-row strong { color: var(--ink); font: var(--w-bold) 21px var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.finance-total-row span { color: var(--muted); font-size: 10.5px; }
.finance-two-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.finance-two-list .item { min-width: 0; }
.item.is-openable { cursor: pointer; }
.item.is-openable:hover { border-color: var(--line-2); background-color: var(--surface-2); }

/* Carteira: o peso na tela segue o peso no faturamento. Lista plana virava relatório. */
.finance-client-grid { display: grid; gap: 8px; }
.finance-client-card {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: left;
  transition: transform var(--t-base) var(--ease), border-color var(--t-fast) ease, box-shadow var(--t-base) var(--ease);
}
.finance-client-card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.finance-client-line { display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; align-items: center; gap: 12px; }
.finance-client-rank {
  width: 18px;
  color: var(--muted-2);
  font: var(--w-bold) 10px var(--sans);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.finance-client-kicker {
  color: var(--cash-2);
  font-size: 8.5px;
  font-weight: var(--w-heavy);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.finance-client-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--ink);
  font-size: 11px;
  font-weight: var(--w-bold);
}
.finance-client-copy { display: grid; min-width: 0; gap: 4px; }
.finance-client-copy strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.finance-client-copy small { overflow: hidden; color: var(--muted); font-size: 9.5px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.finance-client-card.faixa-lead .finance-client-copy small { font-size: 10.5px; white-space: normal; }
.finance-client-side { display: grid; justify-items: end; gap: 4px; }
.finance-client-side > strong { color: var(--ink); font: var(--w-semibold) 14px var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.finance-client-side > small { color: var(--muted-2); font: var(--w-medium) 9.5px var(--sans); font-variant-numeric: tabular-nums; }
/* No cartão de cliente a curva é inline: a regra global do KPI a joga fora do card. */
.finance-client-side .spark { position: static; width: 64px; height: 18px; color: var(--future); }

.finance-client-share { display: block; height: 3px; border-radius: var(--r-pill); background: var(--surface-3); }
.finance-client-share i {
  display: block;
  width: var(--share, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--future);
  transition: width var(--t-enter) var(--ease);
}

/* O primeiro nome da carteira ganha manchete, halo e a curva grande. */
.finance-client-card.faixa-lead {
  padding: 18px;
  border-color: var(--cash-line);
  background: radial-gradient(80% 160% at 100% 0%, var(--cash-glow), transparent 62%), var(--surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cash) 12%, transparent), var(--shadow-sm);
}
.finance-client-card.faixa-lead .finance-client-avatar { width: 46px; height: 46px; border-color: var(--cash-line); background: var(--cash-bg); color: var(--cash-2); font-size: 13px; }
.finance-client-card.faixa-lead .finance-client-copy strong { font-size: 16px; letter-spacing: -.02em; }
.finance-client-card.faixa-lead .finance-client-side > strong { color: var(--cash-2); font-size: clamp(19px, 2.6vw, 26px); letter-spacing: -.04em; }
.finance-client-card.faixa-lead .finance-client-side .spark { width: 96px; height: 26px; color: var(--cash); }
.finance-client-card.faixa-lead .finance-client-share i { background: var(--cash); }
.finance-client-card.faixa-lead .finance-client-rank { color: var(--cash-2); }

.finance-client-card.faixa-mid .finance-client-side > strong { font-size: 15.5px; }

/* A cauda é extrato: uma linha, sem curva, sem respiro extra. */
.finance-client-card.faixa-rest { padding: 10px 14px; gap: 7px; background: var(--bg-2); }
.finance-client-card.faixa-rest .finance-client-avatar { width: 28px; height: 28px; border-radius: var(--r-xs); font-size: 9px; }
.finance-client-card.faixa-rest .finance-client-copy strong { font-size: 12px; }
.finance-client-card.faixa-rest .finance-client-side > strong { color: var(--ink-2); font-size: 12.5px; }
.finance-client-card.faixa-rest .finance-client-share { height: 2px; }

@media (min-width: 900px) {
  .finance-client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-client-card.faixa-lead { grid-column: 1 / -1; }
  .finance-client-card.faixa-rest { grid-column: 1 / -1; }
}

/* Ficha do cliente: um número manda, o resto é extrato por competência. */
.client-sheet-hero {
  --sheet: var(--cash);
  position: relative;
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--sheet) 26%, var(--line));
  border-radius: var(--r-md);
  background: radial-gradient(90% 170% at 8% 0%, color-mix(in srgb, var(--sheet) 15%, transparent), transparent 64%), var(--surface);
}
.client-sheet-hero[data-tone="due"] { --sheet: var(--due); }
.client-sheet-kicker { color: color-mix(in srgb, var(--sheet) 82%, var(--ink)); font-size: 8.5px; font-weight: var(--w-heavy); letter-spacing: .13em; text-transform: uppercase; }
.client-sheet-amount { color: var(--ink); font: 750 clamp(26px, 5vw, 38px) var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.045em; }
.client-sheet-sub { color: var(--muted); font-size: 11px; }
.client-sheet-month { margin: 12px 0 4px; color: var(--muted-2); font-size: 9px; font-weight: var(--w-heavy); letter-spacing: .12em; text-transform: uppercase; }
.finance-detail-list .item.is-lean { min-height: 0; padding: 10px 12px; }
.finance-detail-list .item.is-lean .item-title strong { font-size: 12.5px; font-weight: var(--w-medium); }
.finance-detail-list .item.is-lean .item-sub { font-size: 9.5px; }
.finance-detail-list .item.is-top .item-amount { color: var(--cash-2); font-size: 15px; }

.finance-year-summary { display: grid; grid-template-columns: minmax(0,1.7fr) repeat(2,minmax(0,1fr)); gap: 8px; }
.finance-year-hero { display: grid; gap: 7px; min-height: 132px; padding: 18px; border: 1px solid var(--cash-line); border-radius: var(--r-md); background: radial-gradient(100% 180% at 100% 0%,var(--cash-glow),transparent 64%),var(--surface); }
.finance-year-hero > span { color: var(--cash-2); font-size: 9px; font-weight: var(--w-heavy); letter-spacing: .1em; text-transform: uppercase; }
.finance-year-hero > strong { align-self: end; color: var(--cash-2); font: 750 clamp(26px,4vw,42px) var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.045em; }
.finance-year-hero > small { color: var(--muted); font-size: 10px; }
.finance-year-summary > .finance-detail-fact { min-height: 132px; }
.finance-year-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(280px,.8fr); gap: 10px; }
.finance-chart-card,
.finance-forecast-card { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.finance-chart-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.finance-chart-card > header strong { font-size: 13px; }
.finance-chart-card > header span { color: var(--muted); font-size: 9px; }
.finance-year-chart { display: grid; gap: 2px; padding-top: 10px; }
.finance-year-chart > button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 96px;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 5px 8px;
  border-radius: var(--r-xs);
  text-align: left;
  transition: background var(--t-base) var(--ease);
}
.finance-year-chart > button:hover { background: var(--surface-2); }
.finance-year-chart > button.selected { background: var(--brand-bg); }
.finance-year-chart > button.selected .month { color: var(--brand); }
.finance-year-chart > button.vazio .month,
.finance-year-chart > button.vazio .amount { opacity: 0.42; }

/* Legenda do mês a mês, do original: a cor só se explica uma vez. */
.finance-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.finance-chart-legend span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; font-weight: var(--w-medium); }
.finance-chart-legend i { width: 7px; height: 7px; border-radius: var(--r-pill); }
.finance-chart-legend i.cash { background: var(--cash); }
.finance-chart-legend i.due { background: var(--due); }
.finance-chart-legend i.future { background: var(--future); }
.finance-year-chart .month { color: var(--muted); font: var(--w-bold) 10px var(--sans); letter-spacing: .07em; }
.finance-year-chart .track { position: relative; display: flex; height: 11px; overflow: hidden; border-radius: var(--r-pill); background: var(--surface-3); box-shadow: inset 0 1px 2px rgba(0,0,0,.28); }
.finance-year-chart .track i { transition: width var(--t-slow) var(--ease); }
.finance-year-chart .track i.cash { background: var(--cash); }
.finance-year-chart .track i.due { background: var(--due); }
.finance-year-chart .track i.future { background: var(--future); }
.finance-year-chart .track i.goal { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: var(--r-pill); background: var(--ink); opacity: .55; }
.finance-year-chart .amount { display: grid; justify-items: end; gap: 1px; color: var(--ink); font: var(--w-semibold) 12.5px var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.finance-year-chart .amount small { color: var(--muted-2); font: var(--w-medium) 9px var(--sans); white-space: nowrap; }
.finance-forecast-card { display: grid; align-content: start; gap: 8px; }
.finance-forecast-card > span { color: var(--muted); font-size: 9px; font-weight: var(--w-heavy); letter-spacing: .1em; text-transform: uppercase; }
.finance-forecast-card > strong { color: var(--ink); font: 750 29px var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.finance-forecast-card > p { margin: -3px 0 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }

/* Bruto e líquido: o número grande é o que entra, o bruto explica a diferença. */
.item-gross {
  display: block;
  margin-top: 2px;
  color: var(--muted-2);
  font-size: 9.5px;
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.finance-costs { display: grid; gap: 2px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-inset); }
.finance-costs > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.finance-costs > header span { color: var(--muted); font-size: 8.5px; font-weight: var(--w-bold); letter-spacing: .08em; text-transform: uppercase; }
.finance-costs > header strong { color: var(--ink-2); font-size: 14px; font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.finance-cost-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0; }
.finance-cost-line span { color: var(--muted); font-size: 11px; }
.finance-cost-line b { color: var(--late); font-size: 11.5px; font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; }
.finance-cost-line.total { margin-top: 5px; padding-top: 9px; border-top: 1px solid var(--line); }
.finance-cost-line.total span { color: var(--ink-2); font-weight: var(--w-semibold); }
.finance-cost-line.total b { color: var(--cash); font-size: 14.5px; font-weight: 750; letter-spacing: -.02em; }

.finance-detail-fact { display: grid; align-content: center; gap: 5px; min-height: 72px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.finance-detail-fact > span { color: var(--muted); font-size: 8.5px; font-weight: var(--w-bold); letter-spacing: .08em; text-transform: uppercase; }
.finance-detail-fact > strong { color: var(--ink); font: var(--w-semibold) 13.5px var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.finance-detail-fact.cash > strong { color: var(--cash); }
.finance-detail-fact.due > strong { color: var(--due); }
.finance-detail-fact.future > strong { color: var(--future); }
.finance-pipeline-section .finance-toolbar { margin-bottom: 10px; }

.finance-detail-layer { position: fixed; z-index: 610; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.55); backdrop-filter: blur(var(--blur-scrim)); -webkit-backdrop-filter: blur(var(--blur-scrim)); }
.finance-detail-layer[hidden] { display: none; }
.finance-detail-card { width: min(620px,100%); max-height: min(780px,88vh); overflow-y: auto; padding: 16px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lg); }
.finance-detail-card > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.finance-detail-card > header div { display: grid; gap: 3px; }
.finance-detail-card > header span { color: var(--brand-ink); font-size: 8.5px; font-weight: var(--w-heavy); letter-spacing: .11em; text-transform: uppercase; }
.finance-detail-card > header strong { font-size: 16px; }
.finance-detail-card > header button { display: grid; width: 34px; height: 34px; place-items: center; border-radius: var(--r-xs); color: var(--muted); }
.finance-detail-card > header svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
#finance-detail-body { display: grid; gap: 12px; padding-top: 14px; }
.finance-detail-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-inset); }
.finance-detail-hero > span { color: var(--muted); font-size: 11px; }
.finance-detail-hero > strong { color: var(--ink); font: 750 26px var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.finance-detail-hero .badge { grid-column: 1/-1; justify-self: start; }
.finance-detail-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.finance-detail-facts.trio { grid-template-columns: repeat(3,minmax(0,1fr)); }
.finance-detail-facts.trio .finance-detail-fact { align-content: start; min-height: 66px; padding: 11px; }
.finance-detail-facts.trio .finance-detail-fact > small { color: var(--muted-2); font-size: 9px; }
.finance-detail-facts.trio .finance-detail-fact > strong { font-size: clamp(11px, 3.2vw, 14px); white-space: nowrap; }
.finance-detail-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.finance-detail-list { display: grid; gap: 7px; }

@media (max-width: 859px) {
  body[data-view="financeiro"] #dash-body { gap: 14px; }
  .finance-readings,
  .finance-two-list,
  .finance-client-grid,
  .finance-year-grid { grid-template-columns: 1fr; }
  /* Busca e recorte cabem lado a lado: empilhar comia meia tela de altura. */
  .finance-toolbar { grid-template-columns: minmax(0,1fr) 118px; }
  .finance-select { width: 100%; padding-right: 24px; font-size: 10.5px; }
  .finance-total-row { align-items: flex-end; }
  .finance-total-row span { max-width: 48%; text-align: right; }
  .finance-client-card { grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; padding: 12px; }
  .finance-client-side { justify-items: end; }
  .finance-client-side .spark { position: static; width: 46px; height: 15px; }
  .finance-client-copy small { font-size: 9px; }
  .finance-year-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .finance-year-hero { grid-column: 1/-1; min-height: 120px; }
  .finance-year-summary > .finance-detail-fact { min-height: 84px; }
  .finance-year-chart > button { grid-template-columns: 32px minmax(0,1fr) 82px; gap: 8px; min-height: 40px; }
  .finance-year-chart .track { height: 9px; }
  .finance-year-chart .amount { font-size: 11.5px; }
  .finance-year-chart .amount small { font-size: 8px; }
  .finance-detail-layer { place-items: end center; padding: 10px; }
  .finance-detail-card { max-height: 82vh; border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-sm); }
}

/* ═══ Caixa: vidro, brilho e movimento ═══
   O caixa original respira: as superfícies têm vidro, o estado emite luz e os
   números chegam encadeados em vez de aparecerem prontos. Tudo abaixo é escopo
   da dash financeira e não vaza para as outras rotas. */

body[data-view="financeiro"] .finance-month-row,
body[data-view="financeiro"] .finance-title-row,
body[data-view="financeiro"] .finance-chart-card,
body[data-view="financeiro"] .finance-forecast-card,
body[data-view="financeiro"] .finance-year-hero,
body[data-view="financeiro"] .finance-client-card,
body[data-view="financeiro"] .finance-reading,
body[data-view="financeiro"] .finance-costs {
  backdrop-filter: saturate(150%) blur(var(--blur-veil));
  -webkit-backdrop-filter: saturate(150%) blur(var(--blur-veil));
  background-color: color-mix(in srgb, var(--surface) 78%, transparent);
}

/* O herói ganha o halo do estado do mês: verde quando entrou, âmbar quando falta. */
.hero-finance { position: relative; isolation: isolate; }

.hero-finance::after {
  position: absolute;
  z-index: -1;
  top: -35%;
  right: -12%;
  width: 62%;
  height: 150%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--halo, var(--cash)) 26%, transparent), transparent 68%);
  content: "";
  filter: blur(var(--blur-veil));
  opacity: 0;
  pointer-events: none;
  animation: caixa-halo var(--t-slow) var(--ease) var(--t-base) forwards;
}

.hero-finance[data-tone="due"] { --halo: var(--due); }
.hero-finance[data-tone="late"] { --halo: var(--late); }
.hero-finance[data-tone="quiet"] { --halo: var(--muted); }

@keyframes caixa-halo {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: scale(1); }
}

/* Chegada encadeada: cada faixa do herói entra depois da anterior, var(--t-fast) de passo. */
@keyframes caixa-sobe {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}

body[data-view="financeiro"] .hero-finance > *,
body[data-view="financeiro"] #dash-body > * {
  animation: caixa-sobe var(--t-slow) var(--ease) both;
}

.hero-finance > .month-plate { animation-delay: var(--t-fast); }
.hero-finance > .hero-top { animation-delay: var(--t-fast); }
.hero-finance > .hero-amount { animation-delay: var(--t-fast); }
.hero-finance > .hero-sub { animation-delay: var(--t-fast); }
.hero-finance > .compose { animation-delay: var(--t-base); }
.hero-finance > .hero-kpis { animation-delay: var(--t-base); }

body[data-view="financeiro"] #dash-body > *:nth-child(1) { animation-delay: var(--t-fast); }
body[data-view="financeiro"] #dash-body > *:nth-child(2) { animation-delay: var(--t-fast); }
body[data-view="financeiro"] #dash-body > *:nth-child(3) { animation-delay: var(--t-fast); }
body[data-view="financeiro"] #dash-body > *:nth-child(4) { animation-delay: var(--t-base); }
body[data-view="financeiro"] #dash-body > *:nth-child(n + 5) { animation-delay: var(--t-base); }

/* Os quatro KPIs contam a barra em var(--t-slow), o tempo de ler o número herói. */
.hero-finance .compose-seg,
.hero-finance .compose-track > .compose-seg { animation: caixa-preenche var(--t-slow) var(--ease) var(--t-base) both; }

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

.hero-finance .compose-track { transform-origin: left; }
.hero-finance .compose-seg { transform-origin: left; }

/* O portal troca deslizando, em vez de piscar: o foco chega, os vizinhos velam. */
.stage-card.focus { animation: caixa-portal var(--t-slow) var(--ease) var(--t-fast) backwards; }
.stage-card.peek.before { animation: caixa-espia-esq var(--t-slow) var(--ease) var(--t-fast) backwards; }
.stage-card.peek.after { animation: caixa-espia-dir var(--t-slow) var(--ease) var(--t-fast) backwards; }

@keyframes caixa-portal {
  from { opacity: 0; transform: translateY(16px) scale(0.975); }
  to { opacity: 1; transform: none; }
}
@keyframes caixa-espia-esq {
  from { opacity: 0; transform: translateX(-18px) scale(0.94); }
  to { opacity: 0.52; transform: scale(0.965); }
}

@keyframes caixa-espia-dir {
  from { opacity: 0; transform: translateX(18px) scale(0.94); }
  to { opacity: 0.52; transform: scale(0.965); }
}

/* Dentro do portal em foco cada bloco entra em cascata, var(--t-fast) de passo. */
.stage-card.focus .stage-card-body > * { animation: caixa-sobe var(--t-slow) var(--ease) both; }
.stage-card.focus .stage-card-body > *:nth-child(1) { animation-delay: var(--t-base); }
.stage-card.focus .stage-card-body > *:nth-child(2) { animation-delay: var(--t-base); }
.stage-card.focus .stage-card-body > *:nth-child(3) { animation-delay: var(--t-base); }
.stage-card.focus .stage-card-body > *:nth-child(4) { animation-delay: var(--t-slow); }
.stage-card.focus .stage-card-body > *:nth-child(n + 5) { animation-delay: var(--t-slow); }

/* A régua fixa desce antes de tudo: ela é o chão da leitura. */
.finance-rail { animation: caixa-sobe var(--t-slow) var(--ease) backwards; }
.finance-rail .rail-seg { transform-origin: left; animation: caixa-preenche var(--t-slow) var(--ease) var(--t-base) both; }
.deck-nav { animation: caixa-sobe var(--t-slow) var(--ease) var(--t-fast) both; }
.deck-dot { transition: width var(--t-slow) var(--spring), background var(--t-base) var(--ease); }

/* A carteira entra em fila indiana, do maior para o menor. */
.finance-client-card { animation: caixa-sobe var(--t-slow) var(--ease) var(--stagger, var(--t-fast)) backwards; }
.finance-client-share i { transform-origin: left; animation: caixa-preenche var(--t-slow) var(--ease) calc(var(--stagger, var(--t-fast)) + var(--t-base)) both; }

/* Barras do ano crescem da esquerda, escalonadas por mês. */
.finance-year-chart > button .track i:not(.goal) { transform-origin: left; animation: caixa-preenche var(--t-slow) var(--ease) both; }
.finance-year-chart > button:nth-child(1) .track i { animation-delay: var(--t-fast); }
.finance-year-chart > button:nth-child(2) .track i { animation-delay: var(--t-fast); }
.finance-year-chart > button:nth-child(3) .track i { animation-delay: var(--t-base); }
.finance-year-chart > button:nth-child(4) .track i { animation-delay: var(--t-base); }
.finance-year-chart > button:nth-child(5) .track i { animation-delay: var(--t-base); }
.finance-year-chart > button:nth-child(6) .track i { animation-delay: var(--t-base); }
.finance-year-chart > button:nth-child(7) .track i { animation-delay: var(--t-slow); }
.finance-year-chart > button:nth-child(8) .track i { animation-delay: var(--t-slow); }
.finance-year-chart > button:nth-child(9) .track i { animation-delay: var(--t-slow); }
.finance-year-chart > button:nth-child(10) .track i { animation-delay: var(--t-slow); }
.finance-year-chart > button:nth-child(11) .track i { animation-delay: var(--t-slow); }
.finance-year-chart > button:nth-child(12) .track i { animation-delay: var(--t-slow); }

/* Colunas do horizonte sobem do chão. */
.horizon-col .horizon-bar { transform-origin: bottom; animation: caixa-cresce var(--t-slow) var(--ease) both; }
.horizon-col:nth-child(1) .horizon-bar { animation-delay: var(--t-fast); }
.horizon-col:nth-child(2) .horizon-bar { animation-delay: var(--t-base); }
.horizon-col:nth-child(3) .horizon-bar { animation-delay: var(--t-base); }
.horizon-col:nth-child(4) .horizon-bar { animation-delay: var(--t-base); }
.horizon-col:nth-child(5) .horizon-bar { animation-delay: var(--t-slow); }

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

/* Pressionar responde na hora; o resto respira devagar. */
body[data-view="financeiro"] .finance-stepper button,
body[data-view="financeiro"] .finance-filters button,
body[data-view="financeiro"] .month-step,
body[data-view="financeiro"] .finance-month-nav { transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease), background var(--t-base) var(--ease), transform var(--t-fast) var(--ease); }

body[data-view="financeiro"] .finance-stepper button:active,
body[data-view="financeiro"] .finance-filters button:active { transform: scale(0.95); }

.item.is-openable { transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.item.is-openable:hover { transform: translateY(-1px); }

.finance-client-card { transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }

/* A ficha entra de baixo, no tempo de uma folha caindo. */
.finance-detail-layer:not([hidden]) { animation: caixa-vela var(--t-base) var(--ease) both; }
.finance-detail-layer:not([hidden]) .finance-detail-card { animation: caixa-folha var(--t-slow) var(--ease) var(--t-fast) both; }

@keyframes caixa-vela { from { opacity: 0; } to { opacity: 1; } }
@keyframes caixa-folha {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* Quem pediu menos movimento recebe o conteúdo pronto, sem perder nada. */
@media (prefers-reduced-motion: reduce) {
  body[data-view="financeiro"] .hero-finance > *,
  body[data-view="financeiro"] #dash-body > *,
  .stage-card.focus,
  .stage-card.peek.before,
  .stage-card.peek.after,
  .stage-card.focus .stage-card-body > *,
  .finance-rail,
  .finance-rail .rail-seg,
  .deck-nav,
  .finance-client-card,
  .finance-client-share i,
  .cost-group-dash,
  .hero-finance::after,
  .hero-finance .compose-seg,
  .finance-year-chart > button .track i:not(.goal),
  .horizon-col .horizon-bar,
  .finance-detail-layer:not([hidden]),
  .finance-detail-layer:not([hidden]) .finance-detail-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .item.is-openable:hover { transform: none; }
}

/* ==========================================================================
   Lote Mesa (31/08/2026): manipulação de task, Tasks sem viés financeiro,
   hero de agenda, semana que expande e cor por cliente.
   ========================================================================== */

/* ── o defeito de base: chip em contêiner flex vira bloco ──
   Todo alvo de texto tem altura mínima maior que a linha. Sem centragem
   explícita o rótulo encosta no topo, que é o que acontecia no cartaz. */

.chip-btn,
.hero-btn,
.insight-btn,
.lens,
.boost,
.link-btn,
.daynav-today,
.pad-close,
.toast-undo,
.ask-suggestion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  line-height: 1.15;
}

.link-btn { justify-content: flex-start; }

/* O sólido é a marca cheia: o rótulo tem que ser branco, não laranja sobre laranja. */
.hero-btn.solid,
.hero-btn.solid.brand,
.chip-btn.brand.hero-btn.solid { color: #fff; }
.ask-suggestion { justify-content: flex-start; text-align: left; }

/* ── a cor do cliente: o menor portador possível ── */

.who-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--muted-2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--who, var(--muted)) 22%, transparent);
}

.who-dot.sm { width: 6px; height: 6px; margin-right: 6px; vertical-align: 1px; }

.chip-who {
  border-color: color-mix(in srgb, var(--who) 42%, var(--line));
  color: color-mix(in srgb, var(--who) 62%, var(--ink));
  background: color-mix(in srgb, var(--who) 10%, var(--surface-2));
}

.chip-who:hover { border-color: var(--who); }

.who-picker {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hero-line);
}

.who-picker-k {
  color: var(--hero-muted);
  font-size: 9px;
  font-weight: var(--w-heavy);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.who-swatches { display: flex; flex-wrap: wrap; gap: 8px; }

.who-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
  transition: transform var(--t-base) var(--spring), border-color var(--t-fast) ease;
}

.who-swatch:hover { transform: scale(1.12); }
.who-swatch[aria-pressed="true"] {
  border-color: var(--hero-ink);
  transform: scale(1.1);
}

/* ── a nota vira manipulável: abrir no título, o resto no botão de canto ── */

.note-body { min-width: 0; }

.note-open {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  border-radius: var(--r-pill);
  transition: opacity var(--t-fast) ease;
}

.note-open:hover { opacity: 0.72; }

.note-side {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: start;
  flex: 0 0 auto;
  padding-top: 1px;
}

.note-more {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  color: var(--muted);
  border-color: var(--line);
  background: var(--surface-2);
  transition: color var(--t-fast) ease, background var(--t-fast) ease, border-color var(--t-fast) ease;
}

.note-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.note-more:hover { border-color: var(--line-2); background: var(--surface-2); color: var(--ink-2); }

/* A nota com cliente carrega a cor dele na lombada da folha, sem tingir tudo. */
.note[data-who] .note-margin .who-dot { background: var(--who); }

/* ── a folha: mesma peça para editar task e compromisso ── */

.sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 620;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(var(--blur-scrim)) saturate(115%);
  -webkit-backdrop-filter: blur(var(--blur-scrim)) saturate(115%);
  animation: sheet-veil var(--t-base) ease both;
  overflow-y: auto;
}

.sheet-layer[hidden] { display: none; }

.sheet {
  width: min(520px, 100%);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: sheet-rise var(--t-slow) var(--ease) var(--t-fast) both;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 2px 13px;
}

.sheet-head div { display: grid; gap: 2px; min-width: 0; }

.sheet-head span {
  color: var(--brand-ink);
  font-size: 9px;
  font-weight: var(--w-heavy);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sheet-head strong { color: var(--ink); font-size: 15px; letter-spacing: -0.02em; }

.sheet-x {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--muted);
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}

.sheet-x svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sheet-x:hover { background: var(--surface-2); color: var(--ink-2); }

.sheet .brief { margin: 0; border: 0; padding: 0; background: none; }

.sheet-actions {
  margin-top: 4px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.sheet-actions .insight-btn { min-height: 38px; }
.sheet-actions .insight-btn.danger { margin-left: auto; }

body.sheet-open { overflow: hidden; }

@keyframes sheet-veil { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-rise {
  from { opacity: 0; transform: translateY(24px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* ── hero com frase: Tasks e agenda falam antes de contar ── */

.hero-line {
  margin: 6px 0 0;
  color: var(--hero-ink);
  font-size: clamp(1.35rem, 5.4vw, 1.9rem);
  font-weight: var(--w-bold);
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-wrap: balance;
}

.hero-tasks,
.hero-agenda {
  border-radius: var(--r-xl);
}

.hero-agenda .hero-amount { font-size: clamp(2.3rem, 8vw, 3.1rem); }
.hero-tasks .hero-sub,
.hero-agenda .hero-sub { margin-top: 9px; }

/* Agenda hinge rules live at file end (after hero anatomy) so they win the cascade. */
.hero-agenda-twin {
  cursor: pointer;
  transition: transform var(--t-base) var(--spring), border-color var(--t-fast) ease, box-shadow var(--t-base) var(--ease);
}

.hero-agenda-twin:hover,
.hero-agenda-twin:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

/* ── por cliente: a régua é task feita, nunca dinheiro ── */

.frentes { display: grid; gap: 9px; }

.frente {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  min-height: 80px;
  padding: 14px 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background:
    radial-gradient(110% 170% at 100% 0%, color-mix(in srgb, var(--who, var(--brand)) 8%, transparent), transparent 58%),
    var(--surface);
  transition: transform var(--t-base) var(--spring), border-color var(--t-base) ease, box-shadow var(--t-base) ease;
  animation: rise var(--t-slow) both var(--ease);
}

.frente:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--who, var(--line-2)) 40%, var(--line-2));
  box-shadow: var(--shadow-md);
}

.frente-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--who, var(--line-2)) 45%, var(--line-2));
  border-radius: var(--r-ctl);
  background: color-mix(in srgb, var(--who, var(--surface-3)) 16%, var(--surface-3));
  color: color-mix(in srgb, var(--who, var(--ink)) 70%, var(--ink));
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 0.02em;
}

.frente-info { display: grid; gap: 4px; min-width: 0; }

.frente-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.frente-head strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: var(--w-semibold);
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frente-sub { color: var(--muted); font-size: 11.5px; font-weight: var(--w-regular); }

.frente-peek {
  display: grid;
  gap: 2px;
  margin: 3px 0 0;
  padding: 0;
  list-style: none;
}

.frente-peek li {
  overflow: hidden;
  color: var(--muted-2);
  font-size: 11px;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frente-peek li::before { content: "· "; color: var(--who, var(--muted-2)); font-style: normal; }

.frente-side { display: grid; justify-items: end; gap: 5px; flex: 0 0 auto; }

.frente-ratio {
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.frente-side .share-track { width: 56px; }
.frente-side .share-fill { background: var(--who, var(--ink-2)); }

.frente-cap {
  color: var(--muted-2);
  font-size: 9px;
  font-weight: var(--w-heavy);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── as duas pontes discretas: caixa e cliente sem frente aberta ── */

.cash-hint,
.no-front {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface-inset);
}

.cash-hint p,
.no-front p { margin: 0; flex: 1 1 220px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }

.cash-hint-k,
.no-front-k {
  color: var(--muted-2);
  font-size: 9px;
  font-weight: var(--w-heavy);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.no-front { flex-direction: column; align-items: flex-start; }
.no-front-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── a semana clicável: a coluna inteira é o alvo e ela abre no lugar ── */

.week {
  transition: grid-template-columns var(--t-slow) var(--ease);
}

.week[data-open] { grid-template-columns: repeat(7, minmax(0, 1fr)); }

.week-day {
  position: relative;
  transition: background var(--t-base) ease, box-shadow var(--t-base) ease, transform var(--t-base) var(--ease);
}

.wk-hit {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
}

.week-day > *:not(.wk-hit) { position: relative; z-index: 1; pointer-events: none; }
.week-day > .week-add { pointer-events: auto; }

.week-day:hover { background: var(--surface-2); }
.week-day.quiet:hover { background: var(--surface-2); }

.week-day.is-open {
  background: color-mix(in srgb, var(--future) 9%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--future) 34%, transparent);
}

.week-day.is-open .wk-num { color: var(--future-2); }
.week-day.is-open .wk-track { min-height: 96px; }

/* ── o bloco da semana ──
   Ele era pílula de raio total, então um compromisso de meia hora virava
   bolinha e um de duas horas virava cápsula: forma de badge, não de agenda.
   Raio de controle devolve a leitura de bloco, e a cor do portador (cliente
   ou família do Google) devolve a distinção entre uma coisa e outra. */
.wk-mark.event {
  z-index: 1;
  border-radius: 4px;
  background-color: var(--who, var(--future));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 22%, transparent);
  transition: height var(--t-base) var(--ease), background-color var(--t-base) ease;
}

/* O dia inteiro é contexto do dia, não o dia: fica atrás e em meio tom, para
   não apagar os blocos com hora que moram em cima dele. */
.wk-mark.event.allday {
  z-index: 0;
  border-radius: 4px;
  opacity: 0.3;
  box-shadow: none;
}

.wk-mark.task { color: var(--who, var(--muted)); }

.wk-mark-t {
  display: none;
  padding: 1px 4px;
  color: #fff;
  font-size: 8px;
  font-weight: var(--w-bold);
  line-height: 1.25;
}

.week-day.is-open .wk-mark-t {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.week-detail {
  display: grid;
  gap: 11px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--future) 26%, var(--line));
  border-radius: var(--r-lg);
  background:
    radial-gradient(100% 150% at 100% 0%, var(--future-glow), transparent 62%),
    var(--surface);
  animation: week-open var(--t-slow) var(--ease) both;
}

@keyframes week-open {
  from { opacity: 0; transform: translateY(-10px) scaleY(0.96); transform-origin: top; }
  to { opacity: 1; transform: none; }
}

.week-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}

.week-detail-title { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.week-detail-title strong { color: var(--ink); font-size: 14.5px; letter-spacing: -0.03em; }
.week-detail-title span { color: var(--muted); font-size: 11px; }
.week-detail-acts { display: flex; flex-wrap: wrap; gap: 6px; }

.week-detail-list { display: grid; gap: 7px; }

.week-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background:
    radial-gradient(110% 180% at 0% 0%, color-mix(in srgb, var(--who, var(--tone, var(--future))) 10%, transparent), transparent 56%),
    var(--surface-2);
}

.week-line.is-late { --tone: var(--late); }
.week-line.is-due { --tone: var(--due); }
.week-line.is-future { --tone: var(--future); }

.week-line-when {
  color: var(--tone, var(--muted));
  font-size: 10px;
  font-weight: var(--w-heavy);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.week-line-body { min-width: 0; }

.week-line-title {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: var(--w-semibold);
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.week-line-note { margin: 3px 0 0; color: var(--muted); font-size: 10.5px; }

/* ── o bloco da régua também usa a cor do cliente ── */

.tl-block[data-who] {
  border-color: color-mix(in srgb, var(--who) 50%, transparent);
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--who) 34%, transparent), color-mix(in srgb, var(--who) 15%, transparent)),
    var(--surface-2);
}

.tl-block[data-who]:hover { border-color: color-mix(in srgb, var(--who) 74%, transparent); }
.tl-block .block-who { display: inline-flex; align-items: center; }

/* O espelho do Google não traz cliente, e sem portador a semana importada
   chegava inteira do mesmo cinza. A família do título assume o posto, e ela
   pinta onde a cor do cliente sempre pintou: borda e véu, nunca a superfície. */
.adchip[data-who] { --tone: var(--who); }
.week-line[data-who] { border-color: color-mix(in srgb, var(--who) 30%, var(--line)); }

/* ── amplo: a folha vira diálogo centrado e a semana ganha ar ── */

@media (min-width: 900px) {
  .sheet-layer { align-items: center; padding: 32px; }
  .sheet { max-height: calc(100dvh - 64px); padding: 20px; }
  .week-day { min-height: 220px; }
  .week[data-open] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .frente { min-height: 88px; padding: 16px 18px; }
  .week-detail { padding: 18px; }
}

/* ── compacto: nada encosta na borda em 320 ── */

@media (max-width: 460px) {
  .frente { grid-template-columns: auto minmax(0, 1fr); gap: 11px; padding: 13px 14px; }
  .frente-side {
    grid-column: 2;
    grid-auto-flow: column;
    align-items: center;
    justify-items: start;
    justify-content: start;
    gap: 9px;
    margin-top: 3px;
  }
  .frente-side .share-track { width: 74px; }
  .frente-cap { order: 3; }
}

@media (max-width: 380px) {
  .frente-peek { display: none; }
  .week-day { padding: 8px 3px; }
  .week-detail-head { gap: 8px; }
  .sheet { padding: 13px; }
  .hero-line { font-size: 1.28rem; }
}

/* ── quem pediu menos movimento recebe o resultado, não a viagem ── */

@media (prefers-reduced-motion: reduce) {
  .sheet-layer,
  .sheet,
  .week-detail,
  .frente { animation: none !important; }
  .week,
  .wk-mark.event,
  .week-day { transition: none !important; }
}

/* ── alvos de toque: o que ficou pequeno demais para o polegar ──
   A aparência não muda; a área que responde ao dedo cresce por baixo. */

.who-swatch { width: 30px; height: 30px; }

.check { position: relative; }
.check::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
}

.note-open { padding: 3px 0; }

.week-add { min-height: 32px; }

/* ── a placa da dash no tema claro ──
   Ela era um vidro escuro fixo. Sobre a página clara virava um bloco cinza
   com o subtítulo e o voltar sumindo dentro dele. A placa passa a seguir o
   tema, como toda outra superfície do app. */

[data-theme="light"] .dash-hdr {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border-color: var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 16px 40px rgba(15, 17, 22, 0.07);
}

/* ==========================================================================
   v4 · DUAS RESPONSIVIDADES
   O app tinha uma só: a barra de 390 esticada até 1180. No amplo isso vira
   uma coluna de celular com margens brancas dos dois lados. Daqui pra baixo
   o compacto continua sendo o compacto e o amplo passa a ser desenho de tela
   larga: duas colunas de verdade, cabeças de seção com peso, blocos com
   fronteira própria e cor concentrada nos pontos de decisão.
   ========================================================================== */

/* ── o compacto respira mais: a régua de espaço fica em uma escala só ── */

/* ── amplo: a coluna deixa de ser uma barra ────────────────────────────── */

@media (min-width: 1080px) {
  .phone {
    max-width: var(--col-wide);
    padding: var(--s5) var(--s5) calc(var(--dock-h) + var(--s5));
  }

  #view-home,
  #view-dash { gap: var(--s4); }

  /* A home no amplo: o cartaz ocupa a largura da decisão, a fita corre por
     baixo dele e as três correntes do dia dividem o resto em duas colunas.
     Nada de empilhar três seções de largura inteira uma sobre a outra. */
  #view-home {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(340px, 0.68fr);
    column-gap: var(--s5);
    row-gap: var(--s5);
    align-items: start;
  }

  #view-home > .greeting { grid-column: 1 / -1; margin-bottom: calc(var(--s2) * -1); }
  #view-home > #home-hero { grid-column: 1 / -1; }
  #view-home > #home-agenda { grid-column: 1; grid-row: 3; }
  #view-home > #home-tasks { grid-column: 1; grid-row: 4; }
  #view-home > #home-finance { grid-column: 2; grid-row: 3 / span 2; position: sticky; top: calc(var(--header-h) + var(--s4)); }

  /* O cartaz da home deixa de ser um bloco e vira faixa: texto à esquerda,
     os três sinais em pé à direita, lidos de uma vez. */
  #view-home .summary-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, 0.82fr);
    align-items: center;
    column-gap: var(--s6);
    padding: var(--s5) var(--s5) var(--s5);
  }

  #view-home .summary-hero-head { margin: 0; }
  #view-home .summary-title { font-size: clamp(2.1rem, 2.6vw, 2.9rem); max-width: 15ch; }
  #view-home .summary-signals { margin-top: 0; gap: var(--s2); }
  .summary-signal { min-height: 176px; }
}

@media (min-width: 1440px) {
  #view-home { grid-template-columns: minmax(0, 1.4fr) minmax(380px, 0.6fr); }
}

/* ── cabeça de seção: no amplo o headliner tem que soar como headliner ──
   16.5px em uma coluna de 780px é uma etiqueta, não um título. */

@media (min-width: 1080px) {
  .section-head {
    margin-bottom: var(--s3);
    padding-bottom: 11px;
    border-bottom-color: var(--line-2);
  }

  .section-head h2 {
    gap: 11px;
    font-size: 24px;
    letter-spacing: -0.032em;
  }

  .section-head h2 i { width: 8px; height: 8px; }
  .section-meta { font-size: 12.5px; }
  .link-btn { font-size: 12.5px; }
}

/* ── blocos com fronteira: o card parava no meio do caminho ──
   Portal e lista dividiam a mesma superfície e a mesma borda, então a
   divisão entre eles sumia. A lista de uma seção passa a ter chão próprio. */

.home-stream .section > .list,
#home-agenda .list,
#home-tasks .list {
  border-radius: var(--r-lg);
}

.home-stream .section {
  padding: 0;
  background: transparent;
  border: 0;
}

.home-agenda-list,
.home-stream .notepad {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.home-agenda-list > * + *,
.home-stream .notepad > * + * { border-top: 1px solid var(--line); }

.home-agenda-list .beat { padding: var(--s3); }

@media (min-width: 1080px) {
  .home-agenda-list .beat { padding: 18px var(--s4); }
  .home-agenda-list .beat-when { font-size: 13px; }
  .home-agenda-list .beat-title { font-size: 16px; }
}

/* ── a fita do dia ─────────────────────────────────────────────────────
   Uma peça de tempo, não mais uma pilha de cards. Das 7h às 22h, com o
   agora marcado e cada bloco no lugar em que acontece. */

.ribbon {
  margin-top: var(--s2);
  padding: var(--s3) var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.ribbon-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: 15px;
}

.ribbon-k {
  color: var(--muted-2);
  font-size: 9.5px;
  font-weight: var(--w-heavy);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ribbon-meta {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

.ribbon-track {
  position: relative;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  box-shadow: inset 0 1px 0 var(--hero-inset);
}

.ribbon-tick {
  position: absolute;
  top: 0;
  bottom: -18px;
  width: 1px;
  background: var(--line);
}

.ribbon-tick::after {
  content: attr(data-h);
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateX(-50%);
  color: var(--muted-2);
  font-family: var(--num);
  font-size: 9.5px;
  letter-spacing: 0.04em;
}

.ribbon-block {
  position: absolute;
  top: 6px;
  bottom: 6px;
  display: flex;
  align-items: center;
  padding: 0 9px;
  border-radius: var(--r-ctl);
  background: color-mix(in srgb, var(--who, var(--future)) 26%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--who, var(--future)) 55%, transparent);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.ribbon-block-t {
  font-size: 11.5px;
  font-weight: var(--w-semibold);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ribbon-pin {
  position: absolute;
  top: 11px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--surface-inset);
}

.ribbon-pin.due { background: var(--due); }
.ribbon-pin.late { background: var(--late); }

.ribbon-now {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  border-radius: var(--r-pill);
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-glow);
}

.ribbon-now.out { opacity: 0.35; }

.ribbon-now::after {
  content: attr(data-t);
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 5px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  font-family: var(--num);
  font-size: 9.5px;
  font-weight: var(--w-bold);
  letter-spacing: 0.02em;
}

@media (min-width: 1080px) {
  .ribbon { padding: var(--s4) var(--s4) var(--s5); }
  .ribbon-track { height: 58px; }
  .ribbon-block-t { font-size: 12.5px; }
}

@media (hover: hover) {
  .ribbon-block:hover {
    background: color-mix(in srgb, var(--who, var(--future)) 40%, var(--surface));
    transform: translateY(-1px);
  }
}

/* ── carteira editável ────────────────────────────────────────────────── */

details.no-front { padding: 0; display: block; }

.no-front-sum {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}

.no-front-sum::-webkit-details-marker { display: none; }

.no-front-count {
  color: var(--muted);
  font-family: var(--num);
  font-size: 11px;
  font-weight: var(--w-bold);
}

.no-front-caret {
  margin-left: auto;
  color: var(--muted-2);
  font-size: 15px;
  transition: transform var(--dur) var(--ease);
}

details.no-front[open] .no-front-caret { transform: rotate(90deg); }
details.no-front > .no-front-row { padding: 0 15px var(--s3); }

.client-manager {
  padding: var(--s3) 15px;
  border-top: 1px dashed var(--line-2);
}

.client-manager-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s2);
  margin-bottom: var(--s3);
}

.client-manager-head strong {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
}

.client-manager-head span { color: var(--muted); font-size: 11.5px; }

.client-manager-list { display: flex; flex-direction: column; gap: var(--s1); }

.client-manager-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s2);
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.client-manager-row.is-archived { opacity: 0.5; }

.who-dot-lg { width: 10px; height: 10px; border-radius: 50%; }

.client-manager-name {
  min-width: 0;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: var(--w-semibold);
  letter-spacing: -0.015em;
}

.client-manager-name:hover { border-color: var(--line-2); }

.client-manager-name:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface-inset);
}

.client-manager-swatches {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.client-manager-swatches .who-swatch {
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.42;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.client-manager-swatches .who-swatch.on {
  opacity: 1;
  transform: scale(1.18);
  box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 3px currentColor;
}

@media (hover: hover) {
  .client-manager-swatches .who-swatch:hover { opacity: 1; }
}

.client-manager-act {
  grid-row: 1;
  grid-column: 3;
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: var(--w-bold);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

@media (hover: hover) {
  .client-manager-act:hover { color: var(--ink); border-color: var(--ink-2); }
}

@media (min-width: 720px) {
  .client-manager-row { grid-template-columns: 12px minmax(200px, 1fr) auto auto; }
  .client-manager-swatches { grid-column: auto; }
}

/* ── caixa: o amplo deixa de ser a versão vertical do celular ───────────
   O mês inteiro cabia em uma coluna rolando por 4 telas. No amplo o herói
   e a leitura ficam parados à esquerda e o portal rola sozinho à direita. */

@media (min-width: 1080px) {
  body[data-view="financeiro"] #dash-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
    column-gap: var(--s5);
    row-gap: var(--s4);
    align-items: start;
  }

  body[data-view="financeiro"] #dash-body > .hero-finance {
    grid-column: 1;
    position: sticky;
    top: calc(var(--header-h) + var(--s4));
  }

  body[data-view="financeiro"] #dash-body > .finance-stage-wrap { grid-column: 2; }
  body[data-view="financeiro"] #dash-body > .foot { grid-column: 1 / -1; }

  /* A régua fixa não faz sentido quando o herói fica parado na tela. */
  body[data-view="financeiro"] .finance-rail {
    position: static;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
}

/* A régua e a leitura viram um par: números à esquerda, o que eles querem
   dizer à direita. Em cascata isso era uma tela inteira de repetição. */

.finance-readings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s2);
  margin: var(--s3) 0 var(--s4);
}

.finance-reading {
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.finance-reading strong {
  display: block;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: var(--w-bold);
  letter-spacing: -0.022em;
}

.finance-reading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.42;
}

/* O estado mora no ponto, não em tinta espalhada pelo card inteiro. */
.finance-reading::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin-bottom: 9px;
  border-radius: 50%;
  background: var(--muted-2);
}

.finance-reading.late::before { background: var(--late); box-shadow: 0 0 0 3px var(--late-glow); }
.finance-reading.due::before { background: var(--due); box-shadow: 0 0 0 3px var(--due-glow); }
.finance-reading.cash::before { background: var(--cash); box-shadow: 0 0 0 3px var(--cash-glow); }
.finance-reading.future::before { background: var(--future); box-shadow: 0 0 0 3px var(--future-glow); }

/* ── o stepper vira índice de verdade: rótulo e o número dele juntos ── */

.finance-stepper button > .step-label {
  font-size: 13px;
  font-weight: var(--w-semibold);
  letter-spacing: -0.02em;
}

.finance-stepper button > .step-meta {
  color: var(--muted-2);
  font-family: var(--num);
  font-size: 10.5px;
  font-weight: var(--w-semibold);
  letter-spacing: 0;
  line-height: 1.2;
}

.finance-stepper button.active > .step-meta { color: var(--ink-2); }

@media (min-width: 1080px) {
  .finance-stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s1);
    overflow: visible;
  }

  .finance-stepper button {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-height: 62px;
    padding: 11px 13px;
    text-align: left;
  }

  .finance-stepper button > i.step-dot { position: absolute; top: 12px; right: 12px; }
}

/* ── a troca de portal é movimento, não recarga ────────────────────────
   Antes cada aba repintava a rota inteira: a tela piscava e o scroll voltava
   ao topo. Agora só o portal em foco troca, deslizando do lado de onde veio. */

.finance-deck { overflow: hidden; }

.finance-deck > .stage-card {
  transition: transform var(--t-slow) var(--ease), opacity var(--t-base) var(--ease), filter var(--t-base) var(--ease);
}

.finance-deck[data-enter="right"] > .stage-card { transform: translate3d(34px, 0, 0); opacity: 0; filter: blur(var(--blur-scrim)); }
.finance-deck[data-enter="left"] > .stage-card { transform: translate3d(-34px, 0, 0); opacity: 0; filter: blur(var(--blur-scrim)); }

/* Sem vizinhos meio-lidos: o portal em foco ocupa a largura inteira. */
.finance-deck > .stage-card.focus { width: 100%; max-width: none; margin: 0; }

.horizon-block { margin-bottom: var(--s4); }

@media (prefers-reduced-motion: reduce) {
  .finance-deck > .stage-card,
  .ribbon-block { transition: none; }
  .finance-deck[data-enter] > .stage-card { transform: none; opacity: 1; filter: none; }
}

/* A entrada em cascata do portal era do carrossel que repintava a rota: com
   a troca no lugar ela vira atraso duplicado. O deslize já é o movimento. */
.finance-deck > .stage-card.focus { animation: none; }
.finance-deck > .stage-card.focus .stage-card-body > * { animation: none; }

/* ── v4 · correções da inspeção ─────────────────────────────────────────── */

/* O deck ainda carregava a grade de três colunas do carrossel com vizinhos.
   Sem vizinhos, ela espremia o portal em foco a um terço da largura. */
.finance-deck,
.finance-deck.edge-left,
.finance-deck.edge-right,
.finance-deck.edge-left.edge-right {
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr);
}

/* Os três sinais do cartaz: o número cede antes de encostar na borda. */
.summary-signals { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.summary-signal-value {
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  overflow-wrap: anywhere;
}

/* Na coluna estreita da home o caixa é uma pilha, não três colunas cortadas. */
@media (min-width: 1080px) {
  .home-cash-snapshot { grid-template-columns: minmax(0, 1fr); }
  .home-cash-fact { border-left: 0; border-top: 1px solid var(--line); }
  .home-cash-fact:first-child { border-top: 0; }
}

/* Os quatro KPIs do herói do caixa dividem uma coluna, não a tela inteira. */
@media (min-width: 1080px) {
  body[data-view="financeiro"] .hero-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-view="financeiro"] .kpi .kpi-value { font-size: clamp(17px, 1.5vw, 23px); }
}

/* A placa da dash no amplo: ela era um cartaz vazio de 300px encostando no dock. */
@media (min-width: 1080px) {
  #view-dash { grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); column-gap: var(--s5); }
  .dash-hdr { padding: var(--s3) var(--s4) var(--s4); }
  #dash-title { font-size: clamp(2rem, 2.4vw, 2.75rem); }
}

/* O passo do deck é um par de setas junto do contador, não uma barra vazia. */
.deck-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s3);
}

.deck-now { text-align: left; }
.deck-nav .deck-step:last-of-type { order: 3; }

/* A meta do stepper é número tabular, não texto monoespaçado esparramado. */
.finance-stepper button > .step-meta { letter-spacing: -0.01em; white-space: nowrap; }

/* A fita quando o dia não tem bloco: o rótulo do agora não briga com a meta. */
.ribbon-head { margin-bottom: 22px; }
.ribbon-now::after { white-space: nowrap; }
.ribbon-track { overflow: visible; }

/* Perto do fim da linha o carimbo do agora deixa de ser centrado: ele
   encosta pela direita em vez de vazar para fora da fita. */
.ribbon-now.late-day::after { left: auto; right: 0; transform: none; }

/* ── v4 · o dock lateral precisa de calçada ──────────────────────────────
   Com a coluna larga o dock vertical caiu por cima das lentes da dash. Ele
   ganha uma faixa própria e a coluna começa depois dela. */

@media (min-width: 1320px) {
  .dock { left: max(20px, calc(50% - 720px)); }
  .phone { padding-left: 128px; max-width: calc(var(--col-wide) + 92px); }
  .toast { left: 128px; }
}

/* O portal em foco já é nomeado pelo stepper: repetir o nome e o número
   dentro do cartão era a mesma manchete duas vezes, coladas. */
.finance-deck > .stage-card.focus > .stage-card-head { display: none; }
.finance-deck > .stage-card.focus { padding-top: 20px; }

/* Na linha larga a ação fecha a linha: pintar vem antes de arquivar. */
@media (min-width: 720px) {
  .client-manager-row { grid-template-columns: 12px minmax(180px, 1fr) auto auto; }
  .client-manager-swatches { grid-column: 3; grid-row: 1; flex-wrap: nowrap; }
  .client-manager-act { grid-column: 4; grid-row: 1; }
}

/* ==========================================================================
   LOTE 1 · FUNDAÇÃO
   Camada autoral que fecha a consolidação. Acima daqui tudo já fala em
   tokens (3 raios, 3 durações, 1 curva, 2 blurs, 2 sombras). Aqui moram as
   quatro decisões que dependem dessa escala: ritmo de espaço, fim do card
   fantasma, tipografia em cinco degraus e a anatomia única de hero.
   ========================================================================== */

/* ── 1. Ritmo ────────────────────────────────────────────────────────────
   Mais espaço acima de um título do que abaixo dele: é o que faz a cabeça
   pertencer ao bloco que vem depois, e não flutuar entre dois. */

.section + .section,
.home-stream + .home-stream,
#dash-body > .section + .section,
#dash-body > * + .section { margin-top: var(--s5); }

.section-head {
  margin-bottom: var(--s3);
  padding-bottom: var(--s1);
  gap: var(--s2);
}

.list { display: flex; flex-direction: column; gap: var(--s1); }
.list.dense,
.list.notepad,
.list.pauta { gap: 0; }

/* Padding de bloco sempre maior que a maior lacuna interna. Empatados, o
   conteúdo parece encostado na borda. */
.stage-card { padding: var(--s3); gap: var(--s2); }
.finance-reading { padding: var(--s2) var(--s3); }
.empty { padding: var(--s4) var(--s3); }
.brief { padding: var(--s3); gap: var(--s2); }
.sheet { padding: var(--s3); }

/* ── 2. Elevação declarada uma vez ───────────────────────────────────────
   Borda ou sombra. A borda 1px sob sombra larga é o card fantasma, e ele
   estava em três lugares. No escuro manda a borda; no claro, a sombra. */

.stage-card,
.finance-reading,
.home-agenda-list,
.home-stream .notepad,
.ribbon,
.summary-signal { box-shadow: none; }

[data-theme="light"] .stage-card,
[data-theme="light"] .finance-reading,
[data-theme="light"] .home-agenda-list,
[data-theme="light"] .home-stream .notepad,
[data-theme="light"] .ribbon {
  border-color: transparent;
  box-shadow: var(--e1);
}

/* Halo colorido de offset zero é decoração. Sobra só onde ele é anel de
   estado em um ponto de 7px, que é leitura, não sombra. */
.summary-hero,
.hero,
.hero-finance { box-shadow: none; }

/* ── 3. Tipografia: cinco degraus ────────────────────────────────────────
   A asserção do hero é o único elemento acima de 32px na tela. Se dois
   elementos são grandes, nenhum é. */

.summary-title,
#dash-title,
.hero-amount,
.finance-year-hero .amount { font-size: var(--t-title); letter-spacing: -0.03em; }

.hero-finance .hero-amount,
.client-sheet-amount { font-size: var(--t-display); letter-spacing: -0.038em; }

.section-head h2 { font-size: var(--t-head); }

.hero-kicker,
.summary-kicker,
.ribbon-k,
.no-front-k,
.cash-hint-k,
.hero-cap,
.k-label,
.rail-label,
.frente-cap {
  font-size: var(--t-cap);
  font-weight: var(--w-heavy);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── 4. Anatomia única de hero ───────────────────────────────────────────
   Quatro heros inventaram quatro estruturas, então se reaprendia a ler a
   cada rota. Passam a ter as mesmas quatro camadas, sempre nesta ordem:
   situação, asserção, medida, gesto. A rota escolhe quais usa. */

.summary-hero,
.hero,
.hero-finance,
.client-sheet-hero {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  /* O hero se distingue por escala e espaço, não por ter cor onde os
     outros blocos não têm. */
  background: var(--hero-bg);
}

.summary-hero::before,
.hero::before,
.hero-finance::before { content: none; }

/* camada 1: situação */
.summary-hero-head,
.hero-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin: 0; }

/* camada 2: asserção. Uma frase OU um número, nunca os dois no mesmo peso. */
.summary-title,
.hero-amount { margin: 0; line-height: 1.02; }
.summary-copy { margin: var(--s1) 0 0; color: var(--hero-muted); font-size: var(--t-body); }

/* camada 3: medida. Fatos tabulares com fio entre eles, não cards. */
.hero-facts,
.summary-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--hero-line);
  padding-top: var(--s3);
}

.summary-signal,
.hero-facts .fact {
  position: relative;
  min-height: 0;
  padding: 0 var(--s3);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.summary-signal:not(:first-child)::before,
.hero-facts .fact:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--hero-line);
}

.summary-signal:first-child,
.hero-facts .fact:first-child { padding-left: 0; }

.summary-signal-top { gap: var(--s1); }
.summary-signal-arrow { display: none; }

.summary-signal-value {
  display: block;
  margin: var(--s0) 0 var(--s0);
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.summary-signal-detail,
.summary-signal-meta { color: var(--hero-muted); }

/* camada 4: gesto. No máximo dois botões, o primeiro sólido. */
.summary-actions,
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0; }

@media (max-width: 640px) {
  .summary-hero,
  .hero,
  .hero-finance,
  .client-sheet-hero { padding: var(--s3); gap: var(--s3); }

  .hero-facts,
  .summary-signals { padding-top: var(--s2); }

  .summary-signal,
  .hero-facts .fact { padding: 0 var(--s2); }
}

/* A camada 3 do hero é medida, não coleção de cartões. Os três sinais
   perdem borda tinta e fundo: sobra o ponto de estado, o número tabular e
   o fio de 1px que os separa. É isso que tira três retângulos coloridos do
   primeiro viewport sem perder nenhuma informação. */

.summary-signal,
.summary-signal.sector-tasks,
.summary-signal.sector-agenda,
.summary-signal.sector-cash {
  border: 0;
  background: none;
}

.summary-signal::after,
.summary-signal.sector-tasks::after,
.summary-signal.sector-agenda::after,
.summary-signal.sector-cash::after { content: none; }

/* O ícone do setor vira o ponto de estado: sete pixels, e é o único
   portador de cor da camada. */
.summary-signal-icon {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--signal-color, var(--muted));
  box-shadow: 0 0 0 3px var(--signal-glow, transparent);
  color: transparent;
}

.summary-signal-icon > * { display: none; }
.summary-signal-label { color: var(--hero-muted); }

/* ==========================================================================
   LOTE 2 · COR E REMOÇÕES
   Três tons de estado, um acento por viewport. A cor deixa a superfície e
   passa a viver em dois lugares só: o ponto de 7px e o número.
   ========================================================================== */

/* ── 1. Superfície é superfície ──────────────────────────────────────────
   Os radial-gradient pintavam o card inteiro em cima do estado. Card é
   sempre --surface, e o estado se declara na borda e no ponto. */

.stage-card,
.stage-card.tone-brand,
.stage-card.tone-due,
.stage-card.tone-cash,
.stage-card.tone-cost,
.stage-card.tone-future,
.finance-reading,
.kpi,
.insight,
.summary-hero,
.hero,
.hero-finance,
.portal,
.frente,
.week-day,
.empty { background-image: none; }

.stage-card { background-color: var(--surface); border-color: var(--line); }
.kpi { background-color: transparent; }

/* O anel de foco e o ponto de estado continuam com cor. O resto do halo sai. */
.stage-card.focus { box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ── 2. Blur só onde há conteúdo real atrás ──────────────────────────────
   Sobram topbar, dock e scrim. Em card estático o blur custa uma camada de
   composição por frame e não mostra nada. */

*:not(.topbar):not(.dock):not(.scrim):not(.sheet-layer):not(.ask-layer):not(.finance-detail-layer) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-scroll="on"] .topbar,
.dock {
  backdrop-filter: blur(var(--blur-veil)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-veil)) saturate(140%);
}

.scrim,
.sheet-layer,
.ask-layer,
.finance-detail-layer {
  backdrop-filter: blur(var(--blur-scrim));
  -webkit-backdrop-filter: blur(var(--blur-scrim));
}

/* ── 3. future e cost deixam de gritar ───────────────────────────────────
   Pipeline e custo não exigem decisão hoje, então saem do vocabulário de
   cor e voltam como peso tipográfico. */

.kpi.future .k-value,
.kpi.cost .k-value,
.rail-value,
.finance-reading.future strong,
.badge.future,
.chip-btn.future { color: var(--ink-2); }

.summary-signal.future .summary-signal-icon,
.badge.future { background: var(--muted-2); box-shadow: none; }

/* O rótulo de hora é texto, nunca pastilha: fundo de estado aqui derrubava
   o contraste para 1,1:1 no tema claro. */
.beat.is-future .beat-when { background: none; color: var(--muted); }

/* ── 4. A leitura do mês em uma linha ────────────────────────────────────
   Quatro cards diziam o que os números do herói já dizem. */

p.finance-reading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s0) var(--s2);
  margin: var(--s3) 0 var(--s4);
  padding: 0 0 0 var(--s2);
  border: 0;
  border-left: 1px solid var(--line-2);
  background: none;
}

p.finance-reading::before { content: none; }
p.finance-reading strong { display: inline; font-size: var(--t-body); font-weight: var(--w-bold); letter-spacing: -0.02em; }
p.finance-reading span { color: var(--muted); font-size: 12px; }
p.finance-reading.late strong { color: var(--late); }
p.finance-reading.due strong { color: var(--due); }
p.finance-reading.cash strong { color: var(--cash); }

/* ── 5. O que saiu de cena ───────────────────────────────────────────────*/

.finance-rail,
.deck-step,
.deck-dots,
.kpi .spark,
.kpi svg.spark { display: none; }

.deck-nav { justify-content: flex-start; padding: 0; border: 0; background: none; }
.deck-now { text-align: left; }

/* ── 6. Concluídas como rodapé dobrado, não como lente ───────────────────*/

.done-drawer { margin-top: var(--s5); }

.done-drawer-sum {
  display: flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s2) 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: var(--w-semibold);
  cursor: pointer;
  list-style: none;
}

.done-drawer-sum::-webkit-details-marker { display: none; }
.done-drawer-n { color: var(--muted-2); font-family: var(--num); }
.done-drawer[open] .done-drawer-sum { color: var(--ink-2); }
.done-drawer .list { margin-top: var(--s2); opacity: 0.62; }

/* O halo do hero era a última superfície tinta grande da tela. O hero se
   distingue por escala e espaço, não por ter cor onde nenhum outro bloco tem. */
.hero::after,
.hero::before,
.hero-finance::after,
.hero-finance::before,
.summary-hero::after { content: none; }

.hero-kpis,
.kpi-row {
  gap: 1px;
  border-radius: 0;
  background: var(--hero-line);
  overflow: hidden;
}

.kpi-row > .kpi { background: var(--hero-bg); padding: var(--s2) var(--s3); }

/* O neutro tem que ser discreto: virar cinza-claro só troca um grito por
   outro. Pipeline e custo desenham em linha, não em massa. */
.horizon-col.future .horizon-bar,
.horizon-col.zero .horizon-bar {
  background: none;
  border: 1px solid var(--line-2);
}

p.finance-reading { border-radius: 0; padding-left: var(--s2); }
p.finance-reading::after { content: none; }

/* Um acento por viewport na leitura: o valor bruto ao lado do líquido não
   precisa de cor, ele é referência. */
.item-gross,
.stage-rest { color: var(--muted-2); }

/* A faixa de fatos era um bloco cinza com três células dentro. Virou medida:
   fundo nenhum, fio de 1px separando, e o texto respira até a borda. */
.hero-facts,
.summary-signals {
  overflow: visible;
  border-radius: 0;
  background: none;
  margin-top: 0;
}

.hero-facts .fact,
.summary-signal { background: none; }
.hero-facts .fact::after { content: none; }

/* ==========================================================================
   LOTE 3 · MOTION E ACABAMENTO
   Uma cena autoral por rota, não uma entrada por elemento. Vinte e sete
   keyframes contavam vinte e sete histórias ao mesmo tempo; sobram quatro.
   ========================================================================== */

/* ── 1. As entradas decorativas saem de cena ─────────────────────────────
   Halos que respiram, brilhos que passam, véus que velam e cascatas de
   60ms por bloco competiam com a única informação que merece movimento. */

.stage-card,
.stage-card.focus,
.stage-card.peek,
.stage-card.focus .stage-card-body > *,
.finance-rail,
.finance-rail .rail-seg,
.deck-nav,
.hero::before,
.hero::after,
.hero-finance::before,
.hero-finance::after,
.summary-hero::before,
.summary-hero::after,
.horizon-col,
.horizon-bar,
.finance-client-card,
.finance-year-chart .bar,
.kpi,
.compose-seg,
.share-fill,
.portal,
.insight,
.frente,
.beat,
.note,
.item,
.summary-signal { animation: none; }

/* ── 2. A cena que fica ──────────────────────────────────────────────────
   A rota entra inteira, de um estado já visível, e o número herói conta.
   Fora isso, o app não se anuncia: ele responde. */

#view-home,
#view-dash {
  animation: rota-entra var(--t-slow) var(--ease) both;
}

@keyframes rota-entra {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: none; }
}

/* O único movimento contínuo do app: o agora, na fita do dia. */
.ribbon-now { animation: agora 2s var(--ease) infinite; }

@keyframes agora {
  0%, 100% { box-shadow: 0 0 0 3px var(--brand-glow); }
  50% { box-shadow: 0 0 0 7px transparent; }
}

/* A fita se revela da esquerda para a direita, no tempo da rota: é a peça
   que fala de tempo, então ela chega como tempo passa. */
.ribbon-track > .ribbon-block { animation: fita var(--t-slow) var(--ease) var(--t-tap) both; }

@keyframes fita {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* ── 3. Sair é sempre mais rápido que entrar ─────────────────────────────
   Interface que demora a sair parece travada. */

.chip-btn,
.insight-btn,
.boost,
.lens,
.tab,
.top-icon,
.top-command,
.rail-cell,
.finance-stepper button,
.client-manager-act,
.who-swatch,
.check { transition-duration: var(--t-fast); transition-timing-function: var(--ease); }

/* ── 4. Superfícies do browser ───────────────────────────────────────────
   O que o navegador desenha e ninguém tematiza. É o mais barato que existe
   e é o que separa uma tela construída de uma tela montada. */

::selection {
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  color: var(--ink);
}

input,
textarea,
[contenteditable] { caret-color: var(--brand); }

* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { border-radius: var(--r-pill); background: var(--line-2); }
*::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* Um anel de foco só no app inteiro. Havia três tratamentos diferentes. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-ctl);
}

a:not(.chip-btn):not(.tab):not(.link-btn):not(.brand) {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Número que dança quando o valor muda é ruído. Todo dinheiro, hora e
   contador do app é tabular. */
.hero-amount,
.summary-signal-value,
.k-value,
.rail-value,
.item-amount,
.item-gross,
.beat-when,
.frente-ratio,
.horizon-value,
.stage-ledger strong,
.clock,
.hour-label,
.tl-hour,
.deck-now span,
.step-meta,
.finance-total-row,
.no-front-count,
.done-drawer-n,
.month-goal,
.client-total { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* O scroll de uma lista não vaza para a página. */
.list,
.hours,
.finance-stepper,
.week,
.ask-body { overscroll-behavior: contain; }

@media (prefers-reduced-motion: reduce) {
  #view-home,
  #view-dash,
  .ribbon-now,
  .ribbon-track > .ribbon-block { animation: none; }
}

/* O bloco da fita é superfície neutra com o ponto do cliente dentro. A cor
   identifica sem tingir, que é a regra da carteira inteira. */
.ribbon-block {
  gap: 6px;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.ribbon-block-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: var(--r-pill); }

@media (hover: hover) {
  .ribbon-block:hover { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--who, var(--line-2)); }
}

/* ── Agenda espelhada do Google ──────────────────────────────────────────
   O tracejado marca o que ainda é espelho: veio de fora e ninguém mexeu.
   Editar traz o compromisso para a mesa, e aí o traço fecha. */
.block[data-external],
.tl-block[data-external],
.week-line[data-external] {
  border-style: dashed;
  opacity: 0.92;
}

.beat[data-external] .beat-when::after,
.ribbon-block[data-external]::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 4px;
  width: 4px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--muted-2);
}

/* ── o comando único ─────────────────────────────────────────────────────
   Executar é diferente de responder, então a caixa muda de cara: ela diz o
   que vai fazer, por extenso, e espera a confirmação. Nada em silêncio. */

.ask-do { border-color: color-mix(in srgb, var(--brand) 34%, var(--line)); }

.ask-do-k {
  display: block;
  margin-bottom: var(--s1);
  color: var(--brand-ink);
  font-size: var(--t-cap);
  font-weight: var(--w-heavy);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ask-do strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: var(--w-bold);
  letter-spacing: -0.028em;
  line-height: 1.15;
}

.ask-do p { margin: var(--s0) 0 0; color: var(--muted); font-size: 12.5px; }
.ask-do-acts { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s3); }

/* ── LOTE 6 · interconexão ──────────────────────────────────────────────*/

/* O cursor do teclado precisa ser visível sem ser um segundo estado de cor. */
.is-cursor {
  position: relative;
  box-shadow: inset 2px 0 0 var(--brand);
}

/* Quanto vale a hora: o número manda, a barra compara, o cliente é o ponto. */
.hourly-lead {
  display: flex;
  flex-direction: column;
  gap: var(--s0);
  margin: 0 0 var(--s3);
  padding-left: var(--s2);
  border-left: 1px solid var(--cash);
}

.hourly-lead strong { color: var(--ink); font-size: 15px; font-weight: var(--w-bold); letter-spacing: -0.028em; }
.hourly-lead span { color: var(--muted); font-size: 12px; line-height: 1.4; }

.hourly-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-ctl);
  color: inherit;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}

.hourly-row + .hourly-row { border-top: 1px solid var(--line); border-radius: 0; }
.hourly-row.is-blank { opacity: 0.6; }

.hourly-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hourly-copy strong { color: var(--ink); font-size: 14px; font-weight: var(--w-semibold); letter-spacing: -0.02em; }
.hourly-copy span { color: var(--muted); font-size: 11.5px; }

.hourly-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 96px; }
.hourly-side b { color: var(--ink); font-size: 15px; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hourly-side .share-track { width: 96px; }
.hourly-side .share-fill { background: var(--cash); }
.hourly-cap { color: var(--muted-2); font-size: 9px; font-weight: var(--w-heavy); letter-spacing: 0.12em; text-transform: uppercase; }

@media (hover: hover) {
  .hourly-row:hover { background: var(--surface-2); }
}

/* A grade de duas colunas do caixa foi desenhada para a lente do mês, onde
   existe herói fixo à esquerda e portal rolando à direita. Nas outras lentes
   (lançamentos, clientes, ano) não há herói, e a grade picava o conteúdo em
   duas colunas desalinhadas. Ela passa a valer só onde faz sentido. */
@media (min-width: 1080px) {
  body[data-view="financeiro"] #dash-body { display: block; }

  body[data-view="financeiro"] #dash-body:has(> .hero-finance) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
    column-gap: var(--s5);
    row-gap: var(--s4);
    align-items: start;
  }

  /* Sem :has, a lente do mês continua em coluna única: degrada sem quebrar. */
  body[data-view="financeiro"] #dash-body > .section { max-width: 1120px; }
}

/* A leitura de hora é uma tabela de comparação: passando de ~880px o número
   descola do nome e a linha deixa de ser lida como uma coisa só. */
.section:has(> .list > .hourly-row) > .list,
.hourly-lead { max-width: 880px; }

/* ==========================================================================
   RODADA DE MOTION · os momentos autorais
   O app é quieto de propósito. Movimento aqui não decora: ele responde a um
   gesto real e some. Cinco momentos, e nenhum deles se repete na rolagem.
   ========================================================================== */

/* ── 1. A rota morfa, não pisca ──────────────────────────────────────────
   Com View Transitions o herói de uma rota vira o herói da outra. A barra
   de cima e o dock ficam parados: eles não fazem parte da troca. */

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--t-slow);
  animation-timing-function: var(--ease);
}

::view-transition-old(root) { animation-name: rota-sai; }
::view-transition-new(root) { animation-name: rota-chega; }

@keyframes rota-sai {
  to { opacity: 0; transform: translate3d(0, -6px, 0); filter: blur(2px); }
}

@keyframes rota-chega {
  from { opacity: 0; transform: translate3d(0, 10px, 0); filter: blur(3px); }
}

.topbar { view-transition-name: chrome-topo; }
.dock { view-transition-name: chrome-dock; }
::view-transition-group(chrome-topo),
::view-transition-group(chrome-dock) { animation-duration: 1ms; }

/* ── 2. A lista chega com a rolagem, não com um cronômetro ───────────────
   Animação dirigida pelo scroll: cada linha assenta quando entra no campo
   de visão e desassenta ao sair. Sem JS, sem observer, sem jank, e some
   sozinha em quem pediu menos movimento. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .list > .note,
    .list > .item,
    .list > .beat,
    .list > .frente,
    .list > .hourly-row,
    .list > .stage-card,
    .finance-client-card {
      animation: linha-assenta linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 34%;
    }

    @keyframes linha-assenta {
      from { opacity: 0; transform: translate3d(0, 12px, 0); }
      to { opacity: 1; transform: none; }
    }
  }
}

/* ── 3. A lista longa desvanece na borda, em vez de ser cortada ──────────
   Máscara, não gradiente falso por cima: funciona sobre qualquer fundo e
   sobre os dois temas sem uma linha de cor a mais. */

.finance-stepper,
.hours,
.week,
.ask-body {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

.hours,
.ask-body {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

/* ── 4. Concluir tem que ser sentido ─────────────────────────────────────
   O traço do check é desenhado, o alvo dá um pulso curto de anel, e a linha
   assenta. É o único lugar do app onde a marca aparece em movimento, porque
   é o único gesto que encerra alguma coisa. */

.check { position: relative; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }

.check::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: var(--r-pill);
  border: 2px solid var(--brand);
  opacity: 0;
  pointer-events: none;
}

.check[aria-pressed="true"]::after { animation: check-anel var(--t-enter) var(--ease); }

@keyframes check-anel {
  from { opacity: 0.75; transform: scale(0.72); }
  to { opacity: 0; transform: scale(1.32); }
}

.check svg path,
.check svg polyline {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset var(--t-base) var(--ease) 60ms;
}

.check[aria-pressed="true"] svg path,
.check[aria-pressed="true"] svg polyline { stroke-dashoffset: 0; }

/* ── 5. O agora corre, e o que passou recua ──────────────────────────────
   Na fita do dia o bloco que já aconteceu perde saturação em vez de sumir:
   o dia continua inteiro, mas o peso está no que ainda vai acontecer. */

.ribbon-block { transition: opacity var(--t-base) var(--ease), filter var(--t-base) var(--ease); }
.ribbon-block[data-passou] { opacity: 0.5; filter: saturate(0.4); }

.ribbon-now::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, var(--brand-glow), transparent 70%);
  animation: agora-onda 2s var(--ease) infinite;
  pointer-events: none;
}

@keyframes agora-onda {
  0% { transform: scale(0.4); opacity: 0.9; }
  70%, 100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  .check[aria-pressed="true"]::after,
  .ribbon-now::before { animation: none; }
  .check svg path,
  .check svg polyline { stroke-dashoffset: 0; transition: none; }
}

/* ==========================================================================
   HOME, a cascata: tasks manda, agenda e caixa dao contexto
   --------------------------------------------------------------------------
   Tres blocos com o mesmo cabecalho e o mesmo peso viravam texto solto: nada
   dizia ao olho por onde comecar. Aqui cada setor ganha uma anatomia unica e
   o mesmo esqueleto, para o olho aprender o padrao uma vez e reusar.
   A cor continua morando no ponto e no numero, nunca na superficie.
   ========================================================================== */

/* ── 1. Hero curto: uma frase e uma acao ────────────────────────────────── */

.summary-hero-lede { padding: var(--s4); }

/* Sem o painel de sinais o hero nao precisa mais do corpo de display: ele
   informa e sai da frente da lista que vem logo abaixo. */
.summary-hero-lede .summary-title {
  max-width: 22ch;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  letter-spacing: -0.038em;
  line-height: 1.04;
  text-wrap: balance;
}

.summary-hero-lede .summary-copy {
  max-width: 52ch;
  font-size: 13.5px;
  line-height: 1.5;
}

/* A data era um chip: padding, raio pill e cor de controle sem ser clicavel.
   Vira texto alinhado ao titulo, que e o que ela sempre foi. */
.summary-hero-lede .summary-date {
  padding: 0;
  border-radius: 0;
  color: var(--hero-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ── 2. Grade: a coluna larga e de quem executa ─────────────────────────── */

.home-grid { display: grid; gap: var(--s5); margin-top: var(--s5); }
.home-side { display: grid; gap: var(--s5); align-content: start; min-width: 0; }
.home-grid .home-stream + .home-stream { margin-top: 0; }

@media (min-width: 1040px) {
  .home-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.95fr);
    gap: var(--s4);
    align-items: start;
  }
  .home-side { gap: var(--s4); }
}

/* ── 3. Cabecalho de setor: o numero antes do conteudo ──────────────────── */

.sector > .section-head {
  align-items: baseline;
  gap: var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--sector-line, var(--line));
}

.sector-tasks { --sector-ink: var(--brand-ink); --sector-line: color-mix(in srgb, var(--brand) 26%, var(--line)); }
.sector-agenda { --sector-ink: var(--ink-2); --sector-line: var(--line); }
.sector-cash { --sector-ink: var(--cash); --sector-line: color-mix(in srgb, var(--cash) 24%, var(--line)); }

.sector-count {
  display: flex;
  align-items: baseline;
  gap: var(--s1);
  margin-left: auto;
  min-width: 0;
}

.sector-count strong {
  color: var(--count-ink, var(--ink));
  font-size: 19px;
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
}

.sector-count small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: var(--w-medium);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sector-count.late { --count-ink: var(--late); }
.sector-count.due { --count-ink: var(--due); }
.sector-count.cash { --count-ink: var(--cash); }
.sector-count.future { --count-ink: var(--ink); }
.sector-count.quiet { --count-ink: var(--muted-2); }

/* O bloco que manda fala mais alto: um degrau de titulo e um de numero
   acima dos blocos de contexto, e nenhum valor solto fora da escala. */
.home-lead .sector > .section-head h2 { font-size: 20px; letter-spacing: -0.042em; }
.home-lead .sector-count strong { font-size: 27px; }
.home-side .sector > .section-head h2 { font-size: 14px; }

/* ── 4. Caixa na home: o fato, nao o saldo ──────────────────────────────── */

.home-cash-lede {
  --lede-tone: var(--muted-2);
  display: grid;
  gap: 7px;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

.home-cash-lede.late { --lede-tone: var(--late); }
.home-cash-lede.due { --lede-tone: var(--due); }
.home-cash-lede.future { --lede-tone: var(--future-2); }
.home-cash-lede.cash { --lede-tone: var(--cash); }

.home-cash-lede-title {
  color: var(--ink);
  font-size: 15px;
  font-weight: var(--w-semibold);
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
}

/* O nome do cliente carrega o estado: e a unica palavra da frase que muda
   de cor, entao e nela que o olho para. */
.home-cash-lede-sub {
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}

.home-cash-lede::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lede-tone);
}

@media (hover: hover) {
  .home-cash-lede:hover { border-color: var(--lede-tone); background: var(--surface-2); }
}

[data-theme="light"] .home-cash-lede { border-color: transparent; box-shadow: var(--e1); }

/* ── 5. Superficies do navegador que ninguem desenhou ───────────────────── */

::selection { background: color-mix(in srgb, var(--brand) 34%, transparent); color: var(--ink); }
:where(input, textarea) { caret-color: var(--brand); }
:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-ctl);
}
* { scrollbar-color: var(--line-2) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: var(--r-pill); background: var(--line-2); background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ── 6. Um momento de movimento, nao um por bloco ───────────────────────── */

/* As tres secoes entravam com a mesma animacao e delays quase iguais: tres
   entradas simultaneas nao sao uma cascata, sao um piscar. A home passa a ter
   uma leitura so, de cima para baixo, e o resto ja nasce visivel. */
.home-stream .section { animation: none; }
.summary-hero-lede { animation: hero-reveal var(--t-slow) both var(--ease); }
.home-lead .sector { animation: daybook-in var(--t-base) both var(--ease) var(--t-tap); }
.home-side .sector { animation: daybook-in var(--t-base) both var(--ease) var(--t-fast); }

@media (prefers-reduced-motion: reduce) {
  .summary-hero-lede,
  .home-lead .sector,
  .home-side .sector { animation: none; }
}

/* ── 7. Reconciliacao com a grade antiga do desktop ─────────────────────
   O amplo antigo fazia de #view-home a propria grade e posicionava
   #home-agenda / #home-tasks / #home-finance como filhos diretos. Eles agora
   moram dentro de .home-grid, entao aquelas regras deixavam a coluna com
   metade da largura e o hero com uma segunda coluna vazia onde ficavam os
   sinais. A grade volta a ser responsabilidade de um lugar so. */

@media (min-width: 860px) {
  #view-home {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }
}

@media (min-width: 1080px) {
  #view-home {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    column-gap: normal;
    row-gap: normal;
    gap: var(--s4);
  }

  /* A frase continua liderando o hero. A leitura rápida ocupa a coluna
     vizinha, enquanto a data ancora o topo e a fila de tasks vem logo abaixo. */
  #view-home .summary-hero-lede {
    display: block;
    column-gap: normal;
    padding: var(--s4) var(--s5);
  }

  #view-home .summary-hero-lede .summary-title {
    max-width: 20ch;
    font-size: clamp(2rem, 2.5vw, 2.8rem);
  }

  #view-home .summary-hero-lede .summary-hero-head {
    align-items: baseline;
    gap: var(--s5);
  }
}

/* ── 8. Correcoes do primeiro passe de inspecao ─────────────────────────── */

/* O gap do #view-home ja separa hero de conteudo: o margin-top da grade
   somava um segundo respiro e abria um buraco de ~150px entre a fita e a
   primeira lista. Um so lugar declara essa distancia. */
.home-grid { margin-top: 0; }

/* A data herdava do chip antigo o fundo, a borda e o blur: sem padding ela
   virava um retangulo colado no texto. Ela e legenda, nao controle. */
.summary-hero-lede .summary-date {
  border: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (min-width: 1080px) {
  /* A home não precisa de uma altura artificial para uma faixa de sinais. */
  #view-home .summary-hero-lede { padding: var(--s4) var(--s4) var(--s4); }
}

/* ── 9. Uma voz de display por tela ─────────────────────────────────────
   A saudacao a 44px e o titulo do hero a 45px empatavam: duas manchetes
   coladas nao formam hierarquia, formam indecisao. A saudacao volta a ser o
   que sempre foi, uma etiqueta de quem abriu o app, e o hero fica sendo a
   unica frase grande da home. */

@media (min-width: 1080px) {
  #view-home .greeting { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
  #view-home .greet-line { font-size: 22px; letter-spacing: -0.03em; }
  #view-home .greet-sub { margin: 0; font-size: 13px; }

  /* No amplo a fita repetia, com menos precisao, os mesmos blocos que a
     agenda mostra na coluna ao lado com hora e cliente, e cobrava 250px de
     altura entre o hero e a lista que manda. Ela continua no estreito, onde
     a agenda cai muito abaixo da dobra e a linha do tempo e a unica pista. */
  #home-hero .ribbon { display: none; }
}

/* Na coluna estreita o rotulo do contador tem menos largura do que na coluna
   que manda: em vez de cortar a palavra no meio, ele quebra e alinha pela
   direita, junto do numero a que pertence. */
.home-side .sector-count { flex-wrap: wrap; justify-content: flex-end; }
.home-side .sector-count small { white-space: normal; text-align: right; }

/* A mesma indecisao existia no estreito: a saudacao a 28px empilhada sobre um
   titulo de 36px sao duas manchetes, e o olho nao sabe qual das duas e a
   noticia. A saudacao fica sendo o que ela e em qualquer largura. */
#view-home .greet-line { font-size: clamp(19px, 4.6vw, 22px); letter-spacing: -0.03em; }
#view-home .greet-sub { margin-top: 4px; font-size: 12.5px; }

/* ==========================================================================
   LOTES A, B e C: um objeto quente por tela
   --------------------------------------------------------------------------
   Destilado de quatro referencias. O que elas tem em comum: exatamente um
   elemento por tela carrega cor e luz, todo o resto e neutro. Medidor por
   segmentos no lugar de barra continua, porque contavel e fisico e nao gasta
   matiz. Numero enorme com unidade minuscula na mesma linha de base.
   Aqui o objeto quente e o par do hero. Tudo abaixo dele e estrutura.
   ========================================================================== */

/* ── A1. A escada de sombra chega nos cards ─────────────────────────────────
   No escuro o card estava so com borda e sumia no fundo. Com o realce interno
   de 1px o topo do objeto aparece, e as duas camadas largas o assentam. A
   borda sai: era ela ou a sombra, e agora a sombra e que funciona. */

.home-agenda-list,
.home-stream .notepad,
.home-cash-lede,
.ribbon,
.stage-card,
.finance-reading {
  border-color: transparent;
  box-shadow: var(--e1);
}

.sheet,
.finance-detail-card,
.ask-dialog { box-shadow: var(--e2); }

/* No claro o realce interno viraria uma linha branca sobre papel branco. */
[data-theme="light"] .home-agenda-list,
[data-theme="light"] .home-stream .notepad,
[data-theme="light"] .home-cash-lede,
[data-theme="light"] .ribbon,
[data-theme="light"] .stage-card,
[data-theme="light"] .finance-reading { box-shadow: var(--e1); }

/* ── A2. O par numero e unidade ─────────────────────────────────────────────
   Valor grande com tabular-nums, unidade pequena na mesma linha de base. */

.hero-pair {
  display: flex;
  align-items: baseline;
  gap: var(--s1);
  margin: var(--s2) 0 var(--s1);
  color: var(--pair-ink, var(--ink));
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  line-height: 1;
}

.hero-pair.late { --pair-ink: var(--late); }
.hero-pair.due { --pair-ink: var(--due); }
.hero-pair.cash { --pair-ink: var(--cash); }

.hero-pair-v { font: inherit; letter-spacing: inherit; }

.hero-pair-u {
  color: var(--hero-muted);
  font-size: var(--t-cap);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

/* Com o par no lugar, o titulo do hero desce um degrau: ele diz o que houve,
   o numero diz o quanto. Dois protagonistas seria nenhum. */
.summary-hero-lede .summary-title {
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  letter-spacing: -0.03em;
}

/* ── A3. Menos caixa ────────────────────────────────────────────────────────
   Filete de 1px no lugar de borda de card nas tres colunas da home, e salto
   de dois degraus entre grupos, nunca de um. */

.home-grid { gap: var(--s6); }
.home-side { gap: var(--s6); }

@media (min-width: 1040px) {
  .home-grid { gap: var(--s4); }
  .home-side { gap: var(--s5); }
}

/* O numero de setor sai do colorido: o unico numero quente da tela e o do
   hero. O estado continua legivel, no ponto ao lado do titulo. */
.sector-count.late,
.sector-count.due,
.sector-count.cash,
.sector-count.future { --count-ink: var(--ink); }

/* A regra sob o cabecalho tambem perde o matiz. Tres filetes coloridos em
   sequencia eram tres decisoes tomadas antes da decisao que importa. */
.sector > .section-head { border-bottom-color: var(--line); }

/* ── B4. Medidor por segmentos ──────────────────────────────────────────────
   A barra continua vira contavel. Uma mascara de listras corta o mesmo
   preenchimento em dez pastilhas, entao nenhuma chamada precisou mudar. */

.share-track {
  --seg: 10;
  --gap-seg: 2px;
  overflow: visible;
  background: none;
  -webkit-mask-image: repeating-linear-gradient(
    90deg,
    #000 0,
    #000 calc((100% - (var(--seg) - 1) * var(--gap-seg)) / var(--seg)),
    transparent 0,
    transparent calc((100% - (var(--seg) - 1) * var(--gap-seg)) / var(--seg) + var(--gap-seg))
  );
  mask-image: repeating-linear-gradient(
    90deg,
    #000 0,
    #000 calc((100% - (var(--seg) - 1) * var(--gap-seg)) / var(--seg)),
    transparent 0,
    transparent calc((100% - (var(--seg) - 1) * var(--gap-seg)) / var(--seg) + var(--gap-seg))
  );
  border-radius: 0;
}

/* O trilho vazio agora e desenhado por baixo, para a mascara valer nos dois. */
.share-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--line-2);
}

.share-track { position: relative; }
.share-fill { position: relative; border-radius: 0; }

/* ── B5. Chip de dominio ────────────────────────────────────────────────────
   Diz de que assunto o bloco fala, sem gastar um matiz para isso. */

.sec-chip {
  display: inline-grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: var(--surface-3);
  color: var(--muted);
  vertical-align: -5px;
}

.sec-chip svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section-head h2 { display: flex; align-items: center; gap: var(--s1); }

/* ── B6. Seta em circulo ────────────────────────────────────────────────────
   A promessa de que o bloco abre em outro lugar. */

.ring-arrow {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.ring-arrow svg { width: 11px; height: 11px; }

@media (hover: hover) {
  .link-btn:hover .ring-arrow { transform: translateX(2px); border-color: currentColor; }
}

/* ── C7. Bento desigual ─────────────────────────────────────────────────────
   Grade uniforme e monotonia. Um card lidera, e o gradiente unico da tela
   mora nele, atras do numero quente. */

.summary-hero-lede {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.summary-hero-lede::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%;
  right: -10%;
  width: min(420px, 62%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--hero-halo, var(--brand-glow)) 0%, transparent 68%);
  opacity: 0.9;
  pointer-events: none;
}

@media (min-width: 1040px) {
  /* O hero ocupa a largura da coluna que executa, nao a da tela inteira: um
     retangulo de 1200px com quatro linhas de texto e um vazio, nao um card. */
  .summary-hero-lede .summary-hero-head { max-width: 62ch; }
}

/* ── C8. A faixa de comando ─────────────────────────────────────────────────
   Estava atras de um icone na topbar. E a coisa mais diferenciada do app e
   pergunta se faz por escrito, entao ela desce para a home com o tamanho de
   uma pergunta. */

.home-command {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

.home-command svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--brand-ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-command span {
  color: var(--ink);
  font-size: 14px;
  font-weight: var(--w-semibold);
  letter-spacing: -0.015em;
}

.home-command em {
  overflow: hidden;
  color: var(--muted-2);
  font-size: 12.5px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-command kbd {
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--muted-2);
  font-family: var(--num);
  font-size: 11px;
}

@media (hover: hover) {
  .home-command:hover { border-color: var(--line-2); background: var(--surface-2); }
}

@media (max-width: 520px) {
  .home-command em { display: none; }
}

[data-theme="light"] .home-command { border-color: transparent; box-shadow: var(--e1); }

/* ── C9. Uma cascata so ─────────────────────────────────────────────────────
   Havia tres entradas diferentes disputando a abertura da home. Vira uma,
   em degraus de 60ms, e ela se apaga sozinha no fim. */

@keyframes casc {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

#view-home > .greeting,
#view-home > #home-hero,
#view-home > .home-command,
#view-home .home-lead .sector,
#view-home .home-side .sector {
  animation: casc var(--t-base) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

#view-home > .greeting { --i: 0; }
#view-home > #home-hero { --i: 1; }
#view-home > .home-command { --i: 2; }
#view-home .home-lead .sector { --i: 3; }
#view-home .home-side .sector { --i: 4; }
#view-home .home-side > .home-stream:last-child .sector { --i: 5; }

/* As entradas antigas cedem o lugar. */
.summary-hero-lede,
.home-side .sector { animation-name: none; }
#view-home > #home-hero .summary-hero-lede { animation: none; }

/* ── C10. A folha nasce de onde foi tocada ──────────────────────────────────
   O ponto do toque entra como --ox e --oy, e a folha sai de la. Sem o ponto
   ela cai no comportamento antigo, subindo do rodape. */

@keyframes sheet-born {
  from {
    opacity: 0;
    transform: translate(
        calc((var(--ox, 50vw) - 50vw) * 0.14),
        calc((var(--oy, 100vh) - 50vh) * 0.14)
      )
      scale(0.94);
  }
  to { opacity: 1; transform: none; }
}

.sheet-layer .sheet,
.finance-detail-layer:not([hidden]) .finance-detail-card,
.ask-layer .ask-dialog {
  animation: sheet-born var(--t-slow) var(--ease) both;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  #view-home > .greeting,
  #view-home > #home-hero,
  #view-home > .home-command,
  #view-home .home-lead .sector,
  #view-home .home-side .sector,
  .sheet-layer .sheet,
  .finance-detail-layer:not([hidden]) .finance-detail-card,
  .ask-layer .ask-dialog { animation: none; }
}

/* ── Acertos de verificacao ────────────────────────────────────────────────
   1. O link do cabecalho ganhou a seta em circulo e ficou com 20px de altura
      clicavel. Area de toque nao e o desenho, e ela cresce sem mexer nele.
   2. No amplo o hero era um retangulo de 1500px com quatro linhas de texto e
      um vazio a direita. A fita do dia, que ja mora dentro dele, sobe para
      esse vazio: o bento desigual sai de conteudo real, nao de enchimento. */

.link-btn {
  min-height: 44px;
  padding-block: var(--s2);
  margin-block: calc(var(--s2) * -1);
}

/* No amplo a fita do dia esta desligada de proposito, porque ela repetia a
   coluna da agenda. Entao quem ocupa o vazio ao lado do hero e a faixa de
   comando, que ali deixa de ser uma barra atravessada e vira o segundo card
   do bento: menor que o hero, e o unico outro objeto da primeira dobra. */
@media (min-width: 1080px) {
  #view-home {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.72fr);
    column-gap: var(--s3);
    align-items: stretch;
  }
  #view-home > .greeting,
  #view-home > .home-grid { grid-column: 1 / -1; }
  #view-home > #home-hero { grid-column: 1; }

  #view-home > .home-command {
    grid-column: 2;
    display: grid;
    align-content: space-between;
    justify-items: start;
    gap: var(--s1);
    margin-top: 0;
    padding: var(--s3);
  }
  /* O atalho desce para o rodape do card: o vazio no meio passa a ser
     respiro entre a pergunta e o modo de faze-la, e nao sobra. */
  #view-home > .home-command > svg { margin-bottom: var(--s2); }

  /* A saudacao virou item de grade e o subtitulo foi parar na outra ponta da
     tela, longe do nome a que pertence. Ele volta a andar junto. */
  #view-home > .greeting { justify-content: flex-start; }
  #view-home .greet-sub { margin-right: auto; }
  .home-command svg { width: 20px; height: 20px; }
  .home-command span { font-size: 16px; }
  .home-command em { white-space: normal; }
  .home-command kbd { margin: var(--s1) 0 0; justify-self: start; }
}

/* O hero e a unica superficie que fica escura nos dois temas. No claro os
   tons de estado sao versoes escuras, feitas para papel branco, e o numero
   quente caia para 2.14 sobre o hero. Dentro do hero valem os tons do escuro.
   Medido: vencido 5.69, a vencer 9.92, entrou 10.17. */
[data-theme="light"] .summary-hero {
  --late: #ff4d62;
  --due: #f0b445;
  --cash: #3ed99b;
}

/* Achado fora dos tres lotes, mas em largura suportada: em 320px o wordmark
   passava por baixo dos botoes da topbar e as letras se sobrepunham. Abaixo
   de 360px sobra a marca WH, que ja identifica o app sozinha. */
@media (max-width: 359px) {
  .brand-copy { display: none; }
}

/* Studio: briefing inteiro, dois destinos e a leitura financeira horizontal. */
#view-home { display: block; }
#view-home > .greeting { margin-bottom: 24px; }
#view-home > .home-command { display: flex; padding: 16px 20px; margin: 18px 0; align-items: center; }
#view-home > .home-command > svg { margin: 0; }
#view-home > .home-command kbd { margin: 0 0 0 auto; }
#view-home .home-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
#home-finance { grid-column: 1 / -1; }
.overview-portal, .overview-finance { display: flex; flex-direction: column; height: 100%; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); text-decoration: none; min-width: 0; }
.overview-portal { transition: border-color var(--t-fast), background var(--t-fast); }
.overview-portal:hover { border-color: var(--brand); background: var(--surface-2); }
.overview-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.overview-head h2 { font-size: 24px; letter-spacing: -.03em; font-weight: 600; margin: 0; }
.overview-head .insight-ico { width: 24px; height: 24px; background: none; }
.overview-caption { color: var(--muted); margin: 8px 0 24px; font-size: 14px; }
.overview-notes { flex: 1; }
.overview-note { display: grid; grid-template-columns: 24px 1fr; gap: 6px 10px; padding: 18px 0; border-top: 1px solid var(--line); }
.overview-note strong { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.overview-note small { grid-column: 2; color: var(--muted); font-size: 12px; }
.overview-bullet { color: var(--brand); }
.overview-footer { display: block; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.overview-footer p { margin: 8px 0; }
.overview-calendar { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; text-align: center; }
.calendar-weekday { color: var(--muted); font-size: 12px; padding-bottom: 10px; }
.calendar-day { display: grid; place-content: center; position: relative; min-height: 38px; font-size: 14px; border-radius: 8px; }
.calendar-day.is-today { background: var(--brand); color: #fff; font-weight: 700; }
.calendar-day i { position: absolute; bottom: 3px; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: var(--cash); }
.cash-projection { min-width: 0; margin: 24px 0; padding: 24px; background: var(--surface); border-radius: 16px; }
.overview-finance .cash-projection { padding: 0; }
.cash-projection-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cash-projection-head h2 { margin: 0; color: var(--ink); font-size: clamp(19px, 2.1vw, 24px); font-weight: var(--w-semibold); letter-spacing: -.03em; }
.cash-projection-legend { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 11px; }
.cash-legend-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cash-legend-key i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.cash-legend-key.cash i { background: var(--cash); }
.cash-legend-key.due i { background: var(--due); }
.cash-projection svg { display: block; width: 100%; height: auto; overflow: visible; }
.cash-projection-head + svg { margin-top: 18px; }
.plot-grid { stroke: var(--line); stroke-width: 1; }
.plot-label { fill: var(--muted); font-size: 11px; }
.plot-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.plot-line.actual { stroke: var(--cash); }
.plot-line.projected { stroke: var(--due); stroke-dasharray: 6 6; }
.plot-dot.actual { fill: var(--cash); }
.plot-dot.projected { fill: var(--due); }
.plot-now-line { stroke: var(--due); stroke-width: 1; stroke-dasharray: 3 5; opacity: .85; }
.plot-now-label { fill: var(--due); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.plot-now-card { fill: var(--surface-2); stroke: var(--due); stroke-width: 1; }
.plot-now-value { fill: var(--ink); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cash-projection figcaption { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 12px; }
.plot-data { margin-top: 12px; font-size: 13px; color: var(--muted); }
.plot-data summary { cursor: pointer; min-height: 44px; align-content: center; }
.plot-data table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.plot-data th, .plot-data td { text-align: right; padding: 8px; border-bottom: 1px solid var(--line); }
.plot-data th:first-child, .plot-data td:first-child { text-align: left; }
.finance-action-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.finance-action { display: grid; gap: 4px; min-width: 0; min-height: 64px; padding: 8px 16px; border: 0; border-radius: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.finance-action + .finance-action { border-left: 1px solid var(--line); }
.finance-action:hover { background: var(--surface-2); }
.finance-action:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.finance-action-label { color: var(--muted); font-size: 10px; font-weight: var(--w-bold); letter-spacing: var(--track); text-transform: uppercase; }
.finance-action strong { color: var(--ink); font-size: 17px; font-weight: var(--w-semibold); letter-spacing: -.02em; }
.finance-action small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.overview-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; border-top: 1px solid var(--line); padding-top: 24px; }
.overview-facts span { display: block; color: var(--muted); font-size: 13px; }
.overview-facts strong { display: block; margin-top: 8px; font-size: clamp(20px,2.3vw,32px); font-weight: 500; font-variant-numeric: tabular-nums; }
.planner-tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.planner-tools button { min-height: 44px; }
.planner-day { padding: 20px; background: var(--surface); border-radius: 12px; margin-bottom: 16px; }
body.is-opening { overflow: hidden; }
body.is-opening > :not(#opening-screen):not(script) { visibility: hidden; opacity: 0; }
body.is-opening:not(.opening-exit) #view-home > .greeting,
body.is-opening:not(.opening-exit) #view-home > #home-hero,
body.is-opening:not(.opening-exit) #view-home > .home-command,
body.is-opening:not(.opening-exit) #view-home .home-lead .sector,
body.is-opening:not(.opening-exit) #view-home .home-side .sector { animation-play-state: paused; }
body.is-opening.opening-exit > :not(#opening-screen):not(script) {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--t-base) var(--ease-out);
}
#opening-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  justify-items: center;
  overflow: hidden;
  background: #080809;
  color: #f5f4f2;
  isolation: isolate;
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), filter var(--t-base) var(--ease-out);
}
.opening-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: min(72vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,84,38,.14), rgba(255,84,38,.035) 32%, transparent 68%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
  animation: opening-aura-in var(--t-enter) var(--t-tap) var(--ease-out) both;
}
.opening-frame,
.opening-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  pointer-events: none;
}
.opening-lockup {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 15px;
  animation: opening-resolve var(--t-enter) var(--t-tap) var(--ease-out) both;
  will-change: transform, opacity, filter;
}
.opening-mark-wrap {
  display: grid;
  flex: 0 0 auto;
  width: clamp(52px, 9vw, 72px);
  height: clamp(52px, 9vw, 72px);
  place-items: center;
}
.opening-mark {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22%;
  box-shadow: 0 1px 1px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.34), 0 26px 70px rgba(0,0,0,.46);
}
.opening-wordmark { display: grid; gap: 5px; }
.opening-wordmark strong { font-size: clamp(25px,5vw,40px); line-height: .9; letter-spacing: -.055em; }
.opening-wordmark strong span { color: #ff5426; }
.opening-wordmark small { color: rgba(245,244,242,.42); font-size: 9px; font-weight: 700; letter-spacing: .34em; }
#opening-screen.is-exiting { opacity: 0; transform: translateY(-4px) scale(1.015); filter: blur(6px); pointer-events: none; }
@keyframes opening-resolve {
  from { opacity: 0; filter: blur(10px); transform: translateY(10px) scale(.94); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}
@keyframes opening-aura-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.72); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes opening-frame-draw {
  from { opacity: 0; clip-path: inset(50% 50% 50% 50% round 28px); transform: translate(-50%, -50%) scale(.92); }
  to { opacity: 1; clip-path: inset(0 0 0 0 round 28px); transform: translate(-50%, -50%) scale(1); }
}
@keyframes opening-wordmark-reveal { from { opacity: .25; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes opening-slice-aura { from { opacity: 0; transform: translate(-50%, -50%) translateX(-28px) rotate(-12deg) scale(.64); } to { opacity: 1; transform: translate(-50%, -50%) translateX(0) rotate(0) scale(1); } }
@keyframes opening-orbit-in { from { opacity: 0; transform: translate(-50%, -50%) rotate(-34deg) scale(.72); } to { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); } }
@keyframes opening-orbit-in-reverse { from { opacity: 0; transform: translate(-50%, -50%) rotate(34deg) scale(.72); } to { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); } }
@keyframes opening-orbit-resolve {
  from { opacity: 0; filter: blur(8px); transform: scale(.78); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* QA 01A: o isotipo nasce sozinho, ancora a assinatura e só então revela o wordmark. */
@keyframes opening-isotype-dock {
  0% { opacity: 0; filter: blur(10px); transform: translateX(-50%) scale(.82); }
  18% { opacity: 1; filter: blur(0); transform: translateX(-50%) scale(1); }
  44% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 1; transform: translateX(calc(-50% - var(--opening-side-shift))) scale(1); }
}
@keyframes opening-isotype-dock-pulse {
  0% { opacity: 0; filter: blur(10px) drop-shadow(0 0 0 rgba(255,84,38,0)); transform: translateX(-50%) scale(.8); }
  18% { opacity: 1; filter: blur(0) drop-shadow(0 0 20px rgba(255,84,38,.26)); transform: translateX(-50%) scale(1.04); }
  46% { opacity: 1; filter: blur(0) drop-shadow(0 0 8px rgba(255,84,38,.12)); transform: translateX(-50%) scale(1); }
  100% { opacity: 1; filter: blur(0) drop-shadow(0 0 0 rgba(255,84,38,0)); transform: translateX(calc(-50% - var(--opening-side-shift))) scale(1); }
}
@keyframes opening-isotype-dock-drift {
  0% { opacity: 0; filter: blur(12px); transform: translateX(-50%) scale(.88); }
  24% { opacity: 1; filter: blur(0); transform: translateX(-50%) scale(1); }
  36% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 1; transform: translateX(calc(-50% - var(--opening-side-shift))) scale(1); }
}
@keyframes opening-wordmark-dock {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(8px); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0); }
}
@keyframes opening-aura-pulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.64); }
  46% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(.92); }
}
@keyframes opening-aura-drift {
  0% { opacity: 0; transform: translate(-50%, -50%) translateX(-34px) scale(.78); }
  52% { opacity: 1; transform: translate(-50%, -50%) translateX(0) scale(1.02); }
  100% { opacity: 1; transform: translate(-50%, -50%) translateX(24px) scale(.94); }
}

/* Três possibilidades da Aura 01. Ficam selecionáveis no preview por ?opening=. */
html[data-opening-variant="1a"] #opening-screen,
html[data-opening-variant="1b"] #opening-screen,
html[data-opening-variant="1c"] #opening-screen {
  --opening-side-shift: clamp(95px, 8.6vw, 124px);
  --opening-mark-size: clamp(52px, 9vw, 72px);
  --opening-wordmark-width: clamp(145px, calc(100vw - 390px), 232px);
}
html[data-opening-variant="1a"] #opening-screen .opening-lockup,
html[data-opening-variant="1b"] #opening-screen .opening-lockup,
html[data-opening-variant="1c"] #opening-screen .opening-lockup {
  display: grid;
  grid-template-columns: var(--opening-mark-size) var(--opening-wordmark-width);
  gap: 15px;
  width: calc(var(--opening-mark-size) + 15px + var(--opening-wordmark-width));
  min-height: var(--opening-mark-size);
  animation: none;
  opacity: 1;
  filter: none;
  transform: none;
}
html[data-opening-variant="1a"] #opening-screen .opening-mark-wrap,
html[data-opening-variant="1b"] #opening-screen .opening-mark-wrap,
html[data-opening-variant="1c"] #opening-screen .opening-mark-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  will-change: transform, opacity, filter;
}
html[data-opening-variant="1a"] #opening-screen .opening-mark-wrap {
  animation: opening-isotype-dock var(--t-enter) var(--t-tap) var(--ease-out) both;
}
html[data-opening-variant="1b"] #opening-screen .opening-mark-wrap {
  animation: opening-isotype-dock-pulse var(--t-enter) var(--t-tap) var(--ease-out) both;
}
html[data-opening-variant="1c"] #opening-screen .opening-mark-wrap {
  animation: opening-isotype-dock-drift var(--t-enter) var(--t-tap) var(--ease-out) both;
}
html[data-opening-variant="1a"] #opening-screen .opening-wordmark,
html[data-opening-variant="1b"] #opening-screen .opening-wordmark,
html[data-opening-variant="1c"] #opening-screen .opening-wordmark {
  grid-column: 2;
  width: var(--opening-wordmark-width);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translateX(8px);
  animation: opening-wordmark-dock var(--t-base) var(--t-slow) var(--ease-out) both;
}
html[data-opening-variant="1a"] #opening-screen .opening-aura {
  width: min(66vw, 480px);
}
html[data-opening-variant="1b"] #opening-screen .opening-aura {
  width: min(58vw, 420px);
  background: radial-gradient(circle, rgba(255,84,38,.2), rgba(255,84,38,.045) 30%, transparent 68%);
  animation: opening-aura-pulse var(--t-enter) var(--t-tap) var(--ease-out) both;
}
html[data-opening-variant="1b"] #opening-screen .opening-wordmark {
  transform: translateX(14px) scale(.98);
}
html[data-opening-variant="1c"] #opening-screen .opening-aura {
  width: min(74vw, 600px);
  background: radial-gradient(circle at 38% 50%, rgba(255,84,38,.14), rgba(255,84,38,.025) 38%, transparent 72%);
  animation: opening-aura-drift var(--t-enter) var(--t-tap) var(--ease-out) both;
}
html[data-opening-variant="1c"] #opening-screen .opening-wordmark {
  transform: translateX(4px);
  animation-duration: var(--t-slow);
  animation-delay: var(--t-base);
}

/* Variante 02: moldura de foco. A marca é enquadrada, não carregada. */
html[data-opening-variant="2"] #opening-screen .opening-aura {
  width: min(76vw, 520px);
  background: radial-gradient(ellipse at 50% 52%, rgba(255,84,38,.13), rgba(255,84,38,.025) 38%, transparent 70%);
  transform: translate(-50%, -50%) translateX(-28px) rotate(-12deg) scale(.64);
  animation-name: opening-slice-aura;
}
html[data-opening-variant="2"] #opening-screen .opening-frame {
  display: block;
  width: min(86vw, 430px);
  height: min(54vw, 216px);
  border: 1px solid rgba(245,244,242,.16);
  border-radius: 28px;
  animation: opening-frame-draw var(--t-enter) var(--t-tap) var(--ease-out) both;
}
html[data-opening-variant="2"] #opening-screen .opening-lockup {
  animation: opening-resolve var(--t-enter) var(--t-tap) var(--ease-out) both;
  transform: translateY(8px) scale(.94);
}
html[data-opening-variant="2"] #opening-screen .opening-wordmark {
  clip-path: inset(0 100% 0 0);
  animation: opening-wordmark-reveal var(--t-slow) var(--t-base) var(--ease-out) both;
}
/* Variante 03: órbita curta. A marca vira o centro e entrega a tela. */
html[data-opening-variant="3"] #opening-screen .opening-aura {
  width: min(68vw, 420px);
  background: radial-gradient(circle, rgba(255,84,38,.15), rgba(255,84,38,.035) 34%, transparent 70%);
  animation-duration: var(--t-enter);
}
html[data-opening-variant="3"] #opening-screen .opening-orbit {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
}
html[data-opening-variant="3"] #opening-screen .opening-orbit-a {
  width: min(76vw, 380px);
  border: 1px solid rgba(245,244,242,.15);
  border-left-color: #ff5426;
  border-bottom-color: transparent;
  animation: opening-orbit-in var(--t-enter) var(--t-tap) var(--ease-out) both;
}
html[data-opening-variant="3"] #opening-screen .opening-orbit-b {
  width: min(56vw, 282px);
  border: 1px solid rgba(245,244,242,.11);
  border-right-color: #ff6a41;
  border-top-color: transparent;
  animation: opening-orbit-in-reverse var(--t-enter) var(--t-tap) var(--ease-out) both;
}
html[data-opening-variant="3"] #opening-screen .opening-lockup {
  animation: opening-orbit-resolve var(--t-enter) var(--t-tap) var(--ease-out) both;
}
@media (min-width: 1080px) {
  body[data-view="financeiro"] #view-dash { display: block; }
  body[data-view="financeiro"] .dash-hdr { position: static; width: auto; margin-bottom: 24px; }
  body[data-view="financeiro"] #dash-lenses { display: flex; flex-direction: row; gap: 8px; }
  body[data-view="financeiro"] #dash-lenses .lens { width: auto; min-width: 110px; }
  body[data-view="financeiro"] #dash-body { width: 100%; max-width: none; }
  .finance-stage-wrap { margin-top: 24px; }
  .finance-stepper { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
  .stage-card.focus .stage-card-body { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .stage-card-body > .horizon-block, .stage-card-body > .stage-ledger { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  #view-home .home-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .overview-portal, .overview-finance { padding: 20px; }
  .overview-head h2 { font-size: 21px; }
  .overview-head { flex-wrap: wrap; }
  .overview-facts { gap: 16px; grid-template-columns: 1fr; }
  .overview-facts > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
  .overview-facts strong { margin: 0; }
  .cash-projection { padding: 12px; }
  .cash-projection svg { min-height: 170px; }
  .cash-projection-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .cash-projection-head + svg { margin-top: 10px; }
  .finance-action-rail { grid-template-columns: 1fr; }
  .finance-action { min-height: 60px; padding: 10px 0; }
  .finance-action + .finance-action { border-top: 1px solid var(--line); border-left: 0; }
}
/* Default splash: radar TASKS / AGENDA / CAIXA resolve into WAREHOUSE OPS. */
html[data-opening-variant="signal"] #opening-screen {
  background: radial-gradient(circle at 50% 48%, #1a1818 0, #0d0d10 34%, #070708 76%);
}
html[data-opening-variant="signal"] #opening-screen .opening-aura,
html[data-opening-variant="signal"] #opening-screen .opening-frame,
html[data-opening-variant="signal"] #opening-screen .opening-orbit {
  display: none;
}
.opening-trace {
  display: none;
}
html[data-opening-variant="signal"] #opening-screen .opening-trace {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(310px, 78vw);
  height: min(310px, 78vw);
  border-radius: 50%;
  border: 1px solid #ffffff1a;
  box-shadow: 0 0 80px #ff54260b;
  opacity: 0.55;
  animation: opening-signal-trace 2s cubic-bezier(.16,1,.3,1) both;
}
html[data-opening-variant="signal"] #opening-screen .opening-trace:before,
html[data-opening-variant="signal"] #opening-screen .opening-trace:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid #ffffff14;
}
html[data-opening-variant="signal"] #opening-screen .opening-trace:before { inset: 50px; }
html[data-opening-variant="signal"] #opening-screen .opening-trace:after {
  inset: 102px;
  border-color: #ff542633;
  background: #ff542608;
}
.opening-signal {
  display: none;
}
html[data-opening-variant="signal"] #opening-screen .opening-signal {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 99px;
  opacity: 1;
  box-shadow: 0 0 10px currentColor, 0 0 34px currentColor;
  animation: opening-signal-node 2s cubic-bezier(.16,1,.3,1) both;
}
html[data-opening-variant="signal"] #opening-screen .opening-signal:after {
  position: absolute;
  left: 19px;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 9px;
  border-radius: 99px;
  background: #17171be8;
  color: #d8d5d1;
  box-shadow: inset 0 0 0 1px #ffffff14, 0 12px 30px #0009;
  font: 650 10px/1 -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: .06em;
  animation: opening-signal-label 2s cubic-bezier(.16,1,.3,1) both;
}
html[data-opening-variant="signal"] #opening-screen .s1 { color: #ff5426; --x: -105px; --y: -94px; }
html[data-opening-variant="signal"] #opening-screen .s2 { color: #3ed99b; --x: 112px; --y: -6px; }
html[data-opening-variant="signal"] #opening-screen .s3 { color: #f0b445; --x: -76px; --y: 108px; }
html[data-opening-variant="signal"] #opening-screen .s1:after { content: "TASKS"; }
html[data-opening-variant="signal"] #opening-screen .s2:after { content: "AGENDA"; }
html[data-opening-variant="signal"] #opening-screen .s3:after { content: "CAIXA"; }
html[data-opening-variant="signal"] #opening-screen .opening-lockup {
  position: absolute;
  left: 50%;
  top: 50%;
  animation: opening-signal-brand 2s cubic-bezier(.16,1,.3,1) both;
}
html[data-opening-variant="signal"] #opening-screen .opening-wordmark {
  animation: opening-signal-word 2s cubic-bezier(.16,1,.3,1) both;
}
@keyframes opening-signal-node {
  0% { opacity: .72; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.88); }
  20%, 44% { opacity: 1; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); }
  61% { opacity: 1; transform: translate(-50%, -50%) scale(.75); }
  72%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(4); }
}
@keyframes opening-signal-label {
  0%, 43% { opacity: 1; }
  53%, 100% { opacity: 0; }
}
@keyframes opening-signal-trace {
  0% { opacity: .45; transform: translate(-50%, -50%) scale(.82) rotate(-12deg); }
  26%, 48% { opacity: .8; transform: translate(-50%, -50%) scale(1) rotate(0); }
  68%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.34) rotate(18deg); }
}
@keyframes opening-signal-brand {
  0%, 51% { opacity: 0; filter: blur(9px); transform: translate(-50%, -50%) scale(.86); }
  70%, 100% { opacity: 1; filter: none; transform: translate(-50%, -50%) scale(1); }
}
@keyframes opening-signal-word {
  0%, 64% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(12px); }
  84%, 100% { opacity: 1; clip-path: inset(0); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .opening-aura, .opening-lockup, .opening-mark-wrap, .opening-wordmark,
  .opening-trace, .opening-signal, .opening-signal:after {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
  }
  html[data-opening-variant="signal"] #opening-screen .opening-trace,
  html[data-opening-variant="signal"] #opening-screen .opening-signal { display: none; }
  html[data-opening-variant="signal"] #opening-screen .opening-lockup {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  .opening-aura { transform: translate(-50%, -50%); }
  html[data-opening-variant="1a"] #opening-screen .opening-mark-wrap,
  html[data-opening-variant="1b"] #opening-screen .opening-mark-wrap,
  html[data-opening-variant="1c"] #opening-screen .opening-mark-wrap {
    transform: translateX(calc(-50% - var(--opening-side-shift)));
  }
  .opening-frame, .opening-orbit {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
    filter: none;
    clip-path: none;
  }
  #opening-screen, body.is-opening.opening-exit > :not(#opening-screen):not(script) { transition-duration: 1ms; }
  #opening-screen.is-exiting { transform: none; filter: none; }
  .overview-portal { transition: none; }
}
.hero-daily { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 18px 0; margin-top: 16px; border-top: 1px solid rgba(255,255,255,.15); color: #bdb9b5; font-size: 14px; }
.hero-daily strong { color: #fff; font-weight: 500; }
.hero-glance { display: none; }
#view-home[hidden], #view-dash[hidden] { display: none !important; }
#view-home .home-stream { height: 100%; }

/* O hero da home tem largura de cartaz. No amplo, uma frase curta sozinha
   deixava uma faixa vazia a direita; esta leitura rapida da coluna vizinha
   devolve proporcao e ancora o dia em tres fatos curtos. */
@media (min-width: 1080px) {
  #view-home .summary-hero-lede .summary-hero-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(32px, 5vw, 76px);
    max-width: none;
    width: 100%;
  }

  #view-home .summary-hero-lede .summary-hero-copy {
    grid-column: 1;
    grid-row: 1 / span 2;
    max-width: 640px;
  }

  #view-home .summary-hero-lede .summary-date {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    margin: 0;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--hero-line);
    text-align: right;
  }

  #view-home .summary-hero-lede .hero-glance {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    min-width: 0;
    min-height: 224px;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    padding-left: clamp(24px, 3vw, 48px);
    border-left: 1px solid var(--hero-line);
  }

  .hero-glance-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .hero-glance-k,
  .hero-glance-label { color: var(--hero-muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
  .hero-glance-meta { color: var(--hero-muted); font-size: 12px; }
  .hero-glance-rows { margin-top: 14px; border-top: 1px solid var(--hero-line); }
  .hero-glance-row { display: grid; grid-template-columns: 78px max-content minmax(0, 1fr); align-items: baseline; gap: 12px; min-width: 0; padding: 13px 0; border-bottom: 1px solid var(--hero-line); }
  .hero-glance-value { min-width: 0; color: var(--ink); font-size: clamp(1.1rem, 1.55vw, 1.45rem); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
  .hero-glance-row.late .hero-glance-value { color: var(--late); }
  .hero-glance-row.due .hero-glance-value { color: var(--due); }
  .hero-glance-detail { min-width: 0; overflow: hidden; color: var(--hero-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
}

/* Caixa: cada lente tem seu próprio fluxo, sem herdar a coluna do mês. */
body[data-view="financeiro"] #dash-body { display: block; }
body[data-view="financeiro"] #dash-body > .hero-finance { position: static; }
body[data-view="financeiro"] .dash-hdr { padding: 22px 28px; }
.finance-editor { border-top: 1px solid var(--line); padding-top: 8px; }
.finance-editor-title { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--brand-ink); }
.finance-cost-fields { grid-column: 1 / -1; display: grid; gap: 8px; }
.finance-cost-fields[hidden] { display: none; }
.finance-cost-head { color: var(--muted); font-size: 8.5px; font-weight: var(--w-bold); letter-spacing: .08em; text-transform: uppercase; }
.finance-cost-hint { color: var(--muted); font-size: 12px; line-height: 1.45; }
.finance-cost-lines { display: grid; gap: 8px; }
.finance-cost-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.finance-cost-row.is-named { grid-template-columns: minmax(110px, .9fr) minmax(0, 1.3fr) minmax(0, 1fr) 44px; }
.finance-cost-row [data-cost-label] { display: none; }
.finance-cost-row.is-named [data-cost-label] { display: block; }
.finance-cost-remove { width: 44px; height: 44px; min-height: 44px; border-radius: var(--r-sm); color: var(--late); background: var(--surface); border: 1px solid var(--line); font-size: 18px; line-height: 1; }
.finance-cost-add { justify-self: start; min-height: 44px; padding: 0 2px; color: var(--late); font-size: 13px; font-weight: var(--w-bold); background: none; border: 0; }
.finance-cost-net { margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.finance-cost-net b { color: var(--late); font-weight: 750; }
@media (max-width: 520px) {
  .finance-cost-row,
  .finance-cost-row.is-named { grid-template-columns: minmax(0, 1fr) 44px; }
  .finance-cost-row [data-cost-type],
  .finance-cost-row.is-named [data-cost-type],
  .finance-cost-row.is-named [data-cost-label],
  .finance-cost-row [data-cost-value] { grid-column: 1; }
  .finance-cost-remove { grid-column: 2; grid-row: 1; }
}
.finance-edit-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding: 16px 0; }
.finance-edit-form .edit-help, .finance-edit-form .edit-error, .finance-edit-form .finance-detail-actions { grid-column: 1 / -1; }
.edit-help { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; }
.edit-error { color: var(--late); font-size: 14px; margin: 0; }
.edit-error:empty { display: none; }
.finance-edit-form input, .finance-edit-form select { min-height: 44px; width: 100%; }
.finance-detail-actions button, .finance-detail-actions a { min-height: 44px; }
.finance-detail-card > header button { width: 44px; height: 44px; }
.finance-toolbar input { min-height: 44px; }
.finance-filters button { min-height: 44px; }
.finance-two-list { gap: 12px; margin: 18px 0; }
.finance-two-list .item { padding: 20px; }
.finance-two-list.is-compact { grid-template-columns: 1fr; gap: 0; }
.finance-two-list.is-compact .item { border-radius: 0; padding: 12px 16px; border-width: 0 0 1px; }
.finance-two-list.is-compact .item-meta { margin-top: 6px; }
.entry-layout { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--muted); font-size: 13px; }
.entry-layout button { min-height: 44px; }
.client-composition { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); }
.client-composition span { font-size: 12px; color: var(--muted); }
.client-composition b { display: block; font-weight: 500; color: var(--ink); font-size: 17px; margin-top: 5px; }
.client-composition .cash b { color: var(--cash); }
@media (min-width: 1080px) {
  body[data-view="financeiro"] .dash-hdr { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; border: 0; background: transparent; padding: 4px 0 24px; }
  body[data-view="financeiro"] .dash-hdr .back { grid-column: 1 / -1; }
  body[data-view="financeiro"] .dash-hdr #dash-lenses { grid-column: 2; grid-row: 2 / span 2; align-self: end; margin: 0; }
  body[data-view="financeiro"] #dash-body[data-finance-lens="mes"] { display: grid; grid-template-columns: minmax(320px,.9fr) minmax(0,1.3fr); gap: 24px; align-items: stretch; }
  body[data-view="financeiro"] #dash-body[data-finance-lens="mes"] > .hero-finance { grid-column: 1; padding: 24px; }
  body[data-view="financeiro"] #dash-body[data-finance-lens="mes"] > .cash-projection { grid-column: 2; align-self: start; margin: 0; height: fit-content; }
  body[data-view="financeiro"] #dash-body[data-finance-lens="mes"] > .finance-stage-wrap { grid-column: 1 / -1; margin-top: 0; }
  body[data-view="financeiro"] .hero-finance .hero-amount { font-size: 48px; margin-top: 20px; }
  body[data-view="financeiro"] .hero-finance .hero-kpis { margin-top: 20px; }
  body[data-view="financeiro"] .hero-finance .compose { margin-top: 24px; }
  body[data-view="financeiro"] .finance-year-grid { margin: 24px 0; }
}
@media (max-width: 420px) { .finance-edit-form { grid-template-columns: 1fr; } }
.note-brief { white-space: pre-wrap; }
.note-checklist { display: grid; gap: 4px; margin-top: 12px; }
.note-step { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink-2); font-size: 14px; cursor: pointer; }
.note-step input { width: 18px; height: 18px; accent-color: var(--brand); flex-shrink: 0; }
.note-step:has(input:checked) span { text-decoration: line-through; color: var(--muted); }
body[data-view="financeiro"] #view-dash { display: block; }
body[data-view="financeiro"] .dash-hdr { position: static; width: auto; margin-bottom: 24px; }
@media (min-width: 760px) and (max-width: 1079px) {
  body[data-view="financeiro"] #dash-lenses { display: flex; flex-wrap: wrap; gap: 8px; }
  body[data-view="financeiro"] #dash-lenses .lens { width: auto; min-width: 100px; }
}

/* Caixa · fechamento responsivo 2026-09-06
   A grade de tres colunas pertence ao conteudo interno do cartao. Aplicada
   ao cartao inteiro no mobile, ela zerava o nome e empurrava o valor para
   fora do viewport. A mesma faixa tambem fecha o contrato de toque de 44px. */
@media (max-width: 859px) {
  body[data-view="financeiro"] .finance-client-card {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-view="financeiro"] .finance-client-line,
  body[data-view="financeiro"] .client-composition {
    width: 100%;
  }

  body[data-view="financeiro"] .month-step,
  body[data-view="financeiro"] .finance-month-nav,
  body[data-view="financeiro"] #dash-lenses .lens,
  body[data-view="financeiro"] .item-meta .chip-btn {
    min-width: 44px;
    min-height: 44px;
  }

  body[data-view="financeiro"] .foot a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
}

/* ── 9. Cadência ─────────────────────────────────────────────────────────
   Três coisas moravam em camadas empilhadas por sessões diferentes e por
   isso saíam fracas na tela: o stepper do caixa, o headliner das dashes e
   o cartão do maior cliente. Aqui elas ganham forma final, uma vez só. */

/* ── 9.1 O stepper é a cadeia do dinheiro, não quatro pílulas ────────────
   O rótulo saía dentro de uma pílula clara porque o badge de contagem
   pegava todo `> span`; isso foi consertado na origem. O que sobra é a
   forma que o caixa original já tinha certa: nó numerado, trilho ligando
   os nós e o passo em foco acendendo o próprio tom. */

.finance-stepper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  overflow: visible;
  margin: 0;
  padding: 6px 0 2px;
  /* A máscara de borda existia para o scroll horizontal de pílulas. Agora o
     primeiro e o último passo encostam na borda, e ela os apagaria. */
  -webkit-mask-image: none;
  mask-image: none;
  counter-reset: passo;
}

.finance-stepper button {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 8px;
  min-height: 0;
  padding: 8px 6px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  text-align: center;
  counter-increment: passo;
}

/* O trilho sai do centro do passo anterior e morre antes deste nó. */
.finance-stepper button:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 21px;
  right: calc(50% + 19px);
  left: calc(-50% + 19px);
  height: 1.5px;
  border-radius: var(--r-pill);
  background: var(--line-2);
  transform: translateY(-50%);
  transition: background var(--t-base) var(--ease);
}

/* O trilho que chega no passo em foco vem aceso: a leitura tem direção. */
.finance-stepper button.active::before {
  background: linear-gradient(90deg, var(--line-2), color-mix(in srgb, var(--step, var(--brand)) 68%, transparent));
}

.finance-stepper button > i.step-dot {
  /* O layout largo prendia o ponto no canto do chip com `top`/`right`. Sem
     zerar isso o nó nasce 12px fora do eixo do próprio rótulo. */
  position: relative;
  top: auto;
  right: auto;
  z-index: 1;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--step, var(--muted)) 38%, var(--line-2));
  border-radius: 50%;
  background: color-mix(in srgb, var(--step, var(--muted)) 9%, var(--surface));
  color: color-mix(in srgb, var(--step, var(--muted)) 88%, var(--ink));
  font: var(--w-bold) 11px var(--sans);
  font-variant-numeric: tabular-nums;
  transition: transform var(--t-base) var(--spring), background var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.finance-stepper button > i.step-dot::before { content: counter(passo); }

.finance-stepper button:hover > i.step-dot {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--step, var(--muted)) 62%, transparent);
}

.finance-stepper button.active > i.step-dot {
  transform: scale(1.1);
  border-color: var(--step, var(--brand));
  /* O preenchimento é o tom puro e o número é a superfície: no escuro dá
     número preto sobre tom claro, no claro dá número branco sobre tom
     escuro. Um valor fixo aqui apagava o número no tema claro. */
  background: var(--step, var(--brand));
  color: var(--surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--step, var(--brand)) 15%, transparent),
    0 8px 20px -10px color-mix(in srgb, var(--step, var(--brand)) 75%, transparent);
}

/* O passo em foco não precisa de caixa: o nó e o tom já dizem onde estamos. */
.finance-stepper button.active,
.finance-stepper button:hover { border: 0; background: none; box-shadow: none; }

.finance-stepper button > .step-label {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: var(--w-semibold);
  letter-spacing: -0.015em;
  transition: color var(--t-base) var(--ease);
}
.finance-stepper button.active > .step-label { color: var(--ink); }

.finance-stepper button > .step-meta {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.finance-stepper button.active > .step-meta { color: color-mix(in srgb, var(--step, var(--brand)) 80%, var(--ink)); }

/* Tom por passo: o mesmo mapa do resto do caixa, agora também no nó. */
.finance-stepper button[data-tone="due"] { --step: var(--due); }
.finance-stepper button[data-tone="future"] { --step: var(--future); }
.finance-stepper button[data-tone="cash"] { --step: var(--cash); }
.finance-stepper button[data-tone="cost"] { --step: var(--cost); }

@media (prefers-reduced-motion: reduce) {
  .finance-stepper button.active > i.step-dot { transform: none; }
}

/* Onde o stepper aparece, o contador do carrossel é a mesma informação dita
   de novo e pior: os quatro números já estão na tela. Fica só a frase. */
@media (min-width: 900px) {
  .finance-stage-wrap > .deck-nav { justify-content: center; margin-top: -6px; }
  .finance-stage-wrap > .deck-nav .deck-now { justify-items: center; text-align: center; }
  .finance-stage-wrap > .deck-nav .deck-now > span { display: none; }
  .finance-stage-wrap > .deck-nav .deck-now > small { color: var(--muted); font-size: 11px; }
}

/* ── 9.2 O headliner das dashes ──────────────────────────────────────────
   `.finance-total-row` é a manchete de três dashes ao mesmo tempo, clientes,
   lançamentos e competência, e nas três era um número solto encostado numa
   linha fina: sem rótulo dizendo o que era, sem tom, do mesmo peso do
   subtítulo ao lado. Uma correção só endireita as três. */

.finance-total-row {
  position: relative;
  display: grid;
  grid-template-areas: "kicker meta" "valor meta";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 3px 16px;
  padding: 6px 0 15px;
  border-bottom: 0;
}

/* O filete herda o tom do número e some no vazio: é régua e é etiqueta. */
.finance-total-row::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.5px;
  border-radius: var(--r-pill);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--tone-ink, var(--brand)) 78%, transparent) 0,
    color-mix(in srgb, var(--tone-ink, var(--brand)) 16%, transparent) 22%,
    var(--line) 58%
  );
}

.finance-total-row > small {
  grid-area: kicker;
  color: color-mix(in srgb, var(--tone-ink, var(--brand)) 74%, var(--muted));
  font-size: 9px;
  font-weight: var(--w-heavy);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.finance-total-row > strong {
  grid-area: valor;
  color: var(--ink);
  font: 750 clamp(28px, 3.4vw, 40px) var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.finance-total-row > span {
  grid-area: meta;
  align-self: end;
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--w-medium);
  text-align: right;
}

.finance-total-row[data-tone="cash"] { --tone-ink: var(--cash); }
.finance-total-row[data-tone="due"] { --tone-ink: var(--due); }
.finance-total-row[data-tone="late"] { --tone-ink: var(--late); }
.finance-total-row[data-tone="future"] { --tone-ink: var(--future); }

/* O total do portal do caixa é o mesmo headliner, com o tom que o próprio
   portal já carrega em `--tone`. Uma forma, quatro lugares. */
.stage-ledger {
  --tone-ink: var(--tone, var(--brand));
  position: relative;
  display: grid;
  grid-template-areas: "kicker meta" "valor meta";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 3px 16px;
  padding: 2px 0 13px;
}
.stage-ledger::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.5px;
  border-radius: var(--r-pill);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--tone-ink) 78%, transparent) 0,
    color-mix(in srgb, var(--tone-ink) 16%, transparent) 22%,
    var(--line) 58%
  );
}
.stage-ledger > small {
  grid-area: kicker;
  color: color-mix(in srgb, var(--tone-ink) 74%, var(--muted));
  font-size: 9px;
  font-weight: var(--w-heavy);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.stage-ledger > strong {
  grid-area: valor;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.stage-ledger > span { grid-area: meta; align-self: end; font-size: 11px; }

/* ── 9.3 O maior cliente é manchete, não o primeiro item da lista ────────
   O cartão do topo tinha halo e pouco mais: nome de 16px, faixa de 3px e a
   mesma silhueta dos outros. Quem paga 42% da conta merece ser lido antes
   de qualquer coisa na dobra. */

.finance-client-card.faixa-lead {
  gap: 15px;
  padding: 22px 22px 20px;
  border-color: color-mix(in srgb, var(--cash) 28%, var(--line));
  background:
    radial-gradient(120% 190% at 0% 0%, color-mix(in srgb, var(--cash) 12%, transparent), transparent 56%),
    radial-gradient(90% 150% at 100% 0%, var(--cash-glow), transparent 64%),
    var(--surface);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent),
    0 20px 46px -32px color-mix(in srgb, var(--cash) 62%, transparent),
    var(--shadow-sm);
}

/* Um filete do tom na borda: o cartão passa a ter lado de leitura. */
.finance-client-card.faixa-lead::before {
  content: "";
  position: absolute;
  /* Recuado das pontas: no raio do cartão o filete de borda a borda some
     nos cantos e vira sujeira em vez de marca. */
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 3px;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: linear-gradient(180deg, var(--cash), color-mix(in srgb, var(--cash) 20%, transparent));
}

.finance-client-card.faixa-lead .finance-client-kicker {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid color-mix(in srgb, var(--cash) 32%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--cash) 11%, transparent);
  letter-spacing: 0.14em;
}
.finance-client-card.faixa-lead .finance-client-kicker::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cash);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cash) 22%, transparent);
}

.finance-client-card.faixa-lead .finance-client-avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  font-size: 15px;
}
.finance-client-card.faixa-lead .finance-client-copy { gap: 5px; }
.finance-client-card.faixa-lead .finance-client-copy strong {
  font-size: clamp(19px, 2.1vw, 25px);
  font-weight: var(--w-bold);
  letter-spacing: -0.035em;
}
.finance-client-card.faixa-lead .finance-client-copy small { color: var(--muted); font-size: 11.5px; }
.finance-client-card.faixa-lead .finance-client-rank { width: 20px; font-size: 12px; }
.finance-client-card.faixa-lead .finance-client-side > strong {
  font-size: clamp(26px, 3.1vw, 38px);
  font-weight: 750;
  letter-spacing: -0.045em;
}
.finance-client-card.faixa-lead .finance-client-side > small { font-size: 10.5px; }
.finance-client-card.faixa-lead .finance-client-share { height: 5px; }
.finance-client-card.faixa-lead .client-composition b { font-size: 20px; letter-spacing: -0.03em; }

/* O segundo e o terceiro não são manchete, mas também não são cauda. */
.finance-client-card.faixa-mid { padding: 16px; }
.finance-client-card.faixa-mid .finance-client-copy strong { font-size: 14.5px; letter-spacing: -0.02em; }
.finance-client-card.faixa-mid .finance-client-side > strong { font-size: clamp(16px, 1.7vw, 19px); letter-spacing: -0.03em; }

/* ── 9.4 O subherói fica um degrau abaixo do herói, não do lado dele ──── */
.finance-title-row > div > strong {
  font-size: 19px;
  font-weight: var(--w-bold);
  letter-spacing: -0.035em;
  text-transform: lowercase;
}
.finance-title-row > div > span { color: var(--muted); font-size: 11px; }

/* ==========================================================================
   Agenda hinge A · AFTER hero anatomy (must win cascade)
   hoje | switch↕ | amanhã — sem stretch, facts em 3 colunas, SF Pro
   ========================================================================== */

/* Switch fica acima (fluxo normal). Aqui só o par de heróis. */
.agenda-hero-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-family: var(--sans);
}

.agenda-hero-band > .hero-agenda,
.agenda-hero-band > .hero-agenda.hero,
.agenda-hero-band > .hero.hero-agenda {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: start;
  gap: var(--s2);
  height: auto;
  min-height: 0;
  min-width: 0;
  font-family: var(--sans);
}

.agenda-hero-band > .hero-agenda .hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
  padding-top: var(--s2);
}

.agenda-hero-band > .hero-agenda .hero-actions {
  margin-top: 0;
}

@media (max-width: 859px) {
  .agenda-hero-band {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}