/* ==========================================================================
   Kabine — mocks da interface em HTML
   Substituem os prints nas 5 linhas de funcionalidade e no hero.

   Escala: o container declara container-type e o mock define a base em cqw,
   com TODO tamanho interno em em. Assim o mock guarda proporção de tela real
   e acompanha o slot sozinho, sem JS e sem transform: scale().

   Cores: literais, não tokens semânticos do site. O app tem paleta própria e
   o mock precisa parecer o app mesmo quando está dentro de uma seção escura.

   Raio por papel, não um raio para tudo: chip é pílula, campo é .4em, card é
   .6em, painel é .8em e a folha A4 é quase reta. Sombra só no que de fato
   flutua — card arrastado, popover, folha impressa —, nunca em toda caixa.
   ========================================================================== */

.mock-wrap {
  container-type: inline-size;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: #FFFFFF;
}

.mock {
  --mk-bg:      #FFFFFF;
  --mk-side:    #FBFBFC;
  --mk-line:    #E5E5E8;
  --mk-line-2:  #F1F1F3;
  --mk-ink:     #18181B;
  /* Mais escuros que os do app real: aqui o texto renderiza a 7-9px, e no
     cinza original o mock saía lavado em vez de parecer um print nítido. */
  --mk-mut:     #5F5F68;
  --mk-faint:   #86868F;
  --mk-fill:    #F4F4F5;
  --mk-red:     #D90600;
  --mk-green:   #10864F;
  --mk-amber:   #B0730E;   /* vencimento: nem alarme nem confirmação */
  --mk-blue:    #41556B;   /* consignado, contato: estado neutro e frio */

  --mk-r-chip:  999px;
  --mk-r-field: .4em;
  --mk-r:       .6em;      /* card */
  --mk-r-panel: .8em;

  /* px é o fallback para navegador sem container query; cqw manda quando há. */
  font-size: 10px;
  font-size: 1.5cqw;

  display: flex;
  width: 100%;
  height: 100%;
  background: var(--mk-bg);
  font-family: var(--font-body);
  line-height: 1.35;
  color: var(--mk-ink);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

/* Ícone: herda cor e tamanho de quem o contém, como um glifo. */
.mk-ico {
  width: 1em;
  height: 1em;
  flex: none;
  display: block;
}

/* Avatar com iniciais. Substitui a bolinha cinza: duas letras já dizem que
   ali mora uma pessoa, e é o que o app real mostra antes da foto subir. */
.mk-av {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: var(--mk-ink);
  color: #fff;
  font-size: .72em;
  font-weight: 600;
  letter-spacing: .01em;
}

.mk-av--red   { background: var(--mk-red); }
.mk-av--blue  { background: var(--mk-blue); }
.mk-av--green { background: var(--mk-green); }

/* ------------------------------------------------------------------ SIDEBAR */

.mk-side {
  flex: none;
  width: 18%;
  background: var(--mk-side);
  border-right: 1px solid var(--mk-line);
  padding: 1em .7em;
  display: flex;
  flex-direction: column;
  gap: 1.15em;
  overflow: hidden;
}

.mk-brand { display: flex; align-items: center; gap: .5em; padding: 0 .3em; }
.mk-brand i { width: 1.7em; height: 1.7em; border-radius: .38em; background: var(--mk-red); flex: none; }
.mk-brand b { font-family: var(--font-display); font-size: 1.05em; font-weight: 700; letter-spacing: -.02em; }
.mk-brand s { display: block; font-size: .72em; color: var(--mk-faint); text-decoration: none; }

.mk-grp {
  font-size: .7em;
  color: var(--mk-faint);
  margin: 0 0 .45em .55em;
}

.mk-nav { display: flex; flex-direction: column; gap: .1em; }

.mk-nav li {
  display: flex;
  align-items: center;
  gap: .55em;
  padding: .42em .55em;
  border-radius: var(--mk-r-field);
  font-size: .9em;
  color: var(--mk-mut);
}

.mk-nav li .mk-ico { width: 1.05em; height: 1.05em; opacity: .75; }
.mk-nav li.is-on { background: #EDEDEF; color: var(--mk-ink); font-weight: 500; }
.mk-nav li.is-on .mk-ico { opacity: 1; }

/* Contador de pendência na lateral: é o detalhe que faz o menu parecer vivo
   em vez de um menu de captura de tela vazia. */
.mk-nav li b {
  margin-left: auto;
  font-size: .78em;
  font-weight: 600;
  color: #fff;
  background: var(--mk-red);
  border-radius: var(--mk-r-chip);
  padding: 0 .45em;
  line-height: 1.5;
}

.mk-user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .7em .35em 0;
  border-top: 1px solid var(--mk-line);
  min-width: 0;
}

.mk-user div { min-width: 0; }
.mk-user b { display: block; font-size: .82em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-user s { display: block; font-size: .72em; color: var(--mk-faint); text-decoration: none; }
.mk-user .mk-ico { margin-left: auto; width: .9em; height: .9em; color: var(--mk-faint); }

/* --------------------------------------------------------------------- MAIN */

.mk-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.mk-top {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: .85em 1.3em;
  border-bottom: 1px solid var(--mk-line-2);
}

.mk-top > .mk-ttl { flex: 1; min-width: 0; }

.mk-crumb { display: flex; align-items: center; gap: .3em; font-size: .78em; color: var(--mk-faint); margin-bottom: .15em; }
.mk-crumb .mk-ico { width: .8em; height: .8em; }

.mk-h { font-family: var(--font-display); font-size: 1.5em; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.mk-sub { font-size: .85em; color: var(--mk-mut); margin-top: .1em; }

/* Busca: o campo mais reconhecível de qualquer sistema de gestão. */
.mk-search {
  flex: none;
  width: 30%;
  display: flex;
  align-items: center;
  gap: .45em;
  padding: .45em .7em;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-r-field);
  background: #fff;
  font-size: .85em;
  color: var(--mk-faint);
  white-space: nowrap;
  overflow: hidden;
}

.mk-search .mk-ico { width: .95em; height: .95em; }
.mk-search u { margin-left: auto; text-decoration: none; font-size: .85em; border: 1px solid var(--mk-line); border-radius: .25em; padding: 0 .3em; }

.mk-icobtn {
  flex: none;
  position: relative;
  display: grid;
  place-items: center;
  width: 1.95em;
  height: 1.95em;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-r-field);
  color: var(--mk-mut);
  background: #fff;
}

.mk-icobtn .mk-ico { width: 1em; height: 1em; }
.mk-icobtn.has-dot::after {
  content: "";
  position: absolute;
  top: .25em;
  right: .25em;
  width: .42em;
  height: .42em;
  border-radius: 50%;
  background: var(--mk-red);
  box-shadow: 0 0 0 .13em #fff;
}

.mk-btn {
  flex: none;
  display: flex;
  align-items: center;
  gap: .3em;
  padding: .5em .9em;
  border-radius: var(--mk-r-field);
  background: var(--mk-red);
  color: #fff;
  font-size: .85em;
  font-weight: 600;
  white-space: nowrap;
}

.mk-btn .mk-ico { width: .95em; height: .95em; }
.mk-btn--ghost { background: #fff; color: var(--mk-ink); border: 1px solid var(--mk-line); }

.mk-body { flex: 1; padding: 1em 1.3em; display: flex; flex-direction: column; gap: .9em; min-height: 0; }

.mk-tabs { display: flex; gap: .15em; border-bottom: 1px solid var(--mk-line-2); margin-bottom: -.2em; }
.mk-tabs span { padding: .35em .75em .5em; font-size: .85em; color: var(--mk-mut); border-bottom: 2px solid transparent; }
.mk-tabs span.is-on { color: var(--mk-ink); font-weight: 600; border-bottom-color: var(--mk-red); }

/* Barra de filtros: chips de estado + ordenação à direita. */
.mk-filters { display: flex; align-items: center; gap: .35em; font-size: .82em; }
.mk-chip {
  display: flex;
  align-items: center;
  gap: .3em;
  padding: .28em .65em;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-r-chip);
  color: var(--mk-mut);
  background: #fff;
  white-space: nowrap;
}
.mk-chip .mk-ico { width: .9em; height: .9em; }
.mk-chip.is-on { background: var(--mk-ink); border-color: var(--mk-ink); color: #fff; font-weight: 500; }
.mk-chip--right { margin-left: auto; }

/* ------------------------------------------------------------------- CARDS */

.mk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7em; }
.mk-kpis--3 { grid-template-columns: repeat(3, 1fr); }

.mk-kpi {
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-r);
  padding: .75em .85em;
  display: flex;
  flex-direction: column;
  gap: .45em;
}

.mk-kpi header { display: flex; align-items: center; gap: .4em; color: var(--mk-mut); font-size: .8em; }
.mk-kpi header .mk-ico { width: .95em; height: .95em; color: var(--mk-faint); }
.mk-kpi footer { display: flex; align-items: baseline; gap: .45em; }
.mk-kpi b { font-family: var(--font-display); font-size: 1.85em; font-weight: 700; line-height: 1; letter-spacing: -.025em; }
.mk-kpi b.up { color: var(--mk-green); }
.mk-kpi b.down { color: var(--mk-red); }

/* Delta: seta + número. Sem ele o KPI é um número sem juízo de valor. */
.mk-delta { font-size: .78em; font-weight: 600; color: var(--mk-green); white-space: nowrap; }
.mk-delta--down { color: var(--mk-red); }
.mk-delta--flat { color: var(--mk-faint); font-weight: 500; }

/* ------------------------------------------------------------------ TABELA */

.mk-tbl { flex: 1; display: flex; flex-direction: column; font-size: .88em; min-height: 0; }
.mk-tr { display: grid; align-items: center; gap: .8em; padding: .5em .5em; border-bottom: 1px solid var(--mk-line-2); border-radius: var(--mk-r-field); }
.mk-tr--head { color: var(--mk-faint); font-size: .82em; padding-bottom: .35em; padding-top: 0; }
.mk-tr--head b { font-weight: 500; }
/* Uma linha sob o cursor. O app real destaca a linha apontada, e o mock
   perde verossimilhança se todas estiverem no mesmo estado. */
.mk-tr.is-hover { background: #FAFAFA; border-bottom-color: transparent; }

.mk-car { display: flex; align-items: center; gap: .6em; min-width: 0; }
.mk-car i {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.9em;
  height: 2.1em;
  border-radius: .35em;
  background: linear-gradient(165deg, #DCE2E8 0%, #BEC7D1 60%, #A7B1BC 100%);
  color: rgb(255 255 255 / .9);
  flex: none;
  overflow: hidden;
}
/* Reflexo diagonal: dá volume de foto ao retângulo e evita o ar de imagem
   quebrada que um degradê chapado tem. */
.mk-car i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / .3) 46%, transparent 56%);
}
/* A silhueta fica acima do reflexo, senão o brilho corta o carro ao meio. */
.mk-car i .mk-ico { position: relative; z-index: 1; width: 1.8em; height: 1.8em; }
.mk-car b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-car s { display: flex; align-items: center; gap: .3em; font-size: .8em; color: var(--mk-faint); text-decoration: none; }

/* Placa no padrão Mercosul: tarja azul em cima e letra espaçada. É o detalhe
   que um lojista reconhece de longe. */
.mk-plate {
  display: inline-block;
  font-family: var(--font-data);
  font-weight: 600;
  letter-spacing: .08em;
  font-size: .95em;
  line-height: 1.5;
  padding: 0 .35em;
  border: 1px solid #C9CDD4;
  border-radius: .2em;
  border-top: .32em solid #1D4D9F;
  background: #fff;
  color: var(--mk-ink);
}

.mk-num { text-align: right; white-space: nowrap; }
.mk-num.strong { font-weight: 600; }
.mk-num s { display: block; font-size: .8em; color: var(--mk-faint); text-decoration: none; font-weight: 400; }

.mk-badge {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: .35em;
  padding: .2em .6em;
  border-radius: var(--mk-r-chip);
  background: var(--mk-fill);
  font-size: .82em;
  color: var(--mk-mut);
  white-space: nowrap;
}
.mk-badge::before { content: ""; width: .4em; height: .4em; border-radius: 50%; background: currentColor; flex: none; }
.mk-badge--ok    { background: #E7F5EE; color: var(--mk-green); }
.mk-badge--warn  { background: #FBF2E2; color: var(--mk-amber); }
.mk-badge--cold  { background: #EDF1F5; color: var(--mk-blue); }

.mk-tgl { width: 2em; height: 1.1em; border-radius: var(--mk-r-chip); background: #D8D8DC; position: relative; justify-self: center; flex: none; }
.mk-tgl::after { content: ""; position: absolute; top: .15em; left: .15em; width: .8em; height: .8em; border-radius: 50%; background: #fff; box-shadow: 0 .05em .15em rgb(0 0 0 / .2); }
.mk-tgl.is-on { background: var(--mk-red); }
.mk-tgl.is-on::after { left: auto; right: .15em; }

.mk-kebab { justify-self: end; color: #B6B6BD; }
.mk-kebab .mk-ico { width: .95em; height: .95em; }

/* Rodapé de tabela: contagem à esquerda, paginação à direita. */
.mk-foot {
  margin-top: auto;
  padding-top: .7em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .8em;
  color: var(--mk-faint);
}
.mk-pager { display: flex; align-items: center; gap: .3em; }
.mk-pager span {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid var(--mk-line);
  border-radius: .3em;
  color: var(--mk-mut);
}
.mk-pager span.is-on { background: var(--mk-ink); border-color: var(--mk-ink); color: #fff; font-weight: 600; }
.mk-pager .mk-ico { width: .85em; height: .85em; }

/* ============================================================ 1 — ESTOQUE */

.mock--estoque .mk-tr { grid-template-columns: 2.5fr 1fr 1fr 1.05fr .6fr 1.2em; }

/* ============================================== 2 — CADASTRO PELA PLACA */

.mk-steps { display: flex; align-items: center; gap: .45em; }
.mk-steps span { display: flex; align-items: center; gap: .4em; font-size: .82em; color: var(--mk-faint); white-space: nowrap; }
.mk-steps span i {
  font-style: normal;   /* <i> é o marcador do passo, não ênfase */
  width: 1.4em; height: 1.4em; border-radius: 50%;
  border: 1px solid var(--mk-line); display: grid; place-items: center;
  font-size: .85em; font-weight: 600;
}
.mk-steps span i .mk-ico { width: .8em; height: .8em; }
.mk-steps span.is-on { color: var(--mk-ink); font-weight: 600; }
.mk-steps span.is-on i { background: var(--mk-red); border-color: var(--mk-red); color: #fff; }
.mk-steps hr { flex: 1; height: 1px; border: 0; background: var(--mk-line); }

.mk-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em .9em; }
.mk-f { display: flex; flex-direction: column; gap: .25em; min-width: 0; }
.mk-f small { display: flex; align-items: center; gap: .3em; font-size: .78em; color: var(--mk-mut); }
.mk-f small .mk-ico { width: .8em; height: .8em; color: var(--mk-faint); }
.mk-f div {
  display: flex;
  align-items: center;
  gap: .4em;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-r-field);
  padding: .45em .6em;
  font-size: .9em;
  background: #fff;
  white-space: nowrap;
  overflow: hidden;
}
.mk-f div .mk-ico { margin-left: auto; width: .85em; height: .85em; color: #B6B6BD; }
.mk-f--wide { grid-column: span 2; }

/* Campo da placa: foco real, com anel e cursor piscando parado no fim. */
.mk-f--plate div {
  border-color: var(--mk-red);
  box-shadow: 0 0 0 .18em rgb(217 6 0 / .12);
  font-family: var(--font-data);
  font-weight: 600;
  letter-spacing: .1em;
}
.mk-f--plate div::after {
  content: "";
  width: 1px;
  height: 1.1em;
  margin-left: -.2em;
  background: var(--mk-ink);
}
/* Preenchido pela consulta: fundo apagado + cadeado. O contraste com o campo
   da placa é o argumento inteiro da funcionalidade. */
.mk-f--auto div { background: var(--mk-fill); color: var(--mk-mut); border-color: var(--mk-line-2); }

.mk-hint {
  display: flex;
  align-items: center;
  gap: .35em;
  font-size: .8em;
  font-weight: 500;
  color: var(--mk-green);
  background: #E7F5EE;
  border-radius: var(--mk-r-chip);
  padding: .22em .65em;
  align-self: flex-start;
}
.mk-hint .mk-ico { width: .85em; height: .85em; }

/* Valores consultados: destaque de painel, não de campo. */
.mk-vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; }
.mk-val { border: 1px solid var(--mk-line); border-radius: var(--mk-r); padding: .6em .75em; display: flex; flex-direction: column; gap: .15em; }
.mk-val small { display: flex; align-items: center; gap: .3em; font-size: .78em; color: var(--mk-mut); }
.mk-val small .mk-ico { width: .8em; height: .8em; color: var(--mk-faint); }
.mk-val b { font-family: var(--font-display); font-size: 1.35em; font-weight: 700; letter-spacing: -.02em; }
.mk-val u { font-size: .75em; color: var(--mk-faint); text-decoration: none; }

/* Opcionais: nuvem de chips, com o resto contado no fim. */
.mk-opts { display: flex; flex-wrap: wrap; gap: .35em; }
.mk-opts span {
  display: flex; align-items: center; gap: .3em;
  font-size: .8em; color: var(--mk-mut);
  border: 1px solid var(--mk-line); border-radius: var(--mk-r-chip);
  padding: .2em .6em;
}
.mk-opts span .mk-ico { width: .8em; height: .8em; color: var(--mk-green); }
.mk-opts span.more { color: var(--mk-faint); border-style: dashed; }

/* Barra de ação do assistente, colada no rodapé da tela.
   Nome próprio e não .mk-bar: a barra do gráfico de caixa já usa esse. */
.mk-actions {
  margin-top: auto;
  margin-left: -1.3em;
  margin-right: -1.3em;
  margin-bottom: -1em;
  padding: .75em 1.3em;
  border-top: 1px solid var(--mk-line-2);
  background: #FCFCFD;
  display: flex;
  align-items: center;
  gap: .6em;
}
.mk-actions small { font-size: .8em; color: var(--mk-faint); }
.mk-actions .mk-btn:first-of-type { margin-left: auto; }

/* ================================================= 3 — CUSTOS DO VEÍCULO */

.mk-split { flex: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 1em; min-height: 0; }

.mk-rows { display: flex; flex-direction: column; font-size: .88em; }
.mk-rows > div {
  display: grid;
  grid-template-columns: 1.7em 1fr auto;
  align-items: center;
  gap: .65em;
  padding: .5em .15em;
  border-bottom: 1px solid var(--mk-line-2);
}
.mk-rows .ico {
  display: grid; place-items: center;
  width: 1.7em; height: 1.7em;
  border-radius: var(--mk-r-field);
  background: var(--mk-fill);
  color: var(--mk-mut);
}
.mk-rows .ico .mk-ico { width: .95em; height: .95em; }
.mk-rows b { display: block; font-weight: 600; }
.mk-rows small { display: flex; align-items: center; gap: .3em; font-size: .82em; color: var(--mk-faint); }
.mk-rows small .mk-ico { width: .8em; height: .8em; }
.mk-rows .val { text-align: right; font-weight: 600; }
.mk-rows .val s { display: block; font-size: .8em; font-weight: 400; color: var(--mk-faint); text-decoration: none; }

/* Coluna da direita: resultado em cima, anexos embaixo. */
.mk-aside { display: flex; flex-direction: column; gap: .7em; min-height: 0; }

/* Linha de novo lançamento: tracejada, como todo "adicionar" de tabela. */
.mk-add {
  display: flex !important;
  align-items: center;
  gap: .4em;
  grid-template-columns: none !important;
  margin-top: .45em;
  padding: .45em .6em !important;
  border: 1px dashed #D2D2D7 !important;
  border-radius: var(--mk-r-field);
  color: var(--mk-mut);
  font-size: .92em;
}
.mk-add .mk-ico { width: .9em; height: .9em; }

/* Anexos: o comprovante é o que transforma "custo anotado" em custo provado. */
.mk-docs {
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-r-panel);
  padding: .75em .85em;
  display: flex;
  flex-direction: column;
  gap: .4em;
  font-size: .85em;
  min-height: 0;
}
.mk-docs > small { font-size: .85em; color: var(--mk-faint); }
.mk-docs div { display: flex; align-items: center; gap: .45em; color: var(--mk-mut); min-width: 0; }
.mk-docs div > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-docs div .mk-ico { width: .95em; height: .95em; color: var(--mk-faint); }
.mk-docs s { margin-left: auto; white-space: nowrap; text-decoration: none; color: var(--mk-faint); font-size: .9em; }

/* Painel de resultado: o número que o lojista veio procurar. */
.mk-sum {
  flex: none;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-r-panel);
  padding: .85em .9em;
  display: flex;
  flex-direction: column;
  gap: .45em;
  font-size: .88em;
  align-self: start;
}
.mk-sum > small { font-size: .82em; color: var(--mk-faint); }
.mk-sum div { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; color: var(--mk-mut); }
.mk-sum div > span { white-space: nowrap; }
.mk-sum div span:last-child { color: var(--mk-ink); }
.mk-sum div.neg span:last-child { color: var(--mk-red); }
.mk-sum div.total {
  border-top: 1px solid var(--mk-line);
  padding-top: .55em;
  margin-top: .2em;
  color: var(--mk-ink);
  font-weight: 600;
}
.mk-sum div.total b { font-family: var(--font-display); font-size: 1.3em; letter-spacing: -.02em; }
.mk-sum div.total b.up { color: var(--mk-green); }
.mk-sum .marg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #E7F5EE;
  color: var(--mk-green);
  border-radius: var(--mk-r-field);
  padding: .35em .55em;
  font-size: .85em;
  font-weight: 600;
}

/* ==================================================== 4 — CONTRATO EM A4 */

.mock--contrato { background: #E9EAEC; }
.mock--contrato .mk-main { padding: 1.1em 1.1em 0; align-items: center; }

/* Barra de impressão acima da folha: o contexto que diz "isto vai sair
   impresso", sem precisar escrever isso em lugar nenhum. */
.mk-print {
  width: 80%;
  display: flex;
  align-items: center;
  gap: .5em;
  margin-bottom: .7em;
  font-size: .85em;
  color: var(--mk-mut);
}
.mk-print .mk-ico { width: 1em; height: 1em; }
.mk-print .mk-chip { background: #fff; }
.mk-print .sep { margin-left: auto; }

.mk-sheet {
  width: 80%;
  background: #fff;
  border-radius: .2em;
  box-shadow: 0 .2em 1.2em rgb(0 0 0 / .16);
  padding: 1.4em 1.8em;
  display: flex;
  flex-direction: column;
  gap: .8em;
  flex: 1;
  font-size: .95em;
}

.mk-sheet header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--mk-line); padding-bottom: .6em; }
.mk-sheet header b { font-family: var(--font-display); font-size: .95em; }
.mk-sheet header s { display: block; font-size: .72em; color: var(--mk-faint); text-decoration: none; }
.mk-sheet .mk-titulo { font-family: var(--font-display); font-size: 1em; font-weight: 700; text-align: center; letter-spacing: .01em; }

/* Partes do contrato: rótulo pequeno + valor, em duas colunas. Substitui as
   barras cinzas de esqueleto por informação que se lê. */
.mk-parts { display: grid; grid-template-columns: 1fr 1fr; gap: .6em 1.4em; font-size: .78em; }
.mk-part { display: flex; flex-direction: column; gap: .2em; }
.mk-part > small { font-size: .88em; font-weight: 600; color: var(--mk-mut); }
.mk-part p { display: flex; justify-content: space-between; gap: .8em; color: var(--mk-faint); border-bottom: 1px dotted #D6D6DA; padding-bottom: .12em; }
.mk-part p b { color: var(--mk-ink); font-weight: 500; }

.mk-lines { display: flex; flex-direction: column; gap: .4em; }
.mk-lines span { height: .38em; border-radius: .19em; background: #E7E8EB; }
.mk-lines span:nth-child(3n) { width: 88%; }
.mk-lines span:nth-child(5n) { width: 72%; }

/* Só a cláusula de garantia é emoldurada — é a que a loja configura no
   Kabine. As outras são parágrafo comum, como em contrato de verdade. */
.mk-clause { display: flex; flex-direction: column; gap: .35em; }
.mk-clause--box { border: 1px solid var(--mk-line); border-radius: .25em; padding: .55em .7em; background: #FCFCFD; }
.mk-clause small { font-size: .78em; color: var(--mk-mut); font-weight: 600; }

.mk-sign { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2em; padding-top: 1.2em; }
.mk-sign div { border-top: 1px solid var(--mk-ink); padding-top: .25em; font-size: .72em; color: var(--mk-mut); text-align: center; }
.mk-sheet > .pg { text-align: center; font-size: .68em; color: var(--mk-faint); }

/* ================================================= 5 — FLUXO DE CAIXA */

.mk-legend { display: flex; justify-content: space-between; font-size: .8em; color: var(--mk-faint); margin-bottom: -.4em; }

/* Grade do gráfico desenhada no fundo: quatro linhas horizontais, como em
   qualquer relatório financeiro. Sem o teto de altura o gráfico come o mock. */
.mk-graph { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: .5em; min-height: 0; max-height: 52%; }

.mk-yaxis { display: flex; flex-direction: column; justify-content: space-between; font-size: .72em; color: var(--mk-faint); text-align: right; padding-bottom: 1.2em; }

.mk-chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: .8em;
  padding-bottom: 1.2em;
  background-image: repeating-linear-gradient(to top, var(--mk-line-2) 0 1px, transparent 1px 33.333%);
  background-position: 0 -1.2em;
  background-size: 100% calc(100% - 1.2em);
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--mk-line);
  min-height: 0;
}

.mk-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.mk-bar i { width: 62%; border-radius: .2em .2em 0 0; background: var(--mk-red); opacity: .8; }
.mk-bar small { position: absolute; bottom: -1.2em; font-size: .75em; color: var(--mk-faint); }
.mk-bar.is-on i { opacity: 1; }
.mk-bar.is-on small { color: var(--mk-ink); font-weight: 600; }

/* Tooltip do mês apontado: prova que o gráfico é consultável. */
/* No fluxo e não absoluto: assim ele encosta no topo da barra, que muda de
   altura, em vez de flutuar no topo da área do gráfico. */
.mk-tip {
  position: relative;
  align-self: center;
  width: max-content;
  margin-bottom: .4em;
  background: var(--mk-ink);
  color: #fff;
  border-radius: .3em;
  padding: .3em .5em;
  font-size: .72em;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 .3em .8em rgb(0 0 0 / .18);
}
.mk-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -.25em;
  border: .25em solid transparent;
  border-top-color: var(--mk-ink);
}

.mk-alerts { margin-top: auto; display: flex; flex-direction: column; gap: .35em; font-size: .85em; }
.mk-alerts > small { font-size: .85em; color: var(--mk-faint); }
.mk-alerts > div > div { min-width: 0; }
.mk-alerts > div {
  display: flex;
  align-items: center;
  gap: .55em;
  padding: .45em .65em;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-r-field);
}
.mk-alerts .ico { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: var(--mk-r-field); background: var(--mk-fill); color: var(--mk-mut); flex: none; }
.mk-alerts .ico .mk-ico { width: .9em; height: .9em; }
.mk-alerts .ico--warn { background: #FBF2E2; color: var(--mk-amber); }
.mk-alerts .ico--late { background: #FDECEB; color: var(--mk-red); }
.mk-alerts s { display: block; font-size: .82em; color: var(--mk-faint); text-decoration: none; }
.mk-alerts b { margin-left: auto; font-weight: 600; white-space: nowrap; }

/* ================================================== 6 — FUNIL DE LEADS */

.mk-kanban { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: .6em; min-height: 0; }
.mk-col {
  /* Coluna inteira, não do tamanho das fichas: quadro de verdade tem coluna
     cheia, e o corte das fichas embaixo é o que mostra que há mais. */
  min-height: 0;
  background: var(--mk-side);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-r-panel);
  padding: .55em .5em;
  display: flex;
  flex-direction: column;
  gap: .45em;
  overflow: hidden;
}
.mk-col > header { display: flex; align-items: center; gap: .35em; font-size: .8em; color: var(--mk-mut); font-weight: 600; min-width: 0; }
.mk-col > header span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-col > header b { flex: none; background: #fff; border: 1px solid var(--mk-line); border-radius: var(--mk-r-chip); padding: 0 .4em; font-weight: 500; }
/* Total da etapa em linha própria: junto do nome ele quebrava a coluna. */
.mk-col > .tot { font-size: .75em; color: var(--mk-faint); margin-top: -.3em; white-space: nowrap; }
.mk-col .mk-lead:last-child { margin-bottom: .2em; }

.mk-lead {
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-r);
  padding: .55em .6em;
  display: flex;
  flex-direction: column;
  gap: .4em;
}
.mk-lead > u { display: flex; align-items: center; gap: .3em; font-size: .72em; color: var(--mk-faint); text-decoration: none; }
.mk-lead > u i { width: .45em; height: .45em; border-radius: 50%; flex: none; }
.mk-lead > u i.hot { background: var(--mk-red); }
.mk-lead > u i.warm { background: #E8A33D; }
.mk-lead > u i.cold { background: #8FA3B8; }
.mk-lead b { font-size: .85em; font-weight: 600; }
.mk-lead .who { display: flex; align-items: center; gap: .35em; font-size: .75em; color: var(--mk-mut); }
.mk-lead .who .mk-av { width: 1.55em; height: 1.55em; font-size: .62em; }
.mk-lead .who .mk-ico { width: .8em; height: .8em; margin-left: auto; color: var(--mk-faint); }
.mk-lead .who s { text-decoration: none; color: var(--mk-faint); }

/* O card em arraste: sombra, inclinação mínima e o rastro hachurado da vaga
   de onde saiu. Aprendido da referência — conta o gesto sem animar nada. */
.mk-lead--drag {
  box-shadow: 0 .6em 1.4em -.3em rgb(11 13 15 / .22), 0 .1em .3em rgb(11 13 15 / .08);
  transform: rotate(-1.4deg);
  border-color: #D2D2D7;
}

.mk-slot {
  border: 1px dashed #D2D2D7;
  border-radius: var(--mk-r);
  min-height: 3.2em;
  display: grid;
  place-items: center;
  color: #B6B6BD;
  background-image: repeating-linear-gradient(45deg, #F2F2F4 0 .35em, transparent .35em .8em);
}
.mk-slot .mk-ico { width: 1em; height: 1em; }

/* ---------------------------------------------------------------- CONTEXTO */

/* Dentro da moldura de navegador do hero o mock não tem canto nem sombra. */
.frame .mock-wrap { border-radius: 0; }

/* Telas muito estreitas: a sidebar vira só uma faixa, senão come o conteúdo. */
@container (max-width: 380px) {
  .mk-side { width: 10%; padding: .8em .35em; }
  .mk-side .mk-grp,
  .mk-nav li span,
  .mk-nav li b,
  .mk-brand div,
  .mk-user div,
  .mk-user .mk-ico { display: none; }
  .mk-nav li { justify-content: center; padding: .4em .2em; }
  .mk-user { justify-content: center; }
  .mk-search { display: none; }
  .mk-kpis { grid-template-columns: repeat(2, 1fr); }
  .mk-fields { grid-template-columns: repeat(2, 1fr); }
  .mk-split { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Mini-mocks do mosaico
   Fragmentos, não telas inteiras: cada um mostra só a peça que explica a
   funcionalidade. Mesma técnica de escala dos mocks grandes (base em cqw,
   tudo em em), mas com base maior porque a área é bem menor.
   ========================================================================== */

.mm {
  --mm-line:  #E5E5E8;
  --mm-line-2:#F1F1F3;
  --mm-ink:   #18181B;
  --mm-mut:   #5F5F68;
  --mm-faint: #86868F;
  --mm-fill:  #F4F4F5;
  --mm-red:   #D90600;
  --mm-green: #10864F;
  --mm-amber: #B0730E;
  --mm-blue:  #41556B;

  font-size: 11px;
  font-size: clamp(10px, 3.9cqw, 17px);

  width: 100%;
  max-width: 24em;
  font-family: var(--font-body);
  line-height: 1.4;
  color: var(--mm-ink);
  font-variant-numeric: tabular-nums;
  background: #fff;
  border: 1px solid var(--mm-line);
  border-radius: .7em;
  box-shadow: 0 .1em .2em rgb(11 13 15 / .04), 0 1.2em 2.4em -1em rgb(11 13 15 / .14);
  overflow: hidden;
}

.mm b { font-weight: 600; }
.mm-pad { padding: .95em 1.05em; }
.mm-row { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.mm-sep { height: 1px; background: var(--mm-line); }
.mm-mut { color: var(--mm-mut); }
.mm-num { font-variant-numeric: tabular-nums; }
.mm-ico { width: 1em; height: 1em; flex: none; display: block; }

/* Avatar com iniciais, como nos mocks grandes. */
.mm-av {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: var(--mm-ink);
  color: #fff;
  font-size: .68em;
  font-weight: 600;
}

/* O fragmento encosta na borda de baixo do tile em vez de flutuar no meio de
   um campo cinza: é o corte que faz parecer pedaço de tela, não figurinha.
   Só a partir de 640px, porque no empilhado o card centralizado lê melhor. */
@media (min-width: 641px) {
  .tile__visual { padding-bottom: 0; align-items: end; }
  .mm { margin-bottom: -1px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
}

/* ------------------------------------------------- 1. site da loja (vitrine) */
.mm--vitrine { max-width: 17em; }
.mm--vitrine .foto {
  position: relative;
  height: 8em;
  background: linear-gradient(150deg, #E4E8EC 0%, #C8D0D8 55%, #AFB8C2 100%);
}
.mm--vitrine .foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / .5) 48%, transparent 58%);
}
.mm--vitrine .foto u {
  position: absolute;
  top: .6em; left: .6em;
  background: var(--mm-red); color: #fff;
  font-size: .7em; font-weight: 600; text-decoration: none;
  border-radius: .3em; padding: .15em .45em;
  z-index: 1;
}
.mm--vitrine .foto .dots { position: absolute; bottom: .55em; left: 50%; transform: translateX(-50%); display: flex; gap: .25em; z-index: 1; }
.mm--vitrine .foto .dots i { width: .28em; height: .28em; border-radius: 50%; background: rgb(255 255 255 / .55); }
.mm--vitrine .foto .dots i:first-child { background: #fff; width: .7em; border-radius: .14em; }
.mm--vitrine .specs { display: flex; gap: .65em; margin: .4em 0 .65em; font-size: .76em; color: var(--mm-faint); white-space: nowrap; }
.mm--vitrine .specs span { display: flex; align-items: center; gap: .3em; }
.mm--vitrine .specs .mm-ico { width: .95em; height: .95em; }
.mm--vitrine .cta .mm-ico { width: 1em; height: 1em; }
.mm--vitrine .preco { font-size: 1.45em; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.mm--vitrine .parcela { font-size: .75em; color: var(--mm-faint); }
.mm--vitrine .cta {
  display: flex; align-items: center; justify-content: center; gap: .35em;
  margin-top: .75em; padding: .6em;
  border-radius: .4em;
  background: var(--mm-red); color: #fff; font-size: .88em; font-weight: 600;
}

/* ------------------------------------------------ 2. avaliação de troca */
.mm--avaliacao { max-width: 19.5em; }
.mm--avaliacao .placa {
  font-family: var(--font-data);
  font-weight: 600; letter-spacing: .1em; font-size: .9em; line-height: 1.6;
  border: 1px solid #C9CDD4; border-top: .4em solid #1D4D9F;
  border-radius: .2em; padding: 0 .4em;
}
.mm--avaliacao .linha { display: flex; justify-content: space-between; align-items: baseline; padding: .45em 0; font-size: .92em; }
.mm--avaliacao .linha + .linha { border-top: 1px solid var(--mm-line-2); }
.mm--avaliacao .linha > div { min-width: 0; }
.mm--avaliacao .linha s { display: block; font-size: .78em; color: var(--mm-faint); text-decoration: none; }
.mm--avaliacao .linha .neg { color: var(--mm-red); }
.mm--avaliacao .final { padding-top: .65em; margin-top: .25em; border-top: 1px solid var(--mm-line); }
.mm--avaliacao .final b { font-size: 1.4em; letter-spacing: -.02em; }
.mm--avaliacao .nota { display: flex; align-items: center; gap: .35em; margin-top: .65em; font-size: .75em; color: var(--mm-faint); }
.mm--avaliacao .nota .mm-ico { width: .9em; height: .9em; }

/* --------------------------------------------------------- 3. ATPV-e */
.mm--atpv { max-width: 15.5em; }
.mm--atpv .passo { display: flex; align-items: center; gap: .55em; padding: .35em 0; font-size: .9em; }
.mm--atpv .passo i {
  width: 1.2em; height: 1.2em; border-radius: 50%; flex: none;
  border: 1px solid var(--mm-line); display: grid; place-items: center;
  color: #fff;
}
.mm--atpv .passo i .mm-ico { width: .7em; height: .7em; }
.mm--atpv .passo.ok i    { background: var(--mm-green); border-color: var(--mm-green); }
.mm--atpv .passo.agora i { background: var(--mm-red); border-color: var(--mm-red); }
.mm--atpv .passo.agora   { font-weight: 600; }
.mm--atpv .passo s { margin-left: auto; font-size: .75em; color: var(--mm-faint); text-decoration: none; font-weight: 400; }
.mm--atpv .anexo { display: flex; align-items: center; gap: .45em; font-size: .78em; color: var(--mm-mut); padding: .3em 0; min-width: 0; white-space: nowrap; }
.mm--atpv .anexo span { overflow: hidden; text-overflow: ellipsis; }
.mm--atpv .anexo .mm-ico { color: var(--mm-faint); }
.mm--atpv .anexo s { margin-left: auto; color: var(--mm-faint); text-decoration: none; font-size: .9em; }
.mm--atpv .baixar .mm-ico { width: .95em; height: .95em; }
.mm--atpv .baixar {
  display: flex; align-items: center; justify-content: center; gap: .35em;
  margin-top: .7em; padding: .5em;
  border: 1px solid var(--mm-line); border-radius: .4em;
  font-size: .85em; font-weight: 600;
}

/* --------------------------------------------------- 4. modo simples */
.mm--simples {
  max-width: 13.4em; border-radius: 1.8em 1.8em 0 0; padding: .55em .65em 0;
  background: var(--mm-ink); border-color: var(--mm-ink);
}
.mm--simples .status { display: flex; justify-content: space-between; align-items: center; color: #8E8E98; font-size: .62em; font-weight: 600; padding: 0 .5em .5em; }
.mm--simples .status i { width: .45em; height: .45em; border-radius: 50%; background: var(--mm-green); display: inline-block; margin-right: .25em; }
.mm--simples .tela { background: #fff; border-radius: .9em .9em 0 0; padding: .7em .6em .9em; }
.mm--simples .tela > small { display: block; font-size: .7em; color: var(--mm-faint); margin-bottom: .45em; }
.mm--simples .acao {
  display: flex; align-items: center; gap: .5em;
  border: 1px solid var(--mm-line); border-radius: .55em;
  padding: .6em .55em; font-size: .82em; font-weight: 500; white-space: nowrap;
}
.mm--simples .acao + .acao { margin-top: .4em; }
.mm--simples .acao .mm-ico { width: 1em; height: 1em; color: var(--mm-mut); }
.mm--simples .acao u { display: flex; align-items: center; margin-left: auto; text-decoration: none; color: var(--mm-faint); font-size: .8em; }
.mm--simples .acao u .mm-ico { width: 1em; height: 1em; }
.mm--simples .acao.destaque { background: var(--mm-red); border-color: var(--mm-red); color: #fff; }
.mm--simples .acao.destaque .mm-ico,
.mm--simples .acao.destaque u { color: rgb(255 255 255 / .75); }

/* ------------------------------------------- 5. estoque compartilhado */
.mm--parceiras { max-width: 17em; }
.mm--parceiras .loja { display: flex; align-items: center; gap: .6em; padding: .5em 0; font-size: .9em; }
.mm--parceiras .loja > div { min-width: 0; }
.mm--parceiras .loja s { display: block; font-size: .78em; color: var(--mm-faint); text-decoration: none; }
.mm--parceiras .loja + .loja { border-top: 1px solid var(--mm-line-2); }
.mm--parceiras .tgl { width: 2em; height: 1.1em; border-radius: 1em; background: var(--mm-red); position: relative; flex: none; margin-left: auto; }
.mm--parceiras .tgl::after { content: ""; position: absolute; top: .15em; right: .15em; width: .8em; height: .8em; border-radius: 50%; background: #fff; box-shadow: 0 .05em .15em rgb(0 0 0 / .2); }
.mm--parceiras .tgl.off { background: #D8D8DC; }
.mm--parceiras .tgl.off::after { right: auto; left: .15em; }
.mm--parceiras .saldo { display: flex; align-items: center; justify-content: center; gap: .35em; background: var(--mm-fill); padding: .65em; font-size: .8em; color: var(--mm-mut); white-space: nowrap; }
.mm--parceiras .saldo b { color: var(--mm-ink); }
.mm--parceiras .saldo .mm-ico { width: 1em; height: 1em; color: var(--mm-faint); }

/* ==========================================================================
   Conversa do Kopiloto
   O Kopiloto vive no WhatsApp, então este mock não é o app do Kabine: é uma
   conversa. Paleta e formas próprias, literais como nos outros mocks.

   Sem a marca do WhatsApp em lugar nenhum — o avatar do contato é o "K" do
   Kabine, que é de fato quem responde do outro lado.
   ========================================================================== */

.zap {
  --z-wall:  #EFE7DE;   /* papel de parede da conversa */
  --z-chrome:#F7F8FA;
  --z-in:    #FFFFFF;   /* balão de quem responde */
  --z-out:   #D9FDD3;   /* balão de quem manda */
  --z-ink:   #111B21;
  /* Escurecido do cinza original do app. Medido: no #667781 o carimbo de
     hora sobre o balão verde dava 4,19:1 e o "online" 4,37:1, os dois abaixo
     do mínimo de 4,5:1 para texto pequeno. */
  --z-mut:   #566670;
  --z-line:  #E3E5E7;
  --z-tick:  #34A5D8;   /* o azul do "lido"; escurecido do original, que a
                           .72em do carimbo de hora reprovava em contraste */
  --z-red:   #D90600;

  /* Contrato de geometria com img/device-phone.svg. O furo da tela lá é um
     inset de 12 unidades num aparelho de 390 de largura, com raio 45 — aqui
     isso vira cqw, que mede a largura do próprio .zap. Mexer num lado sem
     mexer no outro desalinha a tela dentro da moldura. */
  --z-inset: 3.077cqw;
  --z-raio:  11.54cqw;

  container-type: inline-size;
  aspect-ratio: 390 / 844;   /* a de um aparelho real, não 9:16 */
  position: relative;
  width: 100%;
  filter: drop-shadow(0 2px 6px rgb(11 13 15 / .22))
          drop-shadow(0 24px 48px rgb(11 13 15 / .40));
}

/* A moldura é imagem por cima, e não fundo, porque o SVG tem a tela vazada:
   a conversa em HTML vive por baixo e continua sendo texto de verdade. */
.zap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/device-phone.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.zap__screen {
  /* Bem maior que a dos outros mocks de propósito: neles o texto é textura de
     print, que ninguém precisa ler. Aqui a conversa É o conteúdo, e a 3.5cqw
     as mensagens saíam a 9px. */
  font-size: clamp(13px, 4.4cqw, 19px);
  position: absolute;
  inset: var(--z-inset);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--z-raio);
  background: var(--z-wall);
  font-family: var(--font-body);
  line-height: 1.35;
  color: var(--z-ink);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.zap__ico { width: 1em; height: 1em; flex: none; display: block; }

/* ------------------------------------------------------------ BARRA E TOPO */

/* Altura e recuos medidos contra a ilha de sensores do SVG, que ocupa de 26 a
   60 na vertical e de 132 a 258 na horizontal do aparelho. Hora à esquerda
   dela, indicadores à direita — como no aparelho real. */
.zap__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 12.3cqw;
  padding: 0 6cqw;
  background: var(--z-chrome);
  font-size: .78em;
  font-weight: 600;
}

.zap__status i {
  display: inline-block;
  width: .32em;
  height: .75em;
  margin-left: .12em;
  border-radius: .1em;
  background: var(--z-ink);
  vertical-align: -.1em;
}

.zap__status i:nth-child(1) { height: .4em; }
.zap__status i:nth-child(2) { height: .58em; }
.zap__status i:nth-child(4) { width: .9em; height: .5em; margin-left: .4em; border-radius: .12em; }

.zap__head {
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .45em .8em .6em;
  background: var(--z-chrome);
  border-bottom: 1px solid var(--z-line);
}

.zap__head > .zap__ico { color: var(--z-mut); }
.zap__head .av {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: var(--z-red);
  color: #fff;
  font-family: var(--font-display);
  font-size: .95em;
  font-weight: 700;
}

.zap__head b { display: block; font-size: .92em; font-weight: 600; }
.zap__head s { display: block; font-size: .72em; color: var(--z-mut); text-decoration: none; }
.zap__head .end { margin-left: auto; display: flex; gap: .7em; color: var(--z-mut); }

/* ---------------------------------------------------------------- CONVERSA */

.zap__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Ancorado embaixo: conversa de verdade cresce de baixo para cima, e o
     papel de parede sobrando em cima é o que faz parecer conversa curta em
     vez de tela mal preenchida. */
  justify-content: flex-end;
  gap: .5em;
  padding: .7em .7em .5em;
  overflow: hidden;
  /* Textura discreta do papel de parede, no lugar do desenho original. */
  background-image: radial-gradient(rgb(17 27 33 / .045) 1px, transparent 1px);
  background-size: 14px 14px;
}

.zap__day {
  align-self: center;
  background: #FFFFFFCC;
  color: var(--z-mut);
  font-size: .68em;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: .5em;
  padding: .2em .7em;
  box-shadow: 0 1px 1px rgb(11 13 15 / .06);
}

.zap__msg {
  max-width: 86%;
  border-radius: .7em;
  padding: .45em .55em .3em;
  font-size: .85em;
  box-shadow: 0 1px 1px rgb(11 13 15 / .08);
  position: relative;
}

.zap__msg--out { align-self: flex-end; background: var(--z-out); border-top-right-radius: .18em; }
.zap__msg--in  { align-self: flex-start; background: var(--z-in); border-top-left-radius: .18em; }

/* Carimbo de hora e confirmação de leitura, alinhados à direita do balão. */
.zap__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .25em;
  margin-top: .15em;
  font-size: .8em;
  color: var(--z-mut);
}

.zap__meta .zap__ico { width: .95em; height: .95em; color: var(--z-tick); }

/* ------------------------------------------------------------------ RECIBO */

/* A foto do comprovante é desenhada, não é imagem: o projeto não carrega
   asset novo e o papelzinho continua legível a 10px de base. */
.zap__recibo {
  border-radius: .35em;
  overflow: hidden;
  background: linear-gradient(160deg, #D8DCE0, #B9C0C7);
  padding: .8em .7em;
}

.zap__papel {
  background: #FCFBF8;
  border-radius: .1em;
  padding: .5em .55em;
  box-shadow: 0 .15em .4em rgb(0 0 0 / .18);
  font-size: .8em;
  color: #2A2E33;
}

.zap__papel b { display: block; font-size: .95em; text-align: center; letter-spacing: .02em; }
.zap__papel u { display: block; font-size: .8em; text-align: center; color: #676D74; text-decoration: none; margin-bottom: .4em; }
.zap__papel p { display: flex; justify-content: space-between; gap: .6em; font-size: .85em; color: #5E646B; }
.zap__papel hr { border: 0; border-top: 1px dashed #C7CBD0; margin: .35em 0; }
.zap__papel .tot { display: flex; justify-content: space-between; font-weight: 700; font-size: .95em; color: #2A2E33; }

.zap__legenda { margin-top: .4em; }

/* --------------------------------------------------------- FICHA DO ROBÔ */

/* O que o Kopiloto entendeu, campo a campo: é o "devolve o que entendeu"
   da cópia ao lado virando imagem. */
/* Grade de duas colunas com a coluna de rótulo em auto: cada ficha alinha
   pelo seu próprio rótulo mais longo. Com largura fixa, "Lucro previsto"
   quebrava em duas linhas na segunda ficha.

   display: contents nos divs internos promove span e b a itens da grade, sem
   precisar mexer no HTML. */
.zap__ficha {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .15em .6em;
  margin: .45em 0;
  font-size: .95em;
}
.zap__ficha div { display: contents; }
.zap__ficha span { color: var(--z-mut); white-space: nowrap; }
.zap__ficha b { font-weight: 600; }

/* Linha de "gravou": o check verde é o sinal de que a despesa entrou. */
.zap__ok { display: flex; align-items: center; gap: .4em; font-weight: 600; }
.zap__ok .zap__ico { width: .95em; height: .95em; color: #0F7A48; }

/* ------------------------------------------------------------ DIGITAÇÃO */

.zap__input {
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .45em .6em .5em;
  background: var(--z-chrome);
  border-top: 1px solid var(--z-line);
  color: var(--z-mut);
}

/* Barra de home: é ela que fecha a leitura de aparelho moderno. Fica dentro
   da tela, como no real — não é parte da moldura. */
.zap__home {
  flex: none;
  width: 34%;
  height: 1.3cqw;
  min-height: 3px;
  margin: 0 auto .8cqw;
  border-radius: 1cqw;
  background: #0E1418;
  opacity: .28;
}

.zap__campo {
  flex: 1;
  background: #fff;
  border: 1px solid var(--z-line);
  border-radius: 1em;
  padding: .35em .7em;
  font-size: .82em;
  color: #6B757C;   /* 2,67:1 no cinza original; aqui passa */
}