/* ═══════════════════════════════════════════════════════════════════════
   app-editorial.css — a linguagem da landing aplicada a toda rota do painel (29/09/2026)

   A faixa de pedra da landing: cartão branco sem borda sobre o canvas, profundidade só
   pelo degrau (e o fio de luz de 1px no topo), poço de pedra dentro do cartão, um título
   de tela só — kicker de fio, nome em --fg e uma frase em --fg-secondary. Esta folha é a
   fundação (larguras, cromo, cabeçalho, cartão, poço, chip, campo, diálogo); as rotas
   estão em app-editorial-routes.css.

   Todo seletor começa em #app-shell ou .shell ~ dialog: a landing não lê nada daqui.
   Só tokens; nenhum literal, nenhum !important. Contrato: DESIGN.md › LP no produto.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Larguras: uma medida e uma margem para toda rota ─────────────────────
   Os IDs dão (2,0,0) de propósito: vencem as larguras antigas de cada rota
   (1120, 1200, 1280, 1420). A Automação fica de fora por omissão. */
#app-shell :is(#view-pipeline, #view-proposals, #view-outreach, #view-insights, #view-finance, #view-settings,
  #view-subscription, #view-meu-whatsapp, #view-agency, #view-manual, #view-sales, #view-tutorial) {
  max-width: var(--content-max);
  margin-inline: auto;
}
#app-shell :is(.outreach-shell, .proposals-view) { max-width: none; padding: 0; }
@media (min-width: 992px) {
  #app-shell .board { padding-top: var(--sp-10); }
  #app-shell :is(#view-leads, .cliente, .clientes) { padding-top: 0; }
}

/* ── Aparência no rodapé do rail (a gaveta, no celular) ─────────────────── */
#app-shell .rail .app-appearance { position: static; margin: 0; padding: var(--sp-3) var(--sp-2) 0; justify-content: space-between; border-top: 1px solid var(--border); }
#app-shell .rail .app-appearance > label { color: var(--fg-secondary); }

/* ── Cabeçalho de tela: kicker, título em dois tons, descrição, ações ───── */
#app-shell .board .ds-heading {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  margin: 0 0 var(--section-gap);
}
#app-shell .board .ds-heading > .ds-heading__main { flex: 1 1 auto; min-width: 0; }
#app-shell .board .ds-heading > .ds-heading__actions { flex: none; flex-wrap: wrap; align-items: center; }
#app-shell .board .ds-heading .ds-kicker {
  margin: 0 0 var(--sp-3);
  color: var(--fg-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: 0;
  text-transform: none;
}
#app-shell .board .ds-heading .ds-heading__title {
  margin: 0;
  color: var(--fg);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
}
#app-shell .board .ds-heading .ds-heading__tone { color: var(--fg-secondary); }
#app-shell .board .ds-heading .ds-heading__desc {
  margin: var(--sp-3) 0 0;
  max-width: var(--measure);
  color: var(--fg-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

/* Ação de cabeçalho e CTA de página na altura da landing; as regras de #app-shell
   .button e do botão de busca venceriam o .button--xl da biblioteca. */
#app-shell :is(.button--xl, .ds-button--xl, .view-heading .search-toggle-btn) {
  min-height: var(--control-xl);
  padding-inline: var(--sp-5);
}
@media (max-width: 767px) {
  #app-shell .board .ds-heading { align-items: stretch; }
  #app-shell .board .ds-heading > .ds-heading__actions { width: 100%; flex-wrap: nowrap; }
  #app-shell .board .ds-heading__actions > :is(.button--primary, .ds-button--primary) { flex: 1 1 auto; min-width: 0; }
  #app-shell .board .ds-heading__actions:not(:has(> .button--primary, > .ds-button--primary)) > * { flex: 1 1 0; min-width: 0; }
}

/* ── Cartão: branco sem borda sobre o canvas; o degrau é a profundidade ────
   Lista só de classes simples, para a especificidade ficar em (1,1,0) e as
   exceções abaixo vencerem pela ordem. Sem sombra em repouso. */
#app-shell :is(.search-collapsible-wrapper, .cliente-section, .cliente-panel, .clientes-row, .outreach-card,
  .finance-guide, .finance-register, .pipeline-list, .proposal-card, .proposal-form, .settings-form,
  .pipeline-stat, .finance-stat, .plan-card),
#app-shell :is(.insight-metrics, .insight-checks) > article,
#app-shell .proposal-metrics > div {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-2xl);
  box-shadow: inset 0 1px 0 var(--surface-highlight), var(--card-edge);
}
#app-shell :is(.cliente-section, .cliente-panel, .clientes-row, .outreach-card, .proposal-card, .proposal-form,
  .settings-form, .plan-card),
#app-shell .insight-checks > article,
#app-shell .search-collapsible-content:not(.collapsed) { padding: var(--card-pad); }
#app-shell :is(.pipeline-stat, .finance-stat),
#app-shell .insight-metrics > article,
#app-shell .proposal-metrics > div { padding: var(--sp-5); }
#app-shell .cliente-section--bare { background: transparent; box-shadow: none; padding: 0; }
#app-shell .plan-card { border-radius: var(--radius-3xl); }

/* ── Poço: dado secundário dentro do cartão, sem borda ─────────────────── */
#app-shell :is(.cliente-facts, .cliente-stat, .cliente-qr, .cliente-demo, .cliente-agente__chave, .cliente-message,
  .outreach-preview, .plan-fact, .quota-widget) {
  background: var(--well);
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: none;
}
#app-shell .cliente-message[data-direction="out"] { background: var(--accent-soft); }

/* Fio dentro do cartão branco: --border (o fio do FAQ da landing). --border-light é
   igual a --bg no claro e some sobre branco. */
#app-shell :is(.cliente-kv > div, .cliente-item, .cliente-conversa, .cliente-facts > div + div, .outreach-lead,
  .outreach-history li, .pipeline-row, .finance-row, .finance-pagination, .plan-card__head, .plan-benefits,
  .insight-version, .cliente-panel__note, .cliente-editor, .cliente-links) { border-color: var(--border); }

/* ── Tipografia de cartão: um papel de título, um de rótulo, número em mono ── */
#app-shell :is(.cliente-section h2, .cliente-panel h2, .outreach-card h2, .finance-register h2, .proposal-card h2,
  .insight-report h2, .settings-group__title, .plan-card__name, .clientes-row__name) {
  margin: 0;
  font-size: var(--text-card-title);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-tight);
}
#app-shell :is(.plan-fact dt, .insight-tag, .empty-state__eyebrow, .tickets__eyebrow, .plan-eyebrow),
.shell ~ dialog .plan-eyebrow {
  color: var(--fg-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  text-transform: none;
}
#app-shell :is(.pipeline-stat, .finance-stat, .cliente-stat) strong,
#app-shell :is(.insight-metrics, .proposal-metrics) strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
#app-shell :is(.pipeline-stat, .finance-stat) strong,
#app-shell :is(.insight-metrics, .proposal-metrics) strong { font-size: var(--text-xl); line-height: var(--leading-tight); }
@media (min-width: 768px) {
  #app-shell :is(.pipeline-stat, .finance-stat) strong,
  #app-shell :is(.insight-metrics, .proposal-metrics) strong { font-size: var(--text-2xl); }
}
@media (min-width: 1200px) {
  #app-shell :is(.pipeline-stat, .finance-stat) strong,
  #app-shell :is(.insight-metrics, .proposal-metrics) strong { font-size: var(--text-3xl); }
}
#app-shell :is(.pipeline-stat, .finance-stat) > span,
#app-shell :is(.insight-metrics, .proposal-metrics) span { color: var(--fg-secondary); font-size: var(--text-sm); }

/* ── Chip: cápsula branca na pedra, tinta quando ativo (como na landing) ──── */
#app-shell :is(.filter-pill, .app-chip, .pipeline .ds-pill) {
  min-height: var(--control-md);
  padding: 0 var(--sp-4);
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--fg-secondary);
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: none;
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
}
@media (hover: hover) {
  #app-shell :is(.filter-pill, .app-chip, .pipeline .ds-pill):not(.active):not(.is-active):not([aria-pressed="true"]):hover {
    color: var(--fg);
    background: var(--surface);
  }
}
/* Ativo = texto cheio + anel, não tinta: a tinta fica para UMA ação por tela (o CTA do
   cabeçalho). Com dois grupos de filtro, duas pílulas pretas competiam com ele. */
#app-shell :is(.filter-pill, .app-chip, .pipeline .ds-pill):is(.active, .is-active, [aria-pressed="true"]) {
  color: var(--fg);
  background: var(--surface);
  font-weight: var(--weight-semibold);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-card);
}
#app-shell .pipeline .ds-pill .ds-numeral { color: inherit; }
#app-shell :is(.bento-filters, .date-filters, .clientes-filters, .pipeline .ds-pills) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
@media (max-width: 767px) {
  /* Uma linha que rola e sangra até a borda da tela, em vez de quebrar em 2–3 linhas. */
  #app-shell :is(.queue-filters > .bento-filters, .queue-filters > .date-filters, .clientes-filters, .pipeline .ds-pills) {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    width: auto;
    max-width: none;
    margin-inline: calc(var(--sp-4) * -1);
    padding-inline: var(--sp-4);
    scroll-padding-inline: var(--sp-4);
    scroll-snap-type: x proximity;
  }
}

/* ── Seletor segmentado: trilho branco em cápsula, etapa ativa em pedra ──── */
#app-shell .queue-stages { padding: var(--sp-1); background: var(--surface); border-radius: var(--radius-pill); }
#app-shell .queue-stages .mobile-kanban-tab-btn { border-radius: var(--radius-pill); }
#app-shell .queue-stages .mobile-kanban-tab-btn:is(.active, [aria-selected="true"]) {
  color: var(--fg);
  background: var(--segmented-thumb);
  box-shadow: none;
  font-weight: var(--weight-semibold);
}
#app-shell .queue-stages .mobile-kanban-tab-btn:is(.active, [aria-selected="true"]) .count-badge { color: var(--fg-secondary); }

/* ── Campo: denso (36 no desktop, 44 no celular), raio 10, fio forte ─────── */
#app-shell :is(.search-panel, .finance-filters, .pipeline-filters, .insight-selector, .outreach-shell, .settings-form, .cliente-form)
  :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  color: var(--fg);
  background: var(--input-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
}
#app-shell :is(.search-panel, .finance-filters, .pipeline-filters, .insight-selector, .outreach-shell, .settings-form, .cliente-form)
  :is(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: var(--control-lg); padding: 0 var(--sp-3); }
#app-shell :is(.search-panel, .finance-filters, .pipeline-filters, .insight-selector, .outreach-shell, .settings-form, .cliente-form)
  textarea { padding: var(--sp-3); }
/* A regra acima tem (1,3,1) e venceria a borda de foco do app-shell. */
#app-shell :is(.search-panel, .finance-filters, .pipeline-filters, .insight-selector, .outreach-shell, .settings-form, .cliente-form)
  :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { border-color: var(--accent); }
@media (max-width: 767px) {
  /* 16px: o iOS não dá zoom no campo. */
  #app-shell :is(.search-panel, .finance-filters, .pipeline-filters, .insight-selector, .outreach-shell, .settings-form, .cliente-form)
    :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: var(--text-lg); }
}
#app-shell :is(.finance-filters, .pipeline-filters, .insight-selector, .outreach-row) > :is(.button, .ds-button) { min-height: var(--control-lg); }
#app-shell :is(.finance-filters, .pipeline-filters, .insight-selector) { align-items: end; gap: var(--sp-3); }
#app-shell :is(.finance-filters, .pipeline-filters, .insight-selector) label {
  gap: var(--sp-2);
  color: var(--fg-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
#app-shell .outreach-grid { align-items: start; gap: var(--sp-4); }
#app-shell .outreach-row { display: flex; align-items: center; gap: var(--sp-2); }
#app-shell .outreach-row > input { flex: 1 1 0; width: auto; min-width: 0; margin-block: 0; }
/* base.css desenha todo `.field input` com 100% e 36/44px: a caixa de seleção vira um quadrado vazio. */
#app-shell .field input:is([type="checkbox"], [type="radio"]) { flex: none; width: var(--sp-4); height: var(--sp-4); min-height: 0; padding: 0; margin: 0; accent-color: var(--accent); }

/* ── Diálogo do app: um raio só ──────────────────────────────────────────── */
:is(#app-shell dialog, .shell ~ dialog[id]) { border-radius: var(--radius-3xl); }

/* ── Paginação vazia some: nada para paginar não vira uma linha desligada ── */
#app-shell :is(.pipeline-pagination, .finance-pagination, .proposal-actions, .outreach-row):has(button):not(:has(button:enabled)) { display: none; }

/* ── Tab bar do celular: 4 colunas iguais, rótulo de 10px ───────────────── */
@media (max-width: 767px) {
  #app-shell .mobile-tab-bar { height: var(--tabbar-height); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #app-shell .mobile-tab-btn { gap: var(--sp-1); color: var(--fg-secondary); font-size: var(--text-2xs); font-weight: var(--weight-medium); }
  #app-shell .mobile-tab-btn svg { width: var(--sp-5); height: var(--sp-5); stroke-width: var(--icon-stroke); }
  #app-shell .mobile-tab-btn:is(.active, [aria-current="page"]) { color: var(--fg); font-weight: var(--weight-semibold); }
  /* A cor sozinha não marcava a aba ativa no escuro (1,6:1 contra as outras): um traço em cima. */
  #app-shell .mobile-tab-btn { position: relative; }
  #app-shell .mobile-tab-btn:is(.active, [aria-current="page"])::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--sp-5);
    height: calc(var(--sp-1) / 2);
    transform: translateX(-50%);
    border-radius: var(--radius-pill);
    background: var(--fg);
  }
  #app-shell .batch-action-bar { bottom: var(--tabbar-height); }
}

/* ── Pressão: chip, etapa e aba encolhem de leve no toque ────────────────── */
#app-shell :is(button, a, summary, label) { -webkit-tap-highlight-color: transparent; }
#app-shell :is(.filter-pill, .app-chip, .pipeline .ds-pill, .queue-stages .mobile-kanban-tab-btn, .mobile-tab-btn) {
  transition-property: color, background-color, transform;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-out);
}
#app-shell :is(.filter-pill, .app-chip, .pipeline .ds-pill, .queue-stages .mobile-kanban-tab-btn, .mobile-tab-btn):active { transform: scale(var(--press)); }
@media (prefers-reduced-motion: reduce) {
  #app-shell :is(.filter-pill, .app-chip, .pipeline .ds-pill, .queue-stages .mobile-kanban-tab-btn, .mobile-tab-btn) { transition: none; }
  #app-shell :is(.filter-pill, .app-chip, .pipeline .ds-pill, .queue-stages .mobile-kanban-tab-btn, .mobile-tab-btn):active { transform: none; }
}