/* ============================================================
   NETO MOTORS — Gestão Financeira
   v48: sistema de design — tokens escuro/claro (toggle ◐)
   Paleta: ground #0E0F13 / surface #171A20 / accent #F7921E
           pos #37C77E (entra) / neg #F0616D (sai) / est #5B9DFF (estimado)
   ============================================================ */

:root {
  --bg:        #0E0F13;   /* ground */
  --bg-2:      #12151B;
  --card:      #171A20;   /* surface */
  --card-2:    #20242D;   /* surface-2 */
  --border:    #2A2F3A;   /* line */
  --border-2:  #38404E;
  --text:      #F3F4F6;
  --text-2:    #969CA8;   /* muted */
  --text-3:    #6B717D;   /* faint */
  --accent:    #F7921E;
  --accent-2:  #FFB454;
  --accent-ink: #1A1206;  /* texto sobre o laranja */
  --accent-soft: rgba(247, 146, 30, 0.13);
  --red:       #F0616D;   /* dinheiro sai */
  --red-soft:  rgba(240, 97, 109, 0.13);
  --green:     #37C77E;   /* dinheiro entra */
  --green-soft: rgba(55, 199, 126, 0.13);
  --blue:      #5B9DFF;   /* estimado */
  --blue-soft: rgba(91, 157, 255, 0.13);
  --slate:     #8A93A6;
  --radius:    16px;
  --sidebar-w: 232px;
  --topbar-h:  62px;
  --topbar-bg: rgba(14, 15, 19, 0.88);
  color-scheme: dark;
}

/* v48: tema CLARO — toggle ◐ no topo (persistido em localStorage) */
:root[data-theme="light"] {
  --bg:        #F6F5F2;
  --bg-2:      #EFEDE7;
  --card:      #FFFFFF;
  --card-2:    #F1EFEA;
  --border:    #E3E0D9;
  --border-2:  #D3CFC5;
  --text:      #1B1D22;
  --text-2:    #5D636E;
  --text-3:    #8B9099;
  --accent-2:  #D9780A;   /* no claro o tom escuro dá contraste */
  --accent-soft: rgba(247, 146, 30, 0.15);
  --red:       #D6414D;
  --red-soft:  rgba(214, 65, 77, 0.10);
  --green:     #1F9D5F;
  --green-soft: rgba(31, 157, 95, 0.10);
  --blue:      #2F6FD6;
  --blue-soft: rgba(47, 111, 214, 0.10);
  --topbar-bg: rgba(246, 245, 242, 0.9);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, "Segoe UI", -apple-system, Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

::selection { background: var(--accent-soft); }

/* ---------- Layout base ---------- */
#app { display: flex; min-height: 100vh; }

.main {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#content {
  padding: 24px 28px 48px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 18px 20px;
  border-bottom: 1px solid var(--border);
}

.brand-badge {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent) 0%, #B85E00 100%);
  color: #17130A;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.5px;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(247, 146, 30, 0.25);
}

.brand h1 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--text);
  white-space: nowrap;
}

.brand span {
  display: block;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-top: 1px;
}

.sidebar nav { padding: 14px 10px; flex: 1; overflow-y: auto; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 3px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background 0.14s, color 0.14s;
}

.nav-item .ico { font-size: 16px; width: 22px; text-align: center; }

.nav-item:hover { background: var(--card); color: var(--text); }

.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}

.sidebar-foot {
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.5px;
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* v113: ERA `height: var(--topbar-h)`. Com `* { box-sizing: border-box }` e o padding da área
     segura (notch/ilha dinâmica vale 47-59px no app INSTALADO), a caixa de conteúdo virava
     62 − 12 − 59 = −9px: o título e o seletor de mês escorregavam pra fora da barra, por cima do
     primeiro card. No Safari com barra de endereço não aparecia (--safe-t = 0) — por isso passava
     batido em teste no computador. `min-height` deixa a barra crescer o tanto do notch. */
  min-height: var(--topbar-h);
  padding: 0 28px;
  background: var(--topbar-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.topbar h2 { font-size: 19px; font-weight: 700; letter-spacing: 0.2px; }

.topbar-right { display: flex; align-items: center; gap: 10px; }

.comp-label { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.6px; }

/* ---------- Controles (inputs / selects / botões) ---------- */
select, input[type="text"], input[type="number"], input[type="date"], input[type="search"], textarea {
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.14s, box-shadow 0.14s;
}

select:focus, input:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

select { cursor: pointer; }
/* v48: color-scheme vem do :root (segue o tema) */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 8px;
  border: 1px solid var(--border-2);
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, transform 0.05s;
}
.btn:hover { background: var(--border); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  border-color: transparent;
  color: var(--accent-ink);
}
.btn-primary:hover { background: linear-gradient(135deg, #FF9F3D 0%, var(--accent) 100%); }

.btn-danger { color: var(--red); border-color: rgba(229, 72, 77, 0.35); background: transparent; }
.btn-danger:hover { background: var(--red-soft); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); padding: 5px 8px; }
.btn-ghost:hover { background: var(--card-2); color: var(--text); }

.icon-btn {
  border: none; background: transparent; cursor: pointer;
  font-size: 14px; padding: 4px 6px; border-radius: 6px;
  color: var(--text-3); transition: background 0.12s, color 0.12s;
}
.icon-btn:hover { background: var(--card-2); color: var(--text); }
.icon-btn.del:hover { background: var(--red-soft); color: var(--red); }

/* ---------- Cards & grids ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.card + .card, .section { margin-top: 20px; }

.card-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-3);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.card-title .btn { text-transform: none; letter-spacing: 0; }

.grid { display: grid; gap: 16px; }
.grid > .card { margin-top: 0; } /* cards dentro de grid não herdam margem de empilhamento */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--border-2);
}
.kpi.accent::before { background: var(--accent); }
.kpi.pos::before { background: var(--green); }
.kpi.neg::before { background: var(--red); }

.kpi .kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  font-weight: 600;
}
.kpi .kpi-value {
  font-size: 24px;
  font-weight: 800;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kpi .kpi-sub { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }

/* Valores positivos / negativos */
.pos-v { color: var(--green); }
.neg-v { color: var(--red); }
.accent-v { color: var(--accent); }
.muted { color: var(--text-3); }

/* ---------- Tabelas ---------- */
.table-wrap { overflow-x: auto; border-radius: 10px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-3);
  font-weight: 700;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-2);
  background: var(--bg-2);
  position: sticky;
  top: 0;
}
thead th:first-child { border-radius: 8px 0 0 0; }
thead th:last-child { border-radius: 0 8px 0 0; }

tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
tbody td.strong, tbody td:first-child { color: var(--text); }
tbody tr:hover td { background: rgba(247, 146, 30, 0.035); }

tr.subtotal td {
  background: var(--bg-2);
  font-weight: 700;
  color: var(--text);
  border-top: 1px solid var(--border-2);
}
tr.total-row td {
  background: var(--accent-soft);
  font-weight: 800;
  color: var(--accent);
  border-top: 2px solid var(--accent-2);
  font-size: 13.5px;
}

td.num, th.num { text-align: right; }
td.actions { text-align: right; white-space: nowrap; }

.cat-header td {
  background: var(--card-2);
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.badge.b-green  { background: var(--green-soft);  color: var(--green); }
.badge.b-red    { background: var(--red-soft);    color: var(--red); }
.badge.b-amber  { background: var(--accent-soft); color: var(--accent); }
.badge.b-blue   { background: var(--blue-soft);   color: var(--blue); }
.badge.b-gray   { background: rgba(138, 147, 166, 0.14); color: var(--slate); }
/* v119: "Novo" é o único status que EXIGE ação imediata — chip preenchido, o mais forte da tela */
.badge.b-novo   { background: var(--red); color: #fff; font-weight: 800; }
/* v119: Negociando ganhou cor própria (roxo) — antes dividia o azul com "Em atendimento" */
.badge.b-roxo   { background: rgba(155, 105, 245, 0.16); color: #8a5cf5; }
:root[data-theme="dark"] .badge.b-roxo { color: #b79cff; }

/* ---------- Formulários ---------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
  font-weight: 600;
}
.field.span-2 { grid-column: span 2; }

.form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.form-inline .field { min-width: 170px; }

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ---------- Modal ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 7, 9, 0.72);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 100;
  animation: fadeIn 0.14s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh; max-height: 90dvh; /* v113: no iOS o vh conta com a barra do Safari ESCONDIDA — o modal ficava maior que a tela e o botao Salvar caia atras dela */
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  animation: pop 0.16s ease;
}
@keyframes pop { from { transform: translateY(8px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } }

.modal h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.modal h3 span { color: var(--accent); }

/* ---------- Gráficos ---------- */
.chart-box svg { display: block; width: 100%; height: auto; }
.chart-scroll { overflow-x: auto; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--text-2);
}
.legend .chip { display: inline-flex; align-items: center; gap: 6px; }
.legend .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------- Estados ---------- */
.loading, .empty {
  padding: 44px;
  text-align: center;
  color: var(--text-3);
  font-size: 13.5px;
}
.error-box {
  background: var(--red-soft);
  border: 1px solid rgba(229, 72, 77, 0.4);
  color: var(--red);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 16px 0;
}

/* ---------- Seções auxiliares ---------- */
.section-title {
  font-size: 15px;
  font-weight: 700;
  margin: 26px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.mini-stat { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.mini-stat:last-child { border-bottom: none; }
.mini-stat .l { color: var(--text-2); }
.mini-stat .v { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Logo na sidebar ---------- */
.brand-logo {
  width: 46px; height: 46px; flex: none;
  border-radius: 10px; object-fit: cover;
  border: 1px solid var(--border-2);
  box-shadow: 0 4px 14px rgba(247, 146, 30, 0.25);
}

/* ---------- Seções do menu ---------- */
.nav-sec {
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-3);
  padding: 14px 12px 5px;
}

/* ---------- Barra de lançamento rápido ---------- */
.quickbar {
  display: flex; align-items: center; gap: 10px;
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 16px;
}
.quickbar .qb-ico { font-size: 17px; }
.quickbar input[type="text"], .quickbar textarea { flex: 1; background: var(--bg-2); }
.quickbar textarea { resize: none; overflow-y: auto; line-height: 1.45; }
.quickbar select { max-width: 150px; }
.qb-status { font-size: 11px; color: var(--text-3); white-space: nowrap; }

.qb-preview {
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.qb-preview .qb-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 12px; display:flex; justify-content:space-between; align-items:center; }
.qb-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.qb-field label { display:block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); font-weight: 600; margin-bottom: 4px; }
.qb-field input, .qb-field select { width: 100%; }
.qb-field.faltando label { color: var(--accent); }
.qb-field.faltando input { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.qb-perguntas { margin: 4px 0 12px; padding: 10px 14px; background: var(--accent-soft); border-radius: 9px; font-size: 13px; color: var(--accent); }
.qb-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Barras de progresso (metas) ---------- */
.prog { background: var(--bg-2); border: 1px solid var(--border); border-radius: 20px; height: 16px; overflow: hidden; min-width: 140px; }
.prog > div { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 20px; transition: width .3s; }
.prog.done > div { background: linear-gradient(90deg, #2AA36A, var(--green)); }

/* ---------- Abas ---------- */
.tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.tab {
  padding: 9px 18px; border: none; background: transparent; color: var(--text-2);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Alertas "Hoje" ---------- */
.alerta-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 4px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.alerta-item:last-child { border-bottom: none; }
.alerta-item .a-txt { flex: 1; }
.alerta-item .a-det { color: var(--text-3); font-size: 12px; }
.urg-alta { color: var(--red); } .urg-media { color: var(--accent); } .urg-baixa { color: var(--blue); }

/* ---------- Aging / temperatura ---------- */
.faixa-verde { background: var(--green-soft); color: var(--green); }
.faixa-amarelo { background: var(--accent-soft); color: var(--accent); }
.faixa-vermelho { background: var(--red-soft); color: var(--red); }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
.top-user { display: none; }
@media (max-width: 860px) {
  :root { --sidebar-w: 62px; }
  .brand h1, .brand span, .nav-item .lbl, .sidebar-foot { display: none; }
  /* v100: usuário + Sair no topo (a sidebar esconde o rodapé no celular) */
  .top-user { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
  /* v100: área de toque decente pros ícones de ação (26px era impossível no dedo) */
  .icon-btn { font-size: 17px; padding: 9px 10px; }
  /* v100: valor em dinheiro nunca truncado ("R$ 1.234.5" é perigoso) */
  .kpi .v { font-size: clamp(13px, 4.2vw, 20px); overflow: visible; white-space: normal; word-break: keep-all; }
  /* v109: estas 5 regras estavam FORA do @media por uma chave no lugar errado — valiam
     também no computador (e derrubavam o display:flex do login logo abaixo). */
  .brand { justify-content: center; padding: 16px 8px; }
  .nav-item { justify-content: center; padding: 11px 8px; }
  .nav-item .ico { width: auto; }
  #content { padding: 16px 14px 40px; }
  .topbar { padding: 12px 14px; }
}

/* ---------- Login (v10) ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: radial-gradient(1200px 600px at 50% -10%, rgba(247,146,30,0.10), transparent 60%), var(--bg);
}
.login-card {
  width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 34px 30px 30px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.login-logo { width: 72px; height: 72px; object-fit: cover; border-radius: 16px; margin-bottom: 14px; }
.login-card h1 { font-size: 22px; letter-spacing: 1px; color: var(--text); margin: 0; }
.login-sub { color: var(--text-2); font-size: 13px; margin: 6px 0 22px; }
.login-card label { display: block; text-align: left; font-size: 12px; color: var(--text-2); margin: 12px 0 6px; }
.login-card input {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-2);
  background: var(--bg-2); color: var(--text); font-size: 15px; outline: none;
}
.login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-btn { width: 100%; margin-top: 22px; padding: 13px; font-size: 15px; font-weight: 700; }
.login-erro {
  background: var(--red-soft); color: var(--red); border: 1px solid rgba(229,72,77,0.35);
  border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 8px;
}

/* ---------- Barra: lote de lançamentos (vários cards) ---------- */
.qb-multi { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.qb-multi-head { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qb-multi-msg { font-size: 12px; font-weight: 600; color: var(--green); background: var(--green-soft); border-radius: 6px; padding: 2px 8px; }
.qb-preview.qb-card { background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.qb-preview.qb-card.tem-falta { border-color: rgba(247, 146, 30, 0.5); }
.qb-multi-actions { margin-top: 4px; }

/* aviso: composição da venda não fecha com o valor de venda */
.comp-warn { font-size: 11px; font-weight: 700; color: var(--red); background: var(--red-soft);
  border-radius: 5px; padding: 1px 6px; white-space: nowrap; cursor: help; }

/* ---------- Form de venda progressivo (v16) ---------- */
.vf { max-height: 74vh; max-height: 74dvh; /* v113 */ overflow-y: auto; padding-right: 6px; }
.vf-painel {
  position: sticky; top: 0; z-index: 5; background: var(--card-2);
  border: 1px solid var(--accent); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
}
.vf-p-linha { display: flex; align-items: baseline; gap: 10px; padding: 2px 0; font-size: 13px; }
.vf-p-linha span { color: var(--text-2); min-width: 130px; }
.vf-p-linha strong { font-size: 15px; }
.vf-p-linha em { color: var(--text-3); font-style: normal; font-size: 11px; }
.vf-sec-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px;
}
.vf-sec-titulo { font-size: 13px; font-weight: 700; letter-spacing: 0.4px; color: var(--text); }
.vf-sec-body { margin-top: 10px; }
.vf-clicavel { cursor: pointer; user-select: none; }
.vf-chev { color: var(--accent); font-size: 14px; }
.vf-switch { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.vf-switch input { accent-color: var(--accent); width: 16px; height: 16px; }
.vf-info { margin-top: 8px; font-size: 13px; color: var(--text-2); }
.pos-v { color: var(--green); }

/* toast (briefing copiado etc.) */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 20px);
  background: var(--card-2); color: var(--text); border: 1px solid var(--accent);
  border-radius: 10px; padding: 12px 22px; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 32px rgba(0,0,0,0.5); z-index: 9999; opacity: 0;
  transition: opacity .3s, transform .3s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* rodapé sidebar: usuário + sair */
.foot-user { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); margin-bottom: 6px; }
.foot-papel {
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px; background: var(--accent-soft);
  color: var(--accent); border-radius: 4px; padding: 1px 5px;
}
.foot-sair { margin-left: auto; padding: 3px 10px; font-size: 11px; }

/* v36 — respostas rápidas da cobrança (Meu Dia) */
.resp-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.resp-chips .resp-chip { padding: 2px 8px; font-size: 11px; }
.resp-chips select { font-size: 11px; padding: 2px 4px; }

/* ============================================================
   v48 — LAYOUT NOVO (mockup aprovado): wordmark, foco visível,
   barra de IA sticky, placa mono, cards de venda, tema claro
   ============================================================ */

/* wordmark: NETO MOTORS com MOTORS em laranja */
.brand h1 .mo { color: var(--accent); }

/* foco visível no teclado (a11y) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* item ativo da navegação: barra laranja mais forte */
.nav-item.active { box-shadow: inset 3px 0 0 var(--accent); }

/* barra de IA PROEMINENTE e sempre visível (sticky logo abaixo do topo) */
#globalbar .quickbar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 4;
  border-color: var(--border-2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
#globalbar .quickbar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 6px 20px rgba(0, 0, 0, 0.28);
}

/* toggle de tema no topo */
#theme-toggle { font-size: 17px; }

/* placa em fonte mono (cards e listas) */
.placa-mono {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11.5px; letter-spacing: 0.8px;
  background: var(--bg-2); border: 1px solid var(--border-2);
  border-radius: 6px; padding: 1px 7px; color: var(--text-2);
  font-weight: 600; white-space: nowrap;
}

/* ---------- Vendas: card por operação (mockup) ---------- */
.vd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); gap: 14px; }
.vd-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px 18px 13px;
  display: flex; flex-direction: column; gap: 7px; margin: 0;
  transition: border-color 0.14s;
}
.vd-card:hover { border-color: var(--border-2); }
.vd-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vd-nome { font-size: 15px; font-weight: 750; color: var(--text); }
.vd-meta { font-size: 12px; color: var(--text-3); }
.vd-lucro { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.vd-lucro .vl-bruto { font-size: 13px; color: var(--text-2); }
.vd-lucro .vl-seta { color: var(--text-3); font-size: 12px; }
.vd-lucro .vl-sobrou { font-size: 21px; font-weight: 800; color: var(--green); }
.vd-lucro .vl-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-3); font-weight: 700; }
.vd-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.vd-tag {
  font-size: 10.5px; font-weight: 650; padding: 2px 9px; border-radius: 14px;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vd-tag.t-pos { background: var(--green-soft); color: var(--green); border-color: transparent; }
.vd-tag.t-est { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.vd-tag.t-soc { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.vd-tag.t-neg { background: var(--red-soft); color: var(--red); border-color: transparent; }
.vd-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.vd-foot .actions-inline { white-space: nowrap; }

/* rodapé da lista: Σ bruto / Σ sobrou / retorno em aberto */
.vd-total {
  display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center;
  background: var(--card); border: 1px solid var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-radius: var(--radius); padding: 14px 22px; margin-top: 16px;
  font-variant-numeric: tabular-nums;
}
.vd-total .tt { display: flex; flex-direction: column; gap: 2px; }
.vd-total .tt-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-3); font-weight: 700; }
.vd-total .tt-v { font-size: 19px; font-weight: 800; }

/* mobile: tudo empilha */
@media (max-width: 820px) {
  .vd-grid { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #globalbar .quickbar { position: static; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .vd-total { gap: 10px 22px; }
}

/* v75L: menu "⋯" de ações da linha (linhas compactas — details/summary nativo) */
.acao-menu { position: relative; display: inline-block; }
.acao-menu summary { list-style: none; cursor: pointer; padding: 2px 10px; border-radius: 8px;
  font-size: 16px; font-weight: 700; color: var(--text-2); border: 1px solid var(--border); }
.acao-menu summary::-webkit-details-marker { display: none; }
.acao-menu[open] summary { color: var(--accent); border-color: var(--accent); }
.acao-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60;
  background: var(--card); border: 1px solid var(--border-2); border-radius: 10px;
  padding: 6px; min-width: 200px; box-shadow: 0 10px 26px rgba(0,0,0,.4);
  display: flex; flex-direction: column; gap: 2px; }
.acao-item { display: flex; gap: 8px; align-items: center; background: none; border: none;
  color: var(--text); padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; text-align: left; }
.acao-item:hover { background: rgba(128,128,128,.15); }
.acao-item.del { color: var(--red); }

/* v102: LEADS NOVOS — o card que o vendedor tem que ver antes de qualquer coisa */
.card-novos { position: relative; }
.card-novos.tem-novos {
  border-color: var(--red);
  border-width: 2px;
  background: linear-gradient(180deg, rgba(220,60,60,0.07), transparent 60%);
  box-shadow: 0 0 0 4px rgba(220,60,60,0.08);
  animation: novos-pulso 2.4s ease-in-out 3;
}
@keyframes novos-pulso {
  0%, 100% { box-shadow: 0 0 0 4px rgba(220,60,60,0.08); }
  50%      { box-shadow: 0 0 0 9px rgba(220,60,60,0.16); }
}
@media (prefers-reduced-motion: reduce) { .card-novos.tem-novos { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════
   v109 — iPHONE: a equipe instala o app no celular e a maioria usa iOS.
   Cada regra aqui resolve um problema real do Safari/iOS.
   ═══════════════════════════════════════════════════════════════════ */

/* 1) ÁREA SEGURA — notch, ilha dinâmica e barra de gestos.
      Nada de conteúdo ou botão escondido atrás delas. */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
body { background: var(--bg); }
.overlay { padding-top: var(--safe-t); padding-bottom: var(--safe-b); }
/* v109: área segura é assunto de CELULAR — no computador nada muda.
   v113: a consulta ganhou "ou aparelho de toque" porque o iPhone Pro Max DEITADO passa de 860px e
   ficava sem margem lateral — o texto entrava embaixo do notch. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  .topbar { padding-top: calc(12px + var(--safe-t)); }
  #content { padding-left: calc(12px + var(--safe-l)); padding-right: calc(12px + var(--safe-r)); }
}

/* 2) ZOOM INDESEJADO — o Safari dá zoom sozinho em campo com fonte < 16px.
      16px em TODO campo de digitação mata o problema na raiz.
      v113: ESTAVA DENTRO de @media (max-width:860px) — e iPhone Pro Max DEITADO tem 932px, Plus 926px
      e iPad 810-1024px. Acima de 860px a proteção sumia: girar o telefone pra digitar dava zoom
      sozinho e a tela ficava torta (e não voltava). Agora vale em QUALQUER largura em aparelho de
      toque, que é onde o problema existe. No computador nada muda (a consulta exige toque). */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea, .login-card input { font-size: 16px !important; }
  /* v113: password/email/tel/file não estavam no seletor da linha 205 e caíam no padrão do Safari */
  input[type="password"], input[type="email"], input[type="tel"], input[type="file"] { font-size: 16px !important; }
  /* nos campos pequenos de tabela, 16px é grande demais visualmente — compensa com padding menor */
  td input[type="number"], td input[type="text"], .num input, .mini-stat input { padding: 4px 6px; }
}

/* 3) ALTURA DA TELA — 100vh no iOS conta errado (barras aparecem/somem). */
.login-wrap { min-height: 100vh; min-height: 100dvh; padding: calc(24px + var(--safe-t)) 20px calc(24px + var(--safe-b)); }
/* o login é a única tela que a área segura toca no computador — e ali não muda nada (env=0) */
#app { min-height: 100vh; min-height: 100dvh; }
.overlay { height: 100vh; height: 100dvh; }

/* 4) ROLAGEM — suave, sem "quicar" a página inteira; listas rolam dentro delas. */
html, body { overscroll-behavior-y: none; }
/* v125 (Bloco F.3): rolagem lateral fantasma — uma tabela ou um card largo empurrava a página
   inteira pro lado no celular. O conteúdo largo continua rolando dentro do próprio .table-wrap. */
html { overflow-x: hidden; }
#content, .table-wrap, .modal { -webkit-overflow-scrolling: touch; }
.table-wrap { overscroll-behavior-x: contain; }

/* 5) TOQUE — alvo mínimo de 44×44pt (padrão da Apple), sem realce cinza e
      sem estado "preso" de hover (que no iOS gruda depois do toque). */
@media (hover: none) and (pointer: coarse) {
  .icon-btn, .btn, .tab, .resp-chip, .nav-item, summary, select, a.badge {
    min-height: 44px; min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .icon-btn { font-size: 18px; padding: 10px 12px; }
  .btn-ghost:hover, .btn:hover, .icon-btn:hover, .nav-item:hover { background: inherit; color: inherit; }
  td .icon-btn { min-width: 40px; min-height: 40px; }
}
* { -webkit-tap-highlight-color: transparent; }
button, a, .tab, .nav-item, summary { touch-action: manipulation; }

/* 6) LOGIN centralizado de verdade, com a marca acima do formulário */
.login-card { max-width: 400px; padding: 30px 24px 26px; }
.login-logo {
  width: 88px; height: 88px; object-fit: contain; border-radius: 20px;
  margin-bottom: 16px; background: #000; padding: 6px;
}
.login-card input { padding: 14px 14px; }
.login-btn { min-height: 52px; margin-top: 20px; }
@media (max-width: 430px) {
  .login-card { max-width: 100%; border: none; background: transparent; box-shadow: none; padding: 20px 18px; }
  .login-wrap { align-items: center; }
}

/* 7) o app instalado não deve permitir seleção acidental de texto ao segurar */
.nav-item, .tab, .btn, .card-title { -webkit-user-select: none; user-select: none; }
input, textarea, td, .mini-stat, pre { -webkit-user-select: text; user-select: text; }

/* ── v109: 🔔 convite pra ligar o aviso no celular (aparece só depois do primeiro uso) ── */
#push-convite {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--safe-b, 0px)); z-index: 9000;
  background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 14px; padding: 14px 16px; box-shadow: 0 10px 34px rgba(0,0,0,.45);
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; max-width: 620px; margin: 0 auto;
  animation: pcSobe .28s ease-out;
}
@keyframes pcSobe { from { transform: translateY(18px); opacity: 0 } to { transform: none; opacity: 1 } }
#push-convite .pc-txt { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; }
#push-convite .pc-txt b { font-size: 14.5px; }
#push-convite .pc-txt span { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
#push-convite .pc-bt { display: flex; gap: 8px; }
@media (max-width: 430px) { #push-convite .pc-bt { width: 100%; } #push-convite .pc-bt .btn { flex: 1; } }

/* ═══════════════════════════════════════════════════════════════════════
   v109 · 📱 REDESENHO DE CELULAR — nada aqui vale pra tela de computador.
   O menu lateral sai, a navegação desce pro polegar, a IA vira botão e a
   informação fica mais densa. Corte: 860px (o mesmo do resto do arquivo).
   ═══════════════════════════════════════════════════════════════════════ */
#tabbar { display: none; }
#ia-flutua { display: none; }

/* v113: a segunda condição é "CELULAR DEITADO". iPhone Pro Max em paisagem tem 932px de largura
   (Plus 926px) — passava de 860 e o redesenho inteiro da v109 desligava: a barra de baixo sumia, o
   menu lateral de 232px voltava e o ⚡ desaparecia, virando "versão de computador" no telefone.
   Uso a ALTURA (≤500px) em vez de só largura porque é o que separa telefone deitado (430-450px de
   altura) de iPad deitado (810px+) — assim o iPad continua com o layout grande, que é o certo. */
@media (max-width: 860px), (orientation: landscape) and (max-height: 500px) {
  /* C4 — o menu lateral SOME; quem navega é a barra de baixo */
  :root { --sidebar-w: 0px; }
  .sidebar { display: none !important; }
  /* a .main tinha margem do tamanho do menu lateral — era isso que empurrava a página
     pra fora da tela e cortava o conteúdo à direita no iPhone do Neto. */
  .main { margin-left: 0 !important; width: 100%; max-width: 100vw; min-width: 0; }

  #tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 8000;
    background: var(--card); border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + var(--safe-b, 0px));
    box-shadow: 0 -6px 20px rgba(0,0,0,.28);
  }
  .tb-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 2px; min-height: 48px; border: 0; background: none; cursor: pointer;
    color: var(--text-2); text-decoration: none; font-family: inherit;
  }
  .tb-item.on { color: var(--accent); }
  .tb-ico { position: relative; font-size: 19px; line-height: 1; }
  .tb-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .1px; white-space: nowrap; }
  .tb-badge {
    position: absolute; top: -5px; right: -12px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 9px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
    display: grid; place-items: center;
  }
  /* a barra não pode tapar o fim da página */
  #content { padding-bottom: calc(86px + var(--safe-b, 0px)) !important; }

  /* folha "Mais" e folha da IA */
  #mais-folha, #ia-folha { position: fixed; inset: 0; z-index: 8500; }
  .ms-fundo { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
  .ms-folha, .ia-painel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; max-height: 86dvh; overflow-y: auto; /* v113 */
    background: var(--card); border-top-left-radius: 18px; border-top-right-radius: 18px;
    padding: 14px 16px calc(20px + var(--safe-b, 0px));
    animation: folhaSobe .22s ease-out;
  }
  @keyframes folhaSobe { from { transform: translateY(100%) } to { transform: none } }
  .ms-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .ms-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-2); margin: 12px 0 6px; }
  .ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ms-item {
    display: flex; align-items: center; gap: 9px; padding: 12px 12px; min-height: 48px;
    background: var(--bg-2); border: 1px solid var(--border); border-radius: 11px;
    color: var(--text); text-decoration: none; font-size: 13.5px; text-align: left;
    font-family: inherit; cursor: pointer;
  }
  .ms-ico { font-size: 17px; }

  /* C6 — a barra de IA sai do topo e vira botão redondo acima da barra de baixo */
  #globalbar { display: none; }
  #ia-flutua {
    display: grid; place-items: center; position: fixed; right: 14px;
    bottom: calc(76px + var(--safe-b, 0px)); z-index: 7900;
    width: 52px; height: 52px; border-radius: 50%; border: 0;
    background: var(--accent); color: #111214; font-size: 24px; cursor: pointer;
    box-shadow: 0 8px 22px rgba(0,0,0,.4);
  }

  /* C5 — cabeçalho de uma linha só, sem cortar nada */
  /* nada de overflow:hidden aqui — cortava o seletor de mês. Os itens ENCOLHEM. */
  /* ⚠️ v130: NUNCA usar o atalho `padding:` aqui. Ele apagava o `padding-top` com --safe-t da
     linha 872 e a topbar voltava pra debaixo do relógio do iPhone (status bar translúcida).
     Era o bug do print: "Hoje" colidindo com 20:56 e a bateria comendo o seletor de mês.
     Só propriedades específicas — o topo é assunto da regra de área segura, não desta. */
  .topbar { padding-right: 12px; padding-bottom: 10px; padding-left: 12px; gap: 8px; flex-wrap: nowrap; }
  .topbar > * { min-width: 0; }
  .topbar h2 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .comp-label { display: none; }
  .topbar #comp-select { font-size: 13px; padding: 7px 8px; max-width: 44vw; }
  .top-user { display: none; } /* usuário e Sair moram na folha "Mais" agora */

  /* C5/C10 — a página NUNCA rola na horizontal */
  html, body { overflow-x: hidden; max-width: 100%; }
  #content, .card, .main { max-width: 100%; }
  #content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre, code { white-space: pre-wrap; word-break: break-word; }

  /* C8 — botão nenhum quebra em duas linhas */
  .btn { white-space: nowrap; min-height: 44px; padding: 10px 14px; font-size: 13.5px; }
  .btn.resp-chip { min-height: 38px; padding: 8px 11px; font-size: 12.5px; }

  /* C9 — densidade: mais informação por tela, sem apertar a leitura */
  /* v130: mesmo bug da topbar, achado na varredura — este atalho apagava o padding lateral com
     --safe-l/--safe-r da linha 873. Com o iPhone DEITADO (notch na lateral) o texto entrava
     embaixo do recorte. Topo e laterais ficam com quem cuida da área segura. */
  #content { padding-top: 12px; padding-bottom: calc(86px + var(--safe-b, 0px)); }
  /* v130: o ⚡ flutuante tapava conteúdo (no print ele estava por cima de "A pagar"). Ele ocupa
     de 76px a 128px acima da borda; a folga de 86px não dava conta. Só reserva espaço em quem
     TEM o botão — a equipe não paga por um vão que não usa. */
  body.com-fab130 #content { padding-bottom: calc(146px + var(--safe-b, 0px)); }
  .card { padding: 13px 14px; margin-bottom: 10px; }
  .card-title { font-size: 14px; margin-bottom: 8px; }
  .mini-stat { padding: 7px 0; font-size: 13px; }
  .lead-row { padding: 10px 0; gap: 8px; }
  .muted { font-size: 12px; }
}

/* v130: até 430px (o Pro Max em pé) dois campos lado a lado furam a tela — o mínimo de 170px
   de cada um soma 340 + 14 de vão + 24 de margem = 378. Abaixo disso, um por linha. */
@media (max-width: 430px) {
  .form-inline .field { min-width: 100%; }
  .qb-fields { grid-template-columns: 1fr; }
  .acoes-rapidas110 { grid-template-columns: 1fr 1fr; }
}

/* iPhone estreito (SE, 375px): aperta mais um pouco sem perder legibilidade */
@media (max-width: 390px) {
  .tb-lbl { font-size: 10px; }
  .ms-grid { grid-template-columns: 1fr; }
  /* v130: 10px + a área segura (não 10px puro) — senão o SE deitado perde o recuo do notch */
  #content { padding-left: calc(10px + var(--safe-l, 0px)); padding-right: calc(10px + var(--safe-r, 0px)); }
}

/* ---------- v109: 👋 tour do primeiro acesso ---------- */
#tour-109 { position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,.68); display: grid; place-items: center; padding: 20px; }
.tour-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 26px 24px 20px; max-width: 380px; width: 100%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.tour-ico { font-size: 42px; line-height: 1; margin-bottom: 10px; }
.tour-card h3 { margin: 0 0 8px; font-size: 19px; }
.tour-card p { color: var(--text-2); font-size: 13.5px; line-height: 1.55; margin: 0 0 16px; }
.tour-pontos { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; }
.tour-pontos span { width: 7px; height: 7px; border-radius: 50%; background: var(--border-2); }
.tour-pontos span.on { background: var(--accent); width: 18px; border-radius: 4px; }
.tour-bt { display: flex; gap: 8px; }
.tour-bt .btn { flex: 1; min-height: 46px; }
.tour-nao { display: block; margin-top: 12px; font-size: 12px; color: var(--text-2); cursor: pointer; }

/* ---------- v109 · C7: resumo do dia em NÚMEROS (vale no PC e no celular) ---------- */
.resumo-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.resumo-topo .briefing-txt { font-size: 14px; flex: 1; min-width: 200px; color: var(--text-2); }
.resumo-topo .btn { white-space: nowrap; }
.resumo109 { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 12px 0 10px; }
.resumo109 .rb {
  display: flex; flex-direction: column; gap: 1px; padding: 11px 12px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--border); text-decoration: none; min-width: 0;
}
.resumo109 .rb-n { font-size: clamp(17px, 4.6vw, 23px); font-weight: 800; color: var(--text); line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resumo109 .rb-n.alerta { color: var(--accent); }
/* v130: RÓTULO EM CIMA, NÚMERO EMBAIXO, tudo à esquerda — é assim que o olho varre uma
   coluna de números. Só a ordem visual muda; o HTML continua o mesmo. */
.resumo109 .rb-l { order: -1; margin-bottom: 2px; }
.resumo109 .rb-l { font-size: 11.5px; color: var(--text-2); text-transform: uppercase; letter-spacing: .3px; }
.resumo109 .rb-s { font-size: 11px; color: var(--text-2); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ═══ v142: a linha do DIA DE HOJE no painel de consignação ═══ */
.hoje142 {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  background: var(--bg-2); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 9px 12px; margin: 0 0 10px; font-size: 13.5px;
}
.hoje142.vazio { border-left-color: var(--red); color: var(--text-2); }
.hoje142 .h142-rot { font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--accent); }
.hoje142 strong { font-size: 16px; }
.hoje142 .h142-conv { margin-left: auto; color: var(--text-2); }
@media (max-width: 560px) { .hoje142 .h142-conv { margin-left: 0; } }

/* ═══ v140: 👥 cartão de funcionário — feito pra quem não é chegado em computador ═══
   Número grande, uma ação principal, nada de tabela larga. */
.func140 {
  background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
}
.func140.pago { border-left-color: var(--green); opacity: .82; }
.func140-topo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.func140-nome { font-size: 17px; font-weight: 700; flex: 1 1 auto; min-width: 0; }
.func140-total { font-size: 24px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.func140.pago .func140-total { color: var(--green); }
.func140-partes { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-2); margin-bottom: 12px; }
.func140-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.func140-acoes .btn { min-height: 44px; }
@media (max-width: 860px) {
  .func140-total { font-size: 22px; }
  .func140-acoes .btn { flex: 1 1 auto; }
  .func140-acoes .btn-primary { flex: 1 1 100%; }
}

/* ═══ v130: ⏰ linha de lead parado — escada de cor pelos dias, UMA ação primária ═══ */
.sr130 {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 6px;
  background: var(--bg-2); border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 10px;
}
.sr130.amber { border-left-color: var(--accent); }
.sr130.red { border-left-color: var(--red); }
.sr130 .sr130-p { flex: 1 1 auto; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.sr130 .sr130-p .muted { display: block; font-size: 11.5px; }
.sr130 .sr130-d { flex: 0 0 auto; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.sr130.amber .sr130-d { color: var(--accent); }
.sr130.red .sr130-d { color: var(--red); }
.sr130 .sr130-b { flex: 0 0 auto; padding: 7px 12px; font-size: 12.5px; white-space: nowrap; }
.sr130 .sr130-m { flex: 0 0 auto; padding: 7px 10px; font-size: 15px; line-height: 1; }
@media (max-width: 430px) { /* no celular estreito o cliente ocupa a linha toda */
  .sr130 { flex-wrap: wrap; }
  .sr130 .sr130-p { flex: 1 1 100%; }
  /* o botão hug o próprio texto e encosta na direita — esticado ele vira a coisa mais
     pesada da tela e rouba a atenção de quem é o assunto (o cliente e os dias parados) */
  .sr130 .sr130-b { flex: 0 1 auto; margin-left: auto; }
}

/* ═══ v130: o bloco "precisa de você hoje" — a primeira dobra da tela Hoje ═══ */
.precisa130 { margin: 10px 0 4px; }
.precisa130 .p130-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); margin-bottom: 6px; }
.precisa130 .p130-linha {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; margin-bottom: 6px;
  background: var(--bg-2); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 10px;
}
.precisa130 .p130-linha.urg { border-left-color: var(--red); }
.precisa130 .p130-ico { font-size: 17px; flex: 0 0 auto; }
.precisa130 .p130-txt { flex: 1 1 auto; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.precisa130 .p130-btn { flex: 0 0 auto; padding: 6px 12px; font-size: 12.5px; white-space: nowrap; }

/* v130: os atalhos que ERAM cinco botões grandes no topo — agora texto pequeno embaixo */
.atalhos130 { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.atalhos130 .at130 {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--text-2); font-size: 12.5px; font-family: inherit;
}
.atalhos130 .at130:hover { color: var(--accent); }

.caixa109 summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.caixa109 summary::-webkit-details-marker { display: none; }
.caixa109 .cx-l { font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: .4px; }
.caixa109 .cx-v { font-size: clamp(20px, 5.6vw, 28px); font-weight: 800; color: var(--text); }
.caixa109 .cx-mais { font-size: 11.5px; color: var(--accent); margin-left: auto; }
@media (max-width: 860px) {
  .resumo109 { grid-template-columns: 1fr 1fr; gap: 7px; }
  .resumo-topo .briefing-txt { display: none; } /* no celular quem fala são os números */
  .resumo-topo .btn { width: 100%; }
}

/* v109 · C8/C10: título de card no celular — o sufixo em cinza desce pra própria linha
   em vez de espremer o título (e nada fica embaixo do botão ⚡). */
@media (max-width: 860px) {
  .card-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; line-height: 1.3; }
  .card-title .muted { flex-basis: 100%; margin-left: 0 !important; font-size: 11.5px; }
  .card:last-child { margin-bottom: 8px; }
  #theme-toggle { min-height: 44px; min-width: 44px; }
}

/* v109 · C8: alvo de toque de 44px vale por LARGURA de tela, não só por tipo de ponteiro
   (o navegador nem sempre se declara "dedo", e o dedo continua sendo dedo). */
@media (max-width: 860px) {
  select, .btn, button, .tab, summary, input[type="checkbox"] + span { min-height: 44px; }
  select { padding: 8px 10px; }
  .btn.resp-chip { min-height: 44px; padding: 8px 12px; }
  td select, td .btn, .mini-stat select { min-height: 40px; }
}

/* v109 · C10: no celular, qualquer fila de botões dentro de um título de card
   quebra linha em vez de empurrar o conteúdo pra fora da tela. */
@media (max-width: 860px) {
  .card-title span[style*="margin-left:auto"] { flex-wrap: wrap; margin-left: 0 !important; width: 100%; }
  .card-title span[style*="display:flex"] > .btn { flex: 1 1 auto; }
}

/* ── v109 · C10: nada mais largo que a tela. As grades viram COLUNA ÚNICA, os cards
   não podem crescer além do pai, e a tabela rola dentro do próprio quadro. ── */
@media (max-width: 860px), (orientation: landscape) and (max-height: 500px) { /* v113: +celular deitado */
  .grid, .grid-2, .grid-3, .vd-grid, .form-grid { grid-template-columns: 1fr !important; gap: 10px; }
  /* v158: o formulário cortava campo no celular. A grade já virava coluna única aqui, mas o
     `.field` é item de grid SEM `min-width:0` — e item de grid não encolhe abaixo do próprio
     conteúdo. Medido em 390px: `descrição` e `valor` do gasto iam até 474px (84px fora da tela),
     e no form de retirada `data` e `sócio` até 463px. Vale pra TODO formulário do app, não só
     os novos. Só no celular de propósito: no PC nada muda. */
  .field { min-width: 0; }
  .field input, .field select, .field textarea { max-width: 100%; box-sizing: border-box; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .card, .section, .main, .table-wrap { min-width: 0; max-width: 100%; }
  .table-wrap { overflow-x: auto; }
  .table-wrap table { width: max-content; min-width: 100%; }

  /* ═══ v130: A TABELA DE 5+ COLUNAS VIRA CARTÃO ═══
     Quem carimba o `data-label` em cada célula é a tabelaCartao130() do app.js — aqui é só a
     aparência. Até 4 colunas continua tabela (cabe e lê melhor). O `width: max-content` da
     regra acima é justamente o que fazia arrastar pro lado: no cartão ele morre. */
  .table-wrap table.t-cartao { width: 100%; min-width: 0; display: block; }
  table.t-cartao thead { display: none; }              /* o rótulo agora mora em cada linha */
  table.t-cartao tbody { display: block; }
  table.t-cartao tr {
    display: block; background: var(--bg-2); border: 1px solid var(--border);
    border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
  }
  table.t-cartao td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    border: none; padding: 4px 0; font-size: 13px; text-align: right;
    overflow-wrap: anywhere; min-width: 0;
    /* a regra base de tabela é `white-space: nowrap` — é ela que empurrava o card pro lado.
       Em cartão o texto TEM que quebrar: não existe pra onde arrastar. */
    white-space: normal;
  }
  table.t-cartao td .placa-mono, table.t-cartao td .badge { white-space: nowrap; } /* estes não quebram no meio */
  table.t-cartao td::before {
    content: attr(data-label); color: var(--text-2); font-size: 11.5px; text-transform: uppercase;
    letter-spacing: .3px; text-align: left; flex: 0 1 auto; white-space: nowrap;
  }
  /* a primeira coluna é o TÍTULO do cartão: linha inteira, sem rótulo, com filete embaixo */
  table.t-cartao td:first-child {
    display: block; text-align: left; font-size: 15px; font-weight: 700;
    border-bottom: 1px solid var(--border); padding-bottom: 7px; margin-bottom: 4px;
  }
  table.t-cartao td:first-child::before { content: none; }
  table.t-cartao td.tc-vazia { display: none; }        /* célula sem nada some — sem rótulo órfão */
  /* cartão "cego": tabela sem <thead>, sem nome de coluna pra mostrar */
  table.t-cego td { display: block; text-align: left; }
  table.t-cego td::before { content: none; }
  table.t-cego td:first-child { border-bottom: 1px solid var(--border); }
  table.t-cartao tr.tc-larga td { display: table-cell; text-align: left; }  /* linha de total */
  table.t-cartao td .btn { flex: 1 1 auto; min-height: 44px; }
  table.t-cartao td select, table.t-cartao td input { max-width: 60%; }

  /* v130: texto comprido (observação, nome de cliente, modelo inteiro) quebra em vez de
     empurrar o card pro lado. Sem isto sobra uma faixa de rolagem dentro do quadro. */
  .card .muted, .card .badge, .badge, td .muted, td .placa-mono { overflow-wrap: anywhere; min-width: 0; }

  /* ── v130: os pontos medidos que estouravam 375px ── */
  /* o seletor de mês cortava "Agosto 2026" em 165px; agora quem encolhe primeiro é o título,
     que já tem reticências pra isso */
  .topbar #comp-select { max-width: none; flex: 0 1 auto; }
  .topbar h2 { flex: 1 1 auto; }
  .prog { min-width: 0; }                 /* a barra ocupa o que sobra, não exige 140px */
  .vf-p-linha { min-width: 0; }
  .vf-p-linha span { min-width: 0; flex: 0 1 auto; }
  .vd-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  /* valor e rótulo dividem a linha; se não couber, o valor desce (nunca fura a tela) */
  .mini-stat { flex-wrap: wrap; gap: 2px 10px; }
  .mini-stat .l { flex: 1 1 60%; min-width: 0; }
  .mini-stat .v { margin-left: auto; text-align: right; }
  .mini-stat input, .mini-stat select { max-width: 100%; }
  /* nome de carro + placa numa linha que quebra em vez de empurrar */
  .lead-row, .alerta-item { flex-wrap: wrap; }
  .lead-row > *, .alerta-item > * { min-width: 0; }
  .placa-mono { white-space: nowrap; }
  strong.accent-v, .a-txt { overflow-wrap: anywhere; }
  /* abas do hub: uma linha por aba, sem texto partido no meio */
  #hubtabs .tab { white-space: nowrap; }
}

/* v109 · C10: a linha "🚗 modelo + placa" do lead (v99) fica junta no computador,
   mas no celular precisa caber: o modelo encolhe com reticências e a placa fica inteira. */
.carro-lead { white-space: nowrap; display: inline-flex; align-items: baseline; gap: 4px; max-width: 100%; min-width: 0; }
.carro-lead .accent-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 860px) {
  /* filho de grade nunca é medido pelo conteúdo mais largo (tabela dentro de card) */
  .grid > *, .grid-2 > *, .grid-3 > * { min-width: 0; }
}

/* ═══ v110 · BLOCO A — gestos e carregamento ═══ */
/* esqueleto de carregamento (vale no PC e no celular — melhor que tela piscando) */
.skel110 { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.sk-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.sk-l { height: 13px; border-radius: 7px; margin: 8px 0;
  background: linear-gradient(90deg, var(--border) 25%, var(--bg-2) 50%, var(--border) 75%);
  background-size: 200% 100%; animation: skBrilho 1.1s linear infinite; }
.sk-l.w40 { width: 40%; } .sk-l.w70 { width: 70%; } .sk-l.w90 { width: 90%; }
@keyframes skBrilho { from { background-position: 200% 0 } to { background-position: -200% 0 } }
@media (prefers-reduced-motion: reduce) { .sk-l { animation: none; } }

/* deslizar o card do lead (só o celular liga o JS; o CSS é inerte no PC) */
.lead-card110 { position: relative; touch-action: pan-y; }
.lead-card110.swipando { z-index: 2; }
.swipe-fundo { position: absolute; inset: 0; border-radius: 10px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 16px; pointer-events: none; z-index: -1; opacity: 0; }
.swipe-fundo .sw-dir, .swipe-fundo .sw-esq { font-weight: 700; font-size: 14px; opacity: 0; transition: opacity .1s; }
.swipe-fundo.sw-mostra-dir { opacity: 1; background: rgba(34,160,90,.18); }
.swipe-fundo.sw-mostra-dir .sw-dir { opacity: 1; color: #2fbf71; }
.swipe-fundo.sw-mostra-esq { opacity: 1; background: rgba(230,170,60,.16); }
.swipe-fundo.sw-mostra-esq .sw-esq { opacity: 1; color: var(--accent); margin-left: auto; }
.swipe-fundo.sw-pronto { box-shadow: inset 0 0 0 2px var(--accent); }

/* puxar pra atualizar */
#ptr-110 { position: fixed; left: 50%; transform: translateX(-50%); top: -34px; z-index: 8600;
  width: 38px; height: 38px; border-radius: 50%; background: var(--card); border: 1px solid var(--border);
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: top .05s linear; }
#ptr-110 .ptr-seta { font-size: 18px; color: var(--text-2); transition: transform .15s; }
#ptr-110.ptr-pronto .ptr-seta { color: var(--accent); }
#ptr-110.ptr-girando .ptr-seta { animation: ptrGira .7s linear infinite; color: var(--accent); }
@keyframes ptrGira { to { transform: rotate(360deg) } }

/* ═══ v110 · rascunho + venda em passos (celular) ═══ */
.rasc-aviso110 { background: var(--accent-soft, rgba(247,146,30,.12)); border: 1px solid var(--accent);
  border-radius: 10px; padding: 8px 12px; font-size: 13px; margin: 0 0 10px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#vf-passos { position: sticky; top: -14px; z-index: 4; background: var(--card); padding: 8px 2px;
  margin: 0 0 6px; border-bottom: 1px solid var(--border); display: none; }
#vf-passos .vfp-titulo { font-weight: 800; font-size: 15px; }
#vf-passos .vfp-pontos { display: flex; gap: 6px; margin-top: 6px; }
#vf-passos .vfp-pontos span { height: 5px; flex: 1; border-radius: 3px; background: var(--border-2); }
#vf-passos .vfp-pontos span.on { background: var(--accent); }
#vf-passos .vfp-pontos span.ok { background: var(--accent); opacity: .45; }
#vf-passos-nav { display: none; position: sticky; bottom: -14px; z-index: 4; background: var(--card);
  padding: 10px 2px calc(10px + var(--safe-b, 0px)); margin-top: 10px; border-top: 1px solid var(--border);
  display: none; justify-content: space-between; gap: 10px; }
#vf-passos-nav .btn { flex: 1; min-height: 48px; }
@media (max-width: 860px) {
  #vf-passos { display: block; }
  #vf-passos-nav { display: flex; }
}

/* ═══ v110 · integrações ═══ */
/* F3: os 4 lançamentos de sempre, à mão */
.acoes-rapidas110 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0 4px; }
.acoes-rapidas110 .btn { min-height: 52px; font-size: 14px; font-weight: 700; }

/* D1: faixa de rede + badge da fila */
#semrede110 { position: fixed; top: 0; left: 0; right: 0; z-index: 9600; background: #8a2c2c; color: #fff;
  text-align: center; font-size: 13px; padding: 8px calc(8px + var(--safe-r, 0px)) 8px calc(8px + var(--safe-l, 0px));
  padding-top: calc(8px + var(--safe-t, 0px)); }
#fila110-badge { position: fixed; left: 12px; bottom: calc(140px + var(--safe-b, 0px)); z-index: 8400;
  background: var(--card); border: 1px solid var(--accent); color: var(--text); border-radius: 20px;
  padding: 6px 14px; font-size: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }

/* E1: barra de desfazer (10s) */
#desfazer110 { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + var(--safe-b, 0px));
  z-index: 9100; background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 16px; display: flex; align-items: center; gap: 12px; font-size: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); animation: pcSobe .2s ease-out; max-width: 92vw; }
#desfazer110 .btn { min-height: 40px; padding: 6px 14px; color: var(--accent); font-weight: 700; }
#desfazer110 .df-tempo { font-size: 11px; color: var(--text-2); min-width: 26px; text-align: right; }

/* E2: resultados da busca global */
.busca-sec { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-2);
  margin: 12px 0 4px; display: flex; gap: 8px; align-items: center; }
.busca-item { padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; margin: 4px 0;
  cursor: pointer; font-size: 13.5px; line-height: 1.45; }
.busca-item:hover { border-color: var(--accent); }

/* E3/C3: ficha do carro + fotos */
.ficha-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 8px 0; }
.ficha-foto { position: relative; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border); cursor: pointer; background: var(--bg-2); }
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ficha-capa { position: absolute; left: 4px; top: 4px; background: var(--accent); color: #111;
  font-size: 9.5px; font-weight: 800; border-radius: 6px; padding: 1px 6px; }
.ficha-foto-acoes { position: absolute; right: 3px; bottom: 3px; display: flex; gap: 4px; }
/* v125 (Bloco F.4): 26px de alvo era impossível de acertar no dedo — apagar foto por engano
   é irreversível. Agora 40×40, o mínimo recomendado pra toque. */
.ficha-foto-acoes button { border: 0; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff;
  font-size: 15px; padding: 6px 8px; cursor: pointer; min-height: 40px; min-width: 40px; }
.placa-mono { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }

/* capa do carro no card do lead */
.lead-capa110 { width: 46px; height: 36px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border); flex: none; cursor: pointer; }

/* v110: no celular o tema claro/escuro mora na folha ☰ Mais — o botão ◐ sai do topo
   (com a lupa 🔍 ele estourava a largura na tela do financeiro) */
@media (max-width: 860px) { #theme-toggle { display: none; } }

/* ═══ v111 · 👁 faixa do ver-como (fixa, impossível de não ver) ═══ */
#vercomo-faixa { position: fixed; top: 0; left: 0; right: 0; z-index: 9700;
  background: #5b3ba5; color: #fff; text-align: center; font-size: 13.5px;
  padding: 8px 10px; padding-top: calc(8px + var(--safe-t, 0px));
  display: flex; gap: 12px; align-items: center; justify-content: center; }
#vercomo-faixa .btn { min-height: 32px; padding: 4px 14px; background: rgba(255,255,255,.15);
  color: #fff; border: 1px solid rgba(255,255,255,.4); font-weight: 700; }
body.com-vercomo .topbar { top: 40px; }
body.com-vercomo #content { padding-top: 46px; }
@media (max-width: 860px) { body.com-vercomo #tabbar { display: none; } } /* leitura: menos é mais */

/* ---------- v125: 🗂️ FUNIL de leads (colunas por etapa) ---------- */
.funil125 { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.funil125-col { flex: 0 0 clamp(210px, 46vw, 260px); background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.funil125-tit { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--text-2);
  display: flex; align-items: center; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }

/* v125 (Bloco F.1): com o teclado do iPhone aberto a barra de baixo sai da frente */
#tabbar.teclado-aberto125 { display: none !important; }

/* v146: status da venda clicável — 1 toque abre os chips e troca (mesmo gesto do lead).
   Alvo de toque grande no celular: o selo inteiro é o botão, sem borda de botão pra não
   competir visualmente com o resto do rodapé do card. */
.st-venda146 { background: none; border: 0; padding: 2px 4px; margin: 0 -2px; cursor: pointer;
  border-radius: 6px; font: inherit; color: inherit; min-height: 30px; }
.st-venda146:hover { background: var(--hover, rgba(127,127,127,.12)); }
.vd-chips146 { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }

/* v148: calculadora de financiamento legível no celular. O layout antigo (form-inline +
   mini-stat) jogava o "48× —" e o "60× —" nas pontas opostas da linha no 390px: o rótulo de um
   lado, o valor do outro, e a taxa espremida no canto. Agora o valor a digitar fica em cima,
   grande, e as duas parcelas viram dois blocos lado a lado — é o que ele lê na frente do cliente. */
.calc148 label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.calc148 > input { width: 100%; font-size: 20px; font-weight: 700; padding: 12px; text-align: center; }
.calc148-res { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.calc148-res > div { background: var(--card-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 6px; text-align: center; }
.calc148-res .cx { display: block; font-size: 11px; color: var(--text-2); letter-spacing: .04em; }
.calc148-res strong { font-size: 19px; line-height: 1.25; display: block; }

/* v149: carimbos de conferência da ficha (papel × app) no rodapé do formulário de venda.
   Duas caixas lado a lado, do jeito que a ficha impressa tem: "Conferido pelo financeiro" e
   "Visto do Neto". O nome e a data são carimbados pelo app — ninguém digita a própria assinatura. */
.vf-carimbos149 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 2px; }
.vf-carimbos149 > div { border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.vf-carimbos149 .l { display: block; width: 100%; font-size: 11px; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .04em; }
.vf-carimbos149 .btn { padding: 2px 10px; font-size: 11.5px; margin-left: auto; }
@media (max-width: 560px) { .vf-carimbos149 { grid-template-columns: 1fr; } }

/* v150: busca do comprador — um campo só, no lugar dos três antigos (da base · novo · lead).
   Campo largo e resultados em lista tocável: quem lança digita "Jean" ou o telefone e escolhe. */
.vf-comprador150 { margin: 4px 0 10px; }
.vf-comprador150 > label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.vf-comprador150 > input { width: 100%; font-size: 16px; padding: 11px 12px; }
.vf-cbres150 { border: 1px solid var(--border); border-radius: 10px; margin-top: 6px; overflow: hidden; }
.vf-cbitem150 { display: block; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--border); padding: 9px 12px; cursor: pointer; color: inherit; font: inherit; }
.vf-cbitem150:last-child { border-bottom: 0; }
.vf-cbitem150:hover { background: var(--card-2); }
.vf-cbitem150 .n { display: block; font-weight: 700; font-size: 14px; }
.vf-cbitem150 .d { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.vf-cbitem150.novo { background: var(--card-2); }
.vf-cbsel150 { border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.vf-cbtopo150 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.vf-cbtopo150 .btn { margin-left: auto; padding: 2px 10px; font-size: 11.5px; }

/* v150: no celular o wizard tem a barra "Continuar →" grudada no rodapé (z-index 4). O bloco do
   comprador é o último do passo 1, então a lista de resultados nascia atrás dela. O respiro
   abaixo garante que a lista sempre caiba acima da barra. */
@media (max-width: 860px) { .vf-comprador150 { padding-bottom: 64px; } }

/* v157: a tela do vendedor que lança a própria venda. Alvo de toque grande e nada de tabela
   larga — ele lança pelo celular, na loja, com o cliente do lado. */
.vv157-novo { width: 100%; padding: 14px; font-size: 15.5px; margin-bottom: 12px; }
.vv157-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent);
  cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.vv157-falta { background: var(--card-2); border-left: 3px solid var(--amber, #d79020);
  border-radius: 8px; padding: 9px 12px; margin-bottom: 10px; font-size: 13.5px; }
.vv157-info { background: var(--card-2); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 9px 12px; margin-bottom: 10px; font-size: 13px; color: var(--text-2); }
.vv157-sum { cursor: pointer; font-weight: 700; padding: 10px 0; font-size: 14.5px; }
/* Sem `min-width:0` um item de grid não encolhe abaixo do próprio conteúdo — e o select de
   carros tem 114 opções com nome comprido. Medido: os campos iam até 483px numa tela de 390.
   É o mesmo tipo de estouro que a v130 caçou nas tabelas. */
.vv157-form .field { min-width: 0; }
.vv157-form select, .vv157-form input, .vv157-form textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.vv157-form select { text-overflow: ellipsis; }
.vv157-nota { font-size: 12px; margin: 6px 0 0; }
@media (max-width: 860px) { .vv157-novo { position: sticky; top: 0; z-index: 3; } }

/* v158: a barrinha do "onde foi o dinheiro" — proporção de cada categoria no gasto do mês.
   Nada de biblioteca de gráfico: uma div com largura em % lê igual e não pesa. */
.barra158 { height: 6px; border-radius: 4px; background: var(--card-2); margin: 5px 0 3px; overflow: hidden; max-width: 320px; }
.barra158 i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }

/* ═══════════════ v164 · UMA PORTA SÓ PRO DINHEIRO QUE SAI ═══════════════
   Cartões grandes de dedo, um por tipo de saída. A cor da borda separa o que é despesa da loja
   (accent), o que é do carro (âmbar), o que é dinheiro da venda indo pro dono/sócio (verde) e o
   que é retirada (azul) — as quatro coisas que estavam todas caindo em "Gastos". */
.lanc164-box { display: flex; flex-direction: column; gap: 8px; }
.lanc164 {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  width: 100%; text-align: left; cursor: pointer; font-family: inherit; font-size: 14px;
  background: var(--card-2); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 12px; padding: 13px 14px; min-height: 62px; color: var(--text);
}
.lanc164:hover { border-color: var(--accent); background: var(--card); }
.l164-ico { font-size: 22px; line-height: 1; }
.l164-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.l164-txt strong { font-size: 14.5px; }
.l164-txt .muted { font-size: 11.5px; line-height: 1.35; }
.l164-seta { font-size: 20px; color: var(--text-2); }

/* ═══════════════ v161 · O PAGAMENTO NO CARD DA VENDA ═══════════════
   Uma linha por fluxo, com barra de progresso: dá pra varrer a lista inteira e ver quem já pagou
   e quem falta, sem abrir venda nenhuma. A linha toda é botão — abre o 💳 já na aba certa. */
.fx161-box { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 2px; }
.fx161 {
  display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 8px;
  width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--card-2); border: 1px solid var(--border); border-left: 3px solid var(--red);
  border-radius: 9px; padding: 7px 10px; min-height: 40px; color: var(--text);
}
.fx161:hover { border-color: var(--accent); }
.fx161.ok { border-left-color: var(--green); }
.fx161.meio { border-left-color: var(--amber, #E8B34A); }
.fx161-r { font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
.fx161-b { height: 6px; border-radius: 4px; background: var(--bg-2); overflow: hidden; min-width: 40px; }
.fx161-b i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.fx161.ok .fx161-b i { background: var(--green); }
.fx161-v { font-size: 12px; white-space: nowrap; }
.fx161.ok .fx161-v strong { color: var(--green); }
.fx161.falta .fx161-v strong, .fx161.meio .fx161-v strong { color: var(--red); }
/* no celular a linha vira duas: rótulo+valor em cima, barra embaixo (senão o valor some) */
@media (max-width: 860px) {
  .fx161 { grid-template-columns: 1fr auto; grid-template-areas: "rot val" "bar bar"; row-gap: 5px; }
  .fx161-r { grid-area: rot; }
  .fx161-v { grid-area: val; }
  .fx161-b { grid-area: bar; }
}

/* ═══════════════ v160 · O FLUXO DE PAGAMENTO DA VENDA, EM ABAS ═══════════════
   Duas abas porque são dois dinheiros de sentidos opostos: o comprador paga PRA loja e a loja
   paga PRO dono. Misturados na mesma lista, nenhum dos dois fecha. */
.abas160 { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.ab160 { padding: 9px 14px; font-size: 13.5px; border-radius: 10px; min-height: 42px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.2; }
.ab160.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
/* v161: o quanto falta escrito na própria aba — não precisa entrar pra descobrir */
.ab160-x { font-size: 10.5px; opacity: .85; font-weight: 600; white-space: nowrap; }
/* v161: o resumo dos DOIS fluxos, sempre visível acima das abas */
.rs161-box { display: flex; flex-direction: column; gap: 5px; margin: 2px 0 12px; }
.rs161 {
  display: grid; grid-template-columns: 108px 70px 1fr; align-items: center; gap: 9px;
  background: var(--card-2); border: 1px solid var(--border); border-left: 3px solid var(--red);
  border-radius: 9px; padding: 8px 11px;
}
.rs161.ok { border-left-color: var(--green); }
.rs161-r { font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
.rs161-b { height: 6px; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.rs161-b i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.rs161.ok .rs161-b i { background: var(--green); }
.rs161-v { font-size: 12.5px; }
@media (max-width: 860px) {
  .rs161 { grid-template-columns: 1fr; row-gap: 4px; }
  .rs161-b { width: 100%; }
}
/* v182: REPASSE × VENDA — o repasse é outro negócio (lojista, sem garantia, lucro à mão), e
   agora o card diz isso de longe: listra roxa à esquerda e selo próprio. A venda normal fica
   com o selo neutro, sem listra — o padrão continua sendo o que mais aparece. */
/* v199: a listra do card de venda = o STATUS (mesmas cores dos selos). O repasse ficou só com
   o selo e o nome em roxo — a listra passou a dizer em que pé está o dinheiro. */
.st199-sinal { border-left: 3px solid var(--blue); }
.st199-recebendo { border-left: 3px solid var(--accent); }
.st199-dono { border-left: 3px solid var(--red); }
.st199-fim { border-left: 3px solid var(--green); }
.vd-repasse182 .vd-nome { color: #C4B5FD; }
.badge.b-repasse182 {
  background: rgba(167, 139, 250, 0.16); color: #A78BFA;
  border: 1px solid rgba(167, 139, 250, 0.42); font-weight: 700; letter-spacing: .3px;
}
/* no tema claro o roxo claro some no fundo branco — escurece o texto, mantém a listra */
:root[data-theme="light"] .vd-repasse182 .vd-nome { color: #6D28D9; }
:root[data-theme="light"] .badge.b-repasse182 {
  background: rgba(124, 58, 237, 0.10); color: #6D28D9; border-color: rgba(124, 58, 237, 0.38);
}
.badge.b-venda182 {
  background: var(--card-2); color: var(--text-2); border: 1px solid var(--border);
  font-weight: 600; letter-spacing: .3px;
}
/* v197: o nome do lead vira botão — é por ele que se abre a ficha. Parece texto, com a dica
   de link só no hover, pra não poluir um card que já tem 8 ícones de ação. */
.lead-nome197 {
  flex: 1; min-width: 90px; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: left; background: none; border: 0; padding: 0;
  font: inherit; font-weight: 700; color: var(--text); cursor: pointer;
}
.lead-nome197:hover { color: var(--accent); text-decoration: underline; }
/* v192: card do CLIENTE — a listra é a temperatura (tempo desde a última compra).
   Quente = vale ligar hoje · Morno = acompanhar · Frio = base fria. */
.cli192-quente { border-left: 3px solid var(--red); }
.cli192-morno { border-left: 3px solid var(--accent); }
.cli192-cedo { border-left: 3px solid var(--blue); }
/* v184: o card do carro PRÓPRIO — mesma linguagem do repasse (listra + selo).
   🏢 só loja = âmbar (dinheiro todo da casa) · 🤝 parceria = azul (tem sócio). */
.vd-soloja184 { border-left: 3px solid var(--accent); }
.vd-parceria184 { border-left: 3px solid var(--blue); }
:root[data-theme="light"] .vd-parceria184 { border-left-color: #2563EB; }
/* v178: os 3 atalhos de toda venda — comprador · dono · gastos. Área de toque de 44px (a v175
   mostrou que botão pequeno no card é o que faz a Luciana errar o alvo no modo claro). */
.vd-atalhos178 { display: flex; gap: 6px; margin: 8px 0 2px; }
.atl178 {
  flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--card-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px 4px;
}
.atl178:hover { border-color: var(--accent); color: var(--accent); }
.atl178 span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .atl178 { font-size: 11.5px; } }
/* v177: A CONTA DO DONO — combinado − débitos − pago direto = o que a loja paga.
   Fica na hora de pagar, não escondida numa aba. Só variáveis do tema (a v175 mostrou
   que fallback cravado escuro cega o modo claro da Luciana). */
.cd177 {
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 11px; margin: 2px 0;
}
.cd177-l {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 12.5px; color: var(--text-2); padding: 3px 0;
}
.cd177-l span:last-child { white-space: nowrap; color: var(--text); }
.cd177-l.tot { border-top: 1px solid var(--border); margin-top: 3px; padding-top: 6px; font-size: 14px; color: var(--text); }
.cd177-l.falta { color: var(--red); }
.cd177-l.ok { color: var(--green); }
/* o placar do fluxo: esperado · já feito · falta — a conta que o Neto bate o olho */
.fl160 {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline;
  background: var(--card-2); border: 1px solid var(--border); border-left: 3px solid var(--red);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
}
.fl160.ok { border-left-color: var(--green); }
.fl160 > div { display: flex; flex-direction: column; gap: 1px; min-width: 96px; }
.fl160 strong { font-size: 16px; }
.fl160-r { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-2); }
.lin160-ed > td { background: var(--card-2); }

/* ═══════════════ v159 · O BOTÃO SALVAR ESTAVA ATRÁS DA BARRA DE BAIXO ═══════════════
   Sugestão da Luciana (07/08): "toda vez que vou salvar um gasto, o botão de salvar não dá,
   tenho que virar o celular de lado". A causa não era o formulário dela — era o EMPILHAMENTO:
   o `.overlay` do modal nasceu com z-index 100 (linha 465) e a barra de navegação de baixo
   (#tabbar, linha 972) com z-index 8000. A barra é desenhada POR CIMA de qualquer modal, e o
   .form-actions — que é a ÚLTIMA coisa do formulário — cai justo na faixa dela: o toque chega
   na barra, não no botão. Valia pra TODO modal do app no celular, não só o gasto.
   Duas correções: o modal passa a ficar acima da barra, e a linha de ações fica GRUDADA no
   rodapé do modal (sticky) — o Salvar fica visível sem rolar até o fim do formulário. */
.overlay { z-index: 9200; }

@media (max-width: 860px), (orientation: landscape) and (max-height: 500px) {
  /* O overlay RESERVA a faixa da barra de baixo (≈62px + área segura). Sem isso o modal cresce
     até 90dvh e o rodapé dele — onde fica o Salvar — termina POR BAIXO da barra. Medido em
     390×450 (a área que sobra com o teclado do iPhone aberto): o fim do botão ficava em 403px
     com a barra começando em 389. Agora o modal inteiro acaba antes dela. */
  .overlay { padding: 14px 10px calc(14px + 62px + var(--safe-b, 0px)); }
  .modal {
    max-height: calc(100dvh - 90px - var(--safe-b, 0px));
    padding: 18px 16px 0; /* o padding de baixo passa a ser do .form-actions, que gruda no rodapé */
  }
  /* a linha de ações vira rodapé fixo DO MODAL: sempre na tela, com fundo opaco (senão o
     conteúdo rolando aparece atrás do botão) e as bordas esticadas até a borda do cartão. */
  .modal .form-actions {
    position: sticky; bottom: 0; z-index: 3;
    margin: 16px -16px 0;
    padding: 12px 16px calc(12px + var(--safe-b, 0px));
    background: var(--card);
    border-top: 1px solid var(--border);
  }
  /* alvo de toque de dedo: no celular os botões da ação ficam grandes e dividem a linha */
  .modal .form-actions .btn { min-height: 46px; flex: 1; justify-content: center; }
  /* modal sem .form-actions (só conteúdo) continua precisando do respiro embaixo */
  .modal > :last-child:not(.form-actions) { margin-bottom: calc(16px + var(--safe-b, 0px)); }
}

/* v165: a venda sem o valor do carro não mostra lucro — mostra o que falta */
.vd-semcusto165 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card-2); border-left: 3px solid var(--red); border-radius: 8px; padding: 8px 10px;
}
.vd-semcusto165 .vl-lbl { font-size: 12px; line-height: 1.35; }

/* ═══════════════ v166 · 🔍 QUEM É ESSA PESSOA ═══════════════
   O resultado é para ser lido com o telefone no ouvido: nome grande, e embaixo só o que muda
   a conversa — de quem é o lead, o que a pessoa quer, o que já comprou aqui. */
.bp166-card {
  background: var(--card-2); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 11px; padding: 11px 13px; margin-bottom: 8px;
}
.bp166-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; font-size: 15px; }
.bp166-l { font-size: 12.5px; line-height: 1.5; }
.bp166-alerta {
  background: rgba(214, 92, 92, .12); border-radius: 7px; padding: 5px 8px; margin: 4px 0;
  border-left: 3px solid var(--red);
}
.bp166-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
#bp166-res { max-height: 58vh; overflow-y: auto; }

/* v167: os tipos de gasto em cartões de dedo — a pessoa toca no que é, e o app classifica */
.cat167 { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow-y: auto; }
.cat167-b {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px;
  width: 100%; text-align: left; cursor: pointer; font-family: inherit; font-size: 14px;
  background: var(--card-2); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 11px 12px; min-height: 56px; color: var(--text);
}
.cat167-b:hover { border-color: var(--accent); background: var(--card); }
.c167-i { font-size: 20px; line-height: 1; }
.c167-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c167-t strong { font-size: 14px; }
.c167-t .muted { font-size: 11px; line-height: 1.3; }

/* ═══════════════ v170 · O PAINEL DO DINHEIRO DAS VENDAS ═══════════════
   Quatro números e uma lista só. O que entra é verde, o que sai é vermelho, e o que não tem data
   fica cinza no fim — porque é justamente esse que some do radar. */
.pd170-topo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 4px 0 12px; }
.pd170-n {
  background: var(--card-2); border: 1px solid var(--border); border-left: 3px solid var(--border-2);
  border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
}
.pd170-n.verde { border-left-color: var(--green); }
.pd170-n.vermelho { border-left-color: var(--red); }
.pd170-n .l { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-2); }
.pd170-n strong { font-size: 18px; }
.pd170-n .s { font-size: 11px; color: var(--text-2); }
.pd170-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.pd170-lista { display: flex; flex-direction: column; gap: 5px; max-height: 62vh; overflow-y: auto; }
.pd170-l {
  display: grid; grid-template-columns: 104px 1fr auto auto; align-items: center; gap: 10px;
  background: var(--card-2); border: 1px solid var(--border); border-left: 3px solid var(--green);
  border-radius: 9px; padding: 9px 11px;
}
.pd170-l.pagar { border-left-color: var(--red); }
.pd170-l.atras { background: rgba(214, 92, 92, .09); }
.pd170-q { font-size: 12px; }
.pd170-d { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; }
.pd170-d .muted { font-size: 11.5px; }
.pd170-v { font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.pd170-a { display: flex; gap: 4px; align-items: center; }
/* no celular vira duas linhas: data+valor em cima, descrição e ações embaixo */
@media (max-width: 860px) {
  .pd170-l { grid-template-columns: 1fr auto; grid-template-areas: "q v" "d d" "a a"; row-gap: 6px; }
  .pd170-q { grid-area: q; } .pd170-v { grid-area: v; } .pd170-d { grid-area: d; } .pd170-a { grid-area: a; }
  .pd170-a .btn { flex: 1; justify-content: center; min-height: 40px; }
}

/* ═══════════════ v173 · A VENDA EM 5 ABAS ═══════════════ */
.ab173-x { font-size: 10px; background: var(--red); color: #fff; border-radius: 8px;
  padding: 0 5px; margin-left: 4px; font-weight: 700; }
.pg173-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-2);
  margin: 10px 0 6px; font-weight: 700; }
.pg173 { display: grid; grid-template-columns: 86px 1fr auto auto; align-items: center; gap: 9px;
  background: var(--card-2); border: 1px solid var(--border); border-left: 3px solid var(--amber, #E8B34A);
  border-radius: 9px; padding: 8px 10px; margin-bottom: 5px; }
.pg173.ok { border-left-color: var(--green); }
.pg173-d { font-size: 12px; }
.pg173-f { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; }
.pg173-f .muted { font-size: 11px; }
.pg173-v { font-weight: 700; white-space: nowrap; }
.pg173-a { display: flex; gap: 3px; align-items: center; }
.pg173-ed { background: var(--card-2); border: 1px dashed var(--accent); border-radius: 9px;
  padding: 10px; margin-bottom: 6px; }
.pg173-add { background: var(--card-2); border: 1px dashed var(--border-2); border-radius: 10px;
  padding: 10px 12px; margin-top: 8px; }
/* linha de dado nas abas de comprador / dono / carro */
.dd173 { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: baseline;
  padding: 7px 2px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.dd173.falta { background: rgba(214,92,92,.06); }
.dd173-r { font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-2); }
@media (max-width: 860px) {
  .pg173 { grid-template-columns: 1fr auto; grid-template-areas: "d v" "f f" "a a"; row-gap: 5px; }
  .pg173-d { grid-area: d; } .pg173-v { grid-area: v; } .pg173-f { grid-area: f; } .pg173-a { grid-area: a; }
  .pg173-a .btn { flex: 1; justify-content: center; min-height: 40px; }
  .dd173 { grid-template-columns: 1fr; row-gap: 2px; }
}

/* ═══════════════ v175 · O MODO CLARO SEM BURACO ESCURO ═══════════════
   O Neto: *"ela está usando no modo claro e tem funções que ela clica, por exemplo os 3 pontos de
   cada venda, que está escuro ainda"*. A causa: regras escritas com variáveis que **não existem**
   no tema (`--bg-card`, `--muted`, `--line`) e um fallback de cor ESCURA fixa junto —
   `var(--bg-card, #1c212b)`. No tema escuro ninguém nota; no claro o menu vira um bloco preto.
   Trocadas pelas variáveis reais da casa (`--card`, `--text-2`, `--border`), que já viram
   com o tema. Abaixo, só o ajuste de sombra: preto forte sobre fundo claro fica sujo. */
:root[data-theme="light"] .acao-pop { box-shadow: 0 10px 26px rgba(0,0,0,.14); }
:root[data-theme="light"] #push-convite { box-shadow: 0 10px 34px rgba(0,0,0,.14); }
:root[data-theme="light"] .modal { box-shadow: 0 20px 60px rgba(0,0,0,.18); }
:root[data-theme="light"] #tabbar { box-shadow: 0 -6px 20px rgba(0,0,0,.08); }
:root[data-theme="light"] .overlay { background: rgba(20, 22, 26, 0.45); }

/* v211: ⏱️ ATUALIZAR AGORA — o bloco de ação do vendedor. Um lead por bloco, ações grandes o
   bastante pro polegar (44px), teto de 3 na tela. Ordem do Neto: *"o principal são os leads do
   dia, leads que ele precisa atualizar"* — sem virar montanha. */
.at211 { border-top: 1px solid var(--border); padding: 10px 2px 8px; }
.at211-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.at211-nome {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 700; font-size: 15px;
  color: var(--text); cursor: pointer; text-align: left;
}
.at211-nome:hover { color: var(--accent); text-decoration: underline; }
.at211-carro { font-size: 13px; color: var(--text-2); }
.at211-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.at211-b {
  flex: 1; min-width: 108px; min-height: 44px; display: flex; align-items: center;
  justify-content: center; gap: 5px; background: var(--card-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none; padding: 6px 8px;
}
.at211-b:hover { border-color: var(--accent); color: var(--accent); }
.at211-b.prim { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* v214 — sugestão da LUCIANA (07/08), a segunda parte dela.
   A v159 grudou o rodapé do modal e resolveu para quase tudo, MAS três telas usavam a classe
   `modal-acoes`, que nunca existiu no CSS — entre elas o ⚡ Sinal Rápido. Nessas, o botão
   continuava caindo atrás da barra de baixo e ela precisava virar o celular. Agora todas usam
   `.form-actions`; este alias fica para qualquer tela antiga que ainda escreva o nome velho. */
.modal-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
@media (max-width: 860px), (orientation: landscape) and (max-height: 500px) {
  .modal .modal-acoes {
    position: sticky; bottom: 0; z-index: 3; margin: 16px -16px 0;
    padding: 12px 16px calc(12px + var(--safe-b, 0px));
    background: var(--card); border-top: 1px solid var(--border);
  }
  .modal .modal-acoes .btn { min-height: 46px; flex: 1; justify-content: center; }
}

/* v219: barra de visões do Leads (Lista · Follow-up · Painel) */
.vis219 { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px; }
.vis219-b { border:1px solid var(--border); background:var(--card); color:var(--text);
  padding:7px 16px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer;
  transition:background .12s, border-color .12s; }
.vis219-b:hover { border-color:var(--accent); }
.vis219-b.on { background:var(--accent); border-color:var(--accent); color:#fff; }

/* v221: o placar ao vivo visto pelo vendedor — o card dele em destaque, o lead do colega apagado */
.ao221-eucard { outline: 2px solid var(--accent); outline-offset: 1px; }
tr:not(.ao221-meu) td { opacity: .82; }

/* v222: o comparativo do dia no topo de Meus Leads */
.cmp222 { margin-top: 8px; }
.cmp222-l { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 8px; align-items: center;
  padding: 7px 8px; border-radius: 8px; font-size: 13.5px; }
.cmp222-l + .cmp222-l { margin-top: 3px; }
.cmp222-l.eu { background: var(--accent-soft, rgba(59,130,246,.10)); font-weight: 600; }
.cmp222-pos { font-size: 17px; text-align: center; }
.cmp222-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp222-n { color: var(--text-2); font-size: 12px; white-space: nowrap; }
.cmp222-t { text-align: right; white-space: nowrap; min-width: 84px; }
.cmp222-sep { text-align: center; color: var(--text-2); line-height: 1; padding: 2px 0; }
.cmp222-aviso { margin-top: 9px; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.cmp222-aviso.neg { background: var(--red-soft, rgba(239,68,68,.12)); }
.cmp222-aviso.pos { background: var(--green-soft, rgba(34,197,94,.12)); }
@media (max-width: 520px) {
  .cmp222-l { grid-template-columns: 26px 1fr auto; }
  .cmp222-n { display: none; }
}

/* v224: a faixa de "isto é estimativa" no topo do Meu Salário */
.est224 { border-color: var(--amber, #f59e0b); border-width: 2px; padding: 12px 16px; }
.est224-t { font-weight: 700; font-size: 14.5px; }
.est224-p { color: var(--text-2); font-size: 12.8px; margin: 6px 0 0; line-height: 1.45; }

/* ═══ v234: O CELULAR DA EMILY (Android) ═══
   Ordem do Neto (17/08): *"Emily mexe mais pelo celular dela, e o dela é Android, tenta otimizar
   para ela também, para corrigir bugs"*.
   Medido de verdade — Chrome headless emulando Pixel 412×915 com TOQUE ligado, cache e service
   worker fora. O resultado foi melhor que o esperado: nas 5 telas que ela usa (Meu Dia,
   Consignações, Meus Carros, Estoque, Meu Salário) nada estoura a borda e os 257 campos do
   Estoque já respeitam os 16px que impedem o zoom automático — a proteção da v113 funciona.
   ⚠️ A primeira medição, SEM emulação de toque, acusou 257 campos errados: `pointer: coarse`
   não dispara sem toque. Fica registrado porque o próximo que medir vai cair nessa.
   Sobrou só o que está aqui: dois alvos pequenos demais pro dedo. */
@media (hover: none) and (pointer: coarse) {
  /* o campo de escrever a sugestão tinha 22px de altura — é onde a Emily escreve pro Neto */
  #sug-texto { min-height: 44px; }
  /* links de ação dentro de card ("📋 ver quadro" tinha 16px) — área de toque de dedo */
  .card a:not(.btn) { display: inline-block; min-height: 36px; line-height: 36px; }
}

/* ═══ v249: o painel guiado do financeiro ═══
   Ordem do Neto (18/08): *"muita aba confunde as pessoas"*. Botão grande, alvo de dedo,
   com o que é escrito embaixo do título — ela lê e toca, sem procurar em aba nenhuma. */
.lc249-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 8px; margin-top: 10px; }
.lc249 { display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px;
  min-height: 62px; color: var(--text); font-family: inherit; transition: border-color .12s, transform .08s; }
.lc249:hover { border-color: var(--accent); }
.lc249:active { transform: scale(.985); }
.lc249.forte { border-color: var(--accent); border-width: 2px; }
.lc249-i { font-size: 23px; line-height: 1; flex: 0 0 auto; }
.lc249-t { display: flex; flex-direction: column; gap: 1px; font-weight: 700; font-size: 14.5px; }
.lc249-o { font-weight: 400; font-size: 12px; color: var(--text-2); }
.lc249-pe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 11px;
  padding-top: 10px; border-top: 1px dashed var(--border); font-size: 13px; }
.pp249 { border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; }
.pp249-c { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.pp249-i { font-size: 21px; }
.pp249-x { display: flex; flex-direction: column; flex: 1; min-width: 148px; }
.pp249-x strong { font-size: 14.5px; }
.pp249-x span { font-size: 12.5px; color: var(--text-2); }
.pp249-b { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
.pp249-cam { font-size: 12px; color: var(--text-2); margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--border); }
.pp249-fim { background: rgba(245,158,11,.12); border-radius: 8px; padding: 11px 13px; font-size: 13px; margin-top: 4px; }

/* ═══ v253: CAIXA DE ENTRADA DO CRM ═══
   Duas colunas no computador, uma tela de cada vez no celular. A régua de 900px
   é a mesma do resto do app. */
.conv-wrap { display: flex; gap: 10px; align-items: flex-start; }
.conv-lista { flex: 0 0 340px; max-height: 74vh; overflow-y: auto; border-radius: 12px;
  border: 1px solid var(--border, rgba(120,120,120,.22)); background: var(--card, #fff); }
.conv-painel { flex: 1; min-width: 0; max-height: 74vh; overflow-y: auto; border-radius: 12px;
  border: 1px solid var(--border, rgba(120,120,120,.22)); background: var(--card, #fff); }

.conv-item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--border, rgba(120,120,120,.14)); }
.conv-item:hover { background: var(--bg-2, rgba(120,120,120,.07)); }
.conv-item.on { background: var(--bg-2, rgba(247,146,30,.12)); border-left: 3px solid var(--accent, #F7921E); }
/* a inicial no lugar da foto: o WhatsApp Web não entrega avatar por esta via */
/* v262: o telefone embaixo do nome — os nomes vem do perfil do WhatsApp e muitos
   sao apelido ou emoji; sem o numero nao da pra saber com quem se esta falando */
.conv-tel { font-size: 11.5px; color: #6b7280; font-variant-numeric: tabular-nums;
  letter-spacing: .2px; margin-top: 1px; }
.conv-ini { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
  background: var(--accent, #F7921E); color: #000; }

.conv-topo { display: flex; gap: 9px; align-items: center; padding: 11px 12px;
  border-bottom: 1px solid var(--border, rgba(120,120,120,.18)); position: sticky; top: 0;
  background: var(--card, #fff); z-index: 2; }

/* a ficha do lead fica À VISTA, não atrás de um botão: o vendedor precisa dela
   enquanto lê a mensagem, não depois */
.conv-ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px; padding: 9px 12px;
  background: var(--bg-2, rgba(120,120,120,.05)); }
.conv-dado { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 3px 0; }
.conv-dado span { opacity: .7; }
.conv-dado b { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.conv-acoes { display: flex; gap: 6px; flex-wrap: wrap; padding: 9px 12px;
  border-bottom: 1px solid var(--border, rgba(120,120,120,.18)); }

.conv-msgs { padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.conv-msg { max-width: 78%; padding: 8px 11px; border-radius: 12px; font-size: 13.5px;
  line-height: 1.45; word-wrap: break-word; position: relative; }
.conv-msg.in { align-self: flex-start; background: var(--bg-2, rgba(120,120,120,.14));
  border-bottom-left-radius: 3px; }
.conv-msg.out { align-self: flex-end; background: rgba(22,163,74,.16);
  border-bottom-right-radius: 3px; }
.conv-msg .q { display: block; font-size: 9.5px; opacity: .55; margin-top: 3px; text-align: right; }

.so-celular { display: none; }

@media (max-width: 900px) {
  .conv-lista { flex: 1 1 100%; max-height: none; }
  /* no celular o painel COBRE a lista — dividir 360px em duas colunas não serve */
  /* v276: no celular tambem e coluna — o display:block de antes anulava o flex,
     e a barra de resposta rolava junto com a conversa em vez de ficar fixa. */
  /* v285: z-index ACIMA do #tabbar (8000) — a conversa aberta é tela cheia e a
     barra de baixo cobria a caixa de responder (o Weslley não conseguia digitar) */
  .conv-painel { display: none; position: fixed; inset: 0; z-index: 8500; max-height: none;
    border-radius: 0; overflow: hidden; }
  .conv-painel.aberto { display: flex; flex-direction: column; }
  .conv-painel > .conv-msgs { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
  .so-celular { display: inline-flex; }
  .conv-ficha { grid-template-columns: 1fr; }
}

/* ═══ v254: menu ⋯ da conversa — opção com o que ela FAZ escrito embaixo ═══
   Botão com só um verbo obriga a pessoa a adivinhar o resultado do clique. */
.conv-menu { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 5px);
  z-index: 40; background: var(--card, #fff); border: 1px solid var(--border, rgba(120,120,120,.28));
  border-radius: 11px; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.conv-menu.on { display: block; }
.conv-menu button, .conv-menu a { display: block; width: 100%; text-align: left; border: 0;
  background: none; padding: 11px 14px; cursor: pointer; color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--border, rgba(120,120,120,.14)); font-family: inherit; }
.conv-menu button:last-child, .conv-menu a:last-child { border-bottom: 0; }
.conv-menu button:hover, .conv-menu a:hover { background: var(--bg-2, rgba(120,120,120,.09)); }
.conv-menu b { display: block; font-size: 13.5px; }
.conv-menu span { display: block; font-size: 11.5px; opacity: .68; margin-top: 2px; }

/* ═══ v254: briefing no card do lead — o que o vendedor precisa antes de ligar ═══ */
.brief254 { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; padding: 7px 9px;
  background: rgba(22,163,74,.09); border-left: 3px solid #16a34a; border-radius: 8px; }
.brief254 i { font-style: normal; font-size: 11.5px; background: var(--card, #fff);
  border-radius: 6px; padding: 2px 8px; border: 1px solid var(--border, rgba(120,120,120,.2)); }
.brief254.falta { background: rgba(247,146,30,.09); border-left-color: #F7921E; }

/* ═══ v256: TAMANHO DE DEDO, NÃO DE MOUSE ═══
   A equipe é 30+ e usa o app no celular. Alvo de toque abaixo de 44px erra;
   fonte abaixo de 14px em botão de ação não se lê de relance. */
.conv-acoes { gap: 8px; align-items: stretch; }
.conv-principal { flex: 1; min-height: 46px; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; text-decoration: none; }
.conv-mais { min-height: 46px; font-size: 14px; padding: 0 16px; white-space: nowrap; }
.conv-menu button, .conv-menu a { padding: 13px 15px; }
.conv-menu b { font-size: 14.5px; }
.conv-menu span { font-size: 12px; }

/* a lista: linha mais alta e nome maior — ler de relance, com o celular na mão */
.conv-item { padding: 12px 13px; }
.conv-item strong { font-size: 15px; }
.conv-ini { width: 42px; height: 42px; flex: 0 0 42px; font-size: 16px; }

/* o tempo de espera é o dado que decide a ordem do dia: precisa saltar */
.conv-espera { font-size: 12.5px; font-weight: 800; }

/* ═══ v260: qualificar dentro da conversa ═══ */
.qual260 { border-bottom: 1px solid var(--border, rgba(120,120,120,.18)); }
.qual260 > summary { cursor: pointer; padding: 11px 13px; font-size: 14px;
  background: rgba(247,146,30,.08); list-style: none; }
.qual260[open] > summary { border-bottom: 1px solid var(--border, rgba(120,120,120,.14)); }
.qual260-falta { background: #F7921E; color: #000; font-size: 11px; font-weight: 800;
  border-radius: 9px; padding: 2px 8px; margin-left: 5px; }
.qual260-corpo { padding: 10px 13px 13px; }
.qual260-linha { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 9px; }
.qual260-rot { font-size: 12.5px; opacity: .8; min-width: 118px; }
.qual260-chips { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; }
/* alvo de 38px: dedo de adulto em celular, não mouse */
.qual260-chip { min-height: 38px; padding: 0 13px; border-radius: 19px; font-size: 13px;
  border: 1px solid var(--border, rgba(120,120,120,.3)); background: var(--card, #fff);
  color: inherit; cursor: pointer; font-family: inherit; }
.qual260-chip:hover { border-color: var(--accent, #F7921E); }
.qual260-chip.on { background: var(--accent, #F7921E); color: #000; font-weight: 700;
  border-color: var(--accent, #F7921E); }
@media (max-width: 900px) { .qual260-rot { min-width: 100%; margin-bottom: 2px; } }


/* ═══ v261: barra de resposta — o mesmo desenho do WhatsApp, de propósito ═══
   Quem usa WhatsApp o dia todo não precisa aprender gesto novo. */
.resp-barra { display: flex; gap: 7px; align-items: flex-end; padding: 10px 12px;
  border-top: 1px solid var(--border, rgba(120,120,120,.2)); position: sticky; bottom: 0;
  background: var(--card, #fff); }
.resp-barra textarea { flex: 1; resize: none; max-height: 110px; min-height: 44px;
  padding: 11px 13px; border-radius: 22px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--border, rgba(120,120,120,.3)); background: var(--bg-2, rgba(120,120,120,.06)); color: inherit; }
.resp-mic, .resp-enviar { min-width: 44px; height: 44px; border-radius: 50%; border: 0;
  font-size: 19px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.resp-mic { background: var(--bg-2, rgba(120,120,120,.14)); color: inherit; user-select: none; }
.resp-mic.gravando { background: #b91c1c; color: #fff; animation: pulsa261 1s infinite; }
@keyframes pulsa261 { 50% { opacity: .55; } }
.resp-enviar { background: var(--accent, #F7921E); color: #000; font-weight: 800; }
.resp-enviar:disabled { opacity: .5; }

/* ═══ v262: as peças que faltavam pro CRM parecer WhatsApp ═══ */

/* conversa com mensagem sem ler: nome em negrito e a prévia escura, igual ao
   aplicativo. É o sinal que a pessoa lê sem precisar contar número nenhum. */
.conv-item.naolida strong { font-weight: 800; }
.conv-item.naolida .conv-prev { color: var(--text, #111); font-weight: 600; opacity: 1; }
.conv-badge { background: #25D366; color: #fff; font-size: 11px; font-weight: 800;
  min-width: 19px; height: 19px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 5px; flex: 0 0 auto; }

/* a foto dentro da bolha: grande o bastante pra ler a tabela do carro que o
   cliente manda, e clicável pra abrir inteira */
.conv-foto { display: block; max-width: 240px; width: 100%; border-radius: 9px;
  cursor: pointer; background: rgba(0,0,0,.06); }
.conv-fig { display: block; width: 110px; }

/* tela cheia da foto — fundo preto, toque em qualquer lugar fecha */
.foto-cheia { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.93);
  display: flex; align-items: center; justify-content: center; padding: 14px; cursor: zoom-out; }
.foto-cheia img { max-width: 100%; max-height: 100%; border-radius: 6px; }
.foto-baixar { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,.14); color: #fff; text-decoration: none;
  padding: 9px 17px; border-radius: 20px; font-size: 13.5px; }

/* ═══ v263: as duas decisões que fecham o atendimento ═══
   Ficam sempre visíveis, logo abaixo do cadastro. Chip largo e alto porque quem
   usa é dedo em celular, não mouse — e porque metade da equipe tem 30+ e não
   tem paciência pra acertar alvo pequeno. */
.dec263 { padding: 8px 12px; border-top: 1px solid var(--border, #e5e7eb); }
.dec263-rot { font-size: 11.5px; font-weight: 700; color: var(--text-2, #6b7280);
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
.dec263-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dec263-chip { border: 1px solid var(--border, #d1d5db); background: var(--card, #fff);
  color: inherit; border-radius: 16px; padding: 7px 13px; font-size: 12.5px;
  cursor: pointer; line-height: 1.2; }
.dec263-chip:hover { border-color: #1d4ed8; color: #1d4ed8; }
.dec263-chip.ruim:hover { border-color: #b91c1c; color: #b91c1c; }
.dec263-marca { font-size: 12px; color: #16a34a; font-weight: 700; margin-top: 6px; }
.dec263-marca.ruim { color: #b91c1c; }

/* ═══════════════════════════════════════════════════════════════
   v264 — ▦ QUADRO DO FUNIL
   No computador: colunas lado a lado, como todo CRM.
   No celular: NÃO vira coluna lateral. Vira lista empilhada por etapa — a
   equipe é 30+ e trabalha no telefone, e arrastar a tela pro lado o dia
   inteiro é o jeito mais rápido de a ferramenta ser abandonada.
   ═══════════════════════════════════════════════════════════════ */
.fun-quadro { display: flex; gap: 11px; overflow-x: auto; padding-bottom: 10px;
  align-items: flex-start; scroll-snap-type: x proximate; }
.fun-col { flex: 0 0 268px; background: var(--bg-2, #f3f4f6); border-radius: 11px;
  display: flex; flex-direction: column; max-height: 74vh; scroll-snap-align: start; }
.fun-col.vazia { opacity: .62; }

/* cabeçalho da coluna: a barra colorida em cima é a régua frio → quente */
.fun-cab { padding: 10px 12px 9px; border-top: 3px solid #999; border-radius: 11px 11px 0 0;
  cursor: pointer; user-select: none; }
.fun-cab-l { display: flex; align-items: center; gap: 7px; }
.fun-cab-t { font-size: 13px; font-weight: 800; flex: 1; }
.fun-cont { background: var(--card, #fff); border-radius: 11px; padding: 1px 9px;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fun-cab-sub { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 3px;
  font-size: 11px; color: var(--text-2, #6b7280); font-weight: 600; }
.fun-cab-sub .vermelho { color: #b91c1c; }
.fun-cab-sub .amb { color: #b45309; }

.fun-corpo { overflow-y: auto; padding: 3px 8px 9px; display: flex; flex-direction: column; gap: 7px; }
.fun-vazio { text-align: center; color: var(--text-2, #9ca3af); font-size: 12px; padding: 16px 0; }
.fun-corte { text-align: center; color: var(--text-2, #9ca3af); font-size: 11.5px; padding: 7px 0 2px; }

/* o card */
.fun-card { background: var(--card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 9px;
  padding: 9px 10px; cursor: pointer; border-left: 3px solid transparent; }
.fun-card:hover { border-color: #1d4ed8; }
/* o card ESFRIA sozinho — é o sinal que faz olhar pro card certo sem ler data */
.fun-card.morno { border-left-color: #f59e0b; }
.fun-card.gelado { border-left-color: #9ca3af; opacity: .62; }
.fun-card.atrasado { border-left-color: #b91c1c; background: rgba(185,28,28,.045); }

.fun-topo { display: flex; align-items: flex-start; gap: 6px; }
.fun-nome { font-size: 13.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fun-mais { background: none; border: 0; color: var(--text-2, #6b7280); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 3px; flex: 0 0 auto; }
.fun-mais:hover { color: #1d4ed8; }

/* o CARRO é a informação principal do card numa revenda */
.fun-carro { font-size: 12.5px; font-weight: 600; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fun-carro.sem { color: #b45309; font-weight: 500; }

.fun-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.fun-tag { background: var(--bg-2, #f3f4f6); border-radius: 4px; padding: 1px 6px;
  font-size: 10.5px; color: var(--text-2, #6b7280); }
.fun-tag.amb { background: #fef3c7; color: #92400e; }

.fun-pe { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.fun-ico { text-decoration: none; font-size: 15px; line-height: 1; }
.fun-quando { font-size: 10.5px; color: var(--text-2, #6b7280); margin-left: auto;
  text-align: right; line-height: 1.25; }
.fun-quando.vermelho { color: #b91c1c; font-weight: 700; }
.fun-dono { width: 19px; height: 19px; border-radius: 50%; background: #1d4ed8; color: #fff;
  font-size: 10.5px; font-weight: 800; display: grid; place-items: center; flex: 0 0 auto; }

/* ── CELULAR: a mesma informação, empilhada ── */
@media (max-width: 860px) {
  .fun-quadro { flex-direction: column; overflow-x: visible; gap: 9px; }
  .fun-col { flex: 1 1 auto; width: 100%; max-height: none; }
  .fun-cab { border-top-width: 4px; }
  .fun-cab-t::after { content: ' ▾'; opacity: .45; font-size: 11px; }
  .fun-col.recolhida .fun-corpo { display: none; }
  .fun-col.recolhida .fun-cab-t::after { content: ' ▸'; }
  .fun-corpo { max-height: 62vh; }
  /* coluna vazia já nasce fechada: não vale rolagem no telefone */
  .fun-col.vazia .fun-corpo { display: none; }
  .fun-col.vazia .fun-cab-t::after { content: ' ▸'; }
  /* dedo, não mouse */
  .fun-card { padding: 11px 12px; }
  .fun-mais { font-size: 19px; padding: 2px 7px; }
  .fun-ico { font-size: 18px; }
}

/* ═══ v266: as decisões, uma pergunta de cada vez ═══
   Substitui os 13 chips soltos da v263 por duas portas grandes. Alvo de dedo,
   não de mouse: a equipe é 30+ e trabalha no celular com a conversa em cima. */
.dec266 { padding: 9px 12px; border-top: 1px solid var(--border, #e5e7eb); }
.dec266-duplo { display: flex; gap: 8px; }
.dec266-porta { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1px solid var(--border, #d1d5db); background: var(--card, #fff); color: inherit;
  border-radius: 10px; padding: 11px 8px; font-size: 18px; cursor: pointer; line-height: 1.1; }
.dec266-porta span { font-size: 12.5px; font-weight: 700; }
.dec266-porta:hover { border-color: #1d4ed8; color: #1d4ed8; }
.dec266-porta.ruim:hover { border-color: #b91c1c; color: #b91c1c; }

.dec266-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 13px; font-weight: 700; }
.dec266-volta { border: 0; background: var(--bg-2, #f3f4f6); border-radius: 7px;
  cursor: pointer; font-size: 15px; padding: 3px 10px; color: inherit; line-height: 1.3; }
.dec266-volta:hover { background: var(--border, #e5e7eb); }

.dec266-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dec266-chip { border: 1px solid var(--border, #d1d5db); background: var(--card, #fff); color: inherit;
  border-radius: 17px; padding: 9px 14px; font-size: 12.5px; cursor: pointer; line-height: 1.2; }
.dec266-chip:hover { border-color: #1d4ed8; color: #1d4ed8; }
.dec266-chip.ruim:hover { border-color: #b91c1c; color: #b91c1c; }

/* "não é lead" fica separado dos motivos de perda de propósito: não é negócio
   perdido, é contato que nunca foi negócio — some das contas em vez de contar
   como perda no relatório do mês */
.dec266-outro { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--border, #e5e7eb);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.dec266-marca { font-size: 12px; color: #16a34a; font-weight: 700; margin-top: 8px; }
.dec266-marca.ruim { color: #b91c1c; }

/* ═══ v275: o quadro explicando a si mesmo ═══
   Sem isso o vendedor lia só o NOME da etapa e não movia card nenhum. */
.fun-oque { font-size: 10.5px; color: var(--text-2, #6b7280); line-height: 1.25;
  margin-top: 2px; font-style: italic; }
.fun-comosai { font-size: 10.5px; color: var(--text-2, #9ca3af); line-height: 1.3;
  padding: 8px 4px 2px; border-top: 1px dashed var(--border, #e5e7eb); margin-top: 4px; }
.fun-guia { font-size: 12px; line-height: 1.5; color: var(--text-2, #6b7280);
  background: var(--bg-2, #f3f4f6); border-radius: 9px; padding: 9px 12px; margin-bottom: 10px; }
.fun-guia strong { color: inherit; }

/* ═══════════════════════════════════════════════════════════════
   v276 — A CONVERSA NO CENTRO, O CADASTRO NA GAVETA
   Queixas do Neto: o cadastro tomava a tela e "está tudo da mesma cor".
   ═══════════════════════════════════════════════════════════════ */

/* ── O PAINEL VIRA COLUNA: as mensagens ficam com todo o resto do espaço ──
   Antes era uma pilha com scroll único, e a conversa sobrava com o que
   restasse depois do cadastro. Agora topo e barra de resposta são fixos e só
   as mensagens rolam. */
/* v284: SÓ NO COMPUTADOR. Esta regra no fim do arquivo vencia o display:none
   do celular (mesma especificidade, declarada depois) — e o painel vazio,
   fixed e z-index 60, cobria a lista inteira: a tela parecia em branco.
   No celular quem manda é .conv-painel.aberto, do bloco mobile. */
@media (min-width: 901px) { .conv-painel { display: flex; flex-direction: column; } }
.conv-painel > .conv-topo { flex: 0 0 auto; }
.conv-painel > .conv-resumo { flex: 0 0 auto; }
.conv-painel > .conv-msgs { flex: 1 1 auto; overflow-y: auto; min-height: 220px; }
.conv-painel > .resp-barra { flex: 0 0 auto; }

/* a linha de resumo: o essencial sem tirar a conversa da vista */
.conv-resumo { display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  padding: 7px 12px; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.cr-item { font-size: 11.5px; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 2px 9px; }
.cr-item.falta { color: #b45309; border-color: #f59e0b; }
.cr-falta { font-size: 11px; font-weight: 800; color: #b45309; margin-left: auto; }
.cr-ok { font-size: 11px; color: #16a34a; margin-left: auto; }

/* o botão que abre a gaveta */
.conv-qualif { padding: 8px 12px; font-size: 13px; white-space: nowrap; position: relative; }
.cq-falta { background: #b91c1c; color: #fff; border-radius: 9px; font-size: 10px;
  font-weight: 800; padding: 0 5px; margin-left: 5px; }

/* ── A GAVETA — o "Ver +" ── */
/* v285: acima do #tabbar (8000) — os botões ⏰/🚫 do fim ficavam atrás da barra */
.conv-gaveta-fundo { position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,.42);
  display: flex; justify-content: flex-end; }
.conv-gaveta { background: var(--card); width: min(440px, 100%); height: 100%;
  display: flex; flex-direction: column; box-shadow: -8px 0 26px rgba(0,0,0,.2); }
.cg-topo { display: flex; align-items: center; gap: 10px; padding: 13px 15px;
  border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.cg-topo > div:first-child { flex: 1; min-width: 0; }
.cg-fechar { border: 0; background: var(--bg-2); color: inherit; border-radius: 8px;
  cursor: pointer; font-size: 16px; padding: 5px 12px; }
.cg-corpo { flex: 1; overflow-y: auto; }
/* no celular a gaveta sobe de baixo, que é o gesto do telefone */
@media (max-width: 700px) {
  .conv-gaveta-fundo { align-items: flex-end; }
  .conv-gaveta { width: 100%; height: 88vh; border-radius: 16px 16px 0 0; }
}

/* ── AS BOLHAS: cliente × loja, agora distintas de verdade ──
   Estavam quase iguais: cinza de 14% contra verde de 16%, no mesmo fundo.
   Agora o que ENTRA é card com borda, o que SAI é verde cheio — a mesma
   leitura do WhatsApp, onde ninguém precisa pensar pra saber quem falou. */
.conv-msgs { background: var(--bg-2); }
.conv-msg.in { background: var(--card); border: 1px solid var(--border);
  align-self: flex-start; border-bottom-left-radius: 3px; }
.conv-msg.out { background: rgba(22,163,74,.20); border: 1px solid rgba(22,163,74,.38);
  align-self: flex-end; border-bottom-right-radius: 3px; }
.conv-msg .q { opacity: .65; }
/* quem escreveu, quando é a loja (Weslley × Neto × automático) */
.conv-msg.out .autor276 { display: block; font-size: 9.5px; font-weight: 700;
  color: #15803d; margin-bottom: 2px; }

/* ── v279: o recolher certo do menu lateral ──
   A v276 encolhia o #nav (a LISTA), mas a barra é a .sidebar e o conteúdo
   desloca por --sidebar-w — então nada mudava de verdade na tela. Recolher é
   mexer na VARIÁVEL: a barra encolhe e o conteúdo reflui junto. O hover abre a
   .sidebar por cima do conteúdo (gaveta), sem mexer na variável — assim o
   texto da tela não fica pulando a cada passada de mouse. */
@media (min-width: 901px) {
  body.nav-mini { --sidebar-w: 64px; }
  body.nav-mini .sidebar { overflow: hidden; transition: width .15s ease; }
  body.nav-mini .brand h1, body.nav-mini .brand > div > span,
  body.nav-mini .sidebar-foot { display: none; }
  body.nav-mini #nav .lbl { display: none; }
  body.nav-mini #nav .nav-item { justify-content: center; position: relative; }
  body.nav-mini #nav .badge { position: absolute; top: 4px; right: 6px; }
  /* encostou o mouse: a barra abre POR CIMA do conteúdo (ela é fixed, z-index 10) */
  body.nav-mini:not(.nav-hold278) .sidebar:hover { width: 232px;
    box-shadow: 6px 0 22px rgba(0,0,0,.22); }
  body.nav-mini:not(.nav-hold278) .sidebar:hover .brand h1,
  body.nav-mini:not(.nav-hold278) .sidebar:hover .brand > div > span { display: block; }
  body.nav-mini:not(.nav-hold278) .sidebar:hover #nav .lbl { display: inline; }
  body.nav-mini:not(.nav-hold278) .sidebar:hover #nav .nav-item { justify-content: flex-start; }
  body.nav-mini:not(.nav-hold278) .sidebar:hover #nav .badge { position: static; }
  body.nav-mini:not(.nav-hold278) .sidebar:hover .sidebar-foot { display: block; }
}
.nav-mini-bt { border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: 15px; padding: 4px 8px; opacity: .6; }
.nav-mini-bt:hover { opacity: 1; }

/* v276: o botao de encolher o menu nao existe no celular */
.so-computador276 { display: inline-block; }
@media (max-width: 900px) { .so-computador276 { display: none; } }


/* ═══ v285: o celular arrumado (fotos de antes e depois no registro) ═══ */
@media (max-width: 860px) {
  /* AS ABAS DO CRM: eram 4 linhas ocupando metade da tela. Viram UMA linha que
     rola pro lado — padrão de todo app de celular. */
  #hubtabs > div { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 0 8px !important; padding: 2px 2px 6px; scrollbar-width: none; }
  #hubtabs > div::-webkit-scrollbar { display: none; }
  #hubtabs .tab { flex: 0 0 auto; padding: 8px 12px; font-size: 13px; }

  /* O CABEÇALHO DA CONVERSA, mais baixo:
     · o resumo vira UMA linha que rola (os chips não empilham mais);
     · o botão grande "Passar para um vendedor" SAI — é o mesmo que está dentro
       da gaveta do 📋 Qualificar, e aqui só empurrava a conversa pra baixo.
       O ⋯ Mais fica, pequeno, na mesma linha do resumo. */
  .conv-resumo { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 6px 10px; }
  .conv-resumo::-webkit-scrollbar { display: none; }
  .cr-item { white-space: nowrap; flex: 0 0 auto; }
  .cr-falta, .cr-ok { white-space: nowrap; flex: 0 0 auto; margin-left: 4px; }
  .conv-acoes .conv-principal { display: none; }
  .conv-acoes { padding: 4px 10px 6px; }
  .conv-acoes .conv-mais { padding: 5px 12px; font-size: 12.5px; }

  /* A BARRA DE RESPONDER respeita a área do gesto do iPhone (home bar) */
  .conv-painel .resp-barra { padding-bottom: calc(8px + var(--safe-b, 0px)); }
  .conv-gaveta { padding-bottom: var(--safe-b, 0px); }
  .cg-corpo { padding-bottom: calc(18px + var(--safe-b, 0px)); }
}

/* ═══════════════════════════════════════════════════════════════════════
   v286 · ✨ O PASSE DE POLIMENTO — pedido do Neto: "layout 100% mais bonito
   e organizado".
   REGRA DESTA CAMADA (lição da v284, paga caro): só cor, borda, raio, sombra
   e espaçamento MIÚDO. Nada de display, position, z-index ou width — layout
   não se muda em camada de polimento. Tudo em cima dos tokens que os dois
   temas já definem, então claro e escuro ganham juntos.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ritmo: os cards respiram igual em todas as telas ── */
.card { border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05); }
.card + .card { margin-top: 12px; }
.card-title { font-size: 13.5px; font-weight: 800; letter-spacing: .01em; }
.card-title .muted { font-weight: 500; }

/* ── botões: uma hierarquia só no app inteiro ──
   primário = a ação da tela · normal = ação comum · ghost = sair/cancelar */
.btn { border-radius: 10px; transition: border-color .12s ease, background .12s ease, transform .05s ease; }
.btn:hover { border-color: var(--accent); }
.btn:active { transform: scale(.98); }
.btn-primary { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 86%, #000 14%));
  border-color: transparent; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 34%, transparent); }
.btn-primary:hover { filter: brightness(1.06); border-color: transparent; }
.btn-ghost { opacity: .85; }
.btn-ghost:hover { opacity: 1; }

/* ── campos: foco que se enxerga (dedo e teclado) ── */
input, select, textarea { border-radius: 10px; transition: border-color .12s ease, box-shadow .12s ease; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* ── badges: pílulas consistentes, sem gritar ── */
.badge { border-radius: 999px; font-weight: 700; letter-spacing: .01em; }

/* ── tabelas: a linha responde ao mouse e o cabeçalho se distingue ── */
table th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
table tbody tr { transition: background .1s ease; }
table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* ── as listas de conversa e do funil: toque com resposta visual ── */
.conv-item { transition: background .1s ease; border-left: 3px solid transparent; }
.conv-item:hover { border-left-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.conv-item.on { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.fun-card { transition: box-shadow .12s ease, border-color .12s ease; }
.fun-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.14); }

/* ── modais: mesma linguagem dos cards ── */
.modal { border-radius: 16px; box-shadow: 0 18px 60px rgba(0,0,0,.4); }

/* ── barras de rolagem finas e do tema (computador) ── */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-2) 34%, transparent);
  border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--text-2) 55%, transparent); }
*::-webkit-scrollbar-track { background: transparent; }

/* ── o dashboard do funil (v286) e as peças novas ── */
.fdash { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fdash-kpi { flex: 1; min-width: 120px; background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.fdash-v { font-size: 21px; font-weight: 800; line-height: 1.15; }
.fdash-l { font-size: 11px; color: var(--text-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.fdash-kpi.ruim .fdash-v { color: var(--red, #e5484d); }
.fdash-kpi.bom .fdash-v { color: var(--green, #3BA55C); }
.fdash-kpi.morno .fdash-v { color: var(--amber, #E8B34A); }
.fdash-kpi.destaque .fdash-v { color: var(--accent); }
.fdash-vends { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.fdash-vend { display: flex; gap: 8px; align-items: baseline; background: var(--card);
  border: 1px solid var(--border); border-radius: 12px; padding: 8px 13px; font-size: 12.5px;
  flex: 1; min-width: 210px; transition: border-color .12s ease; }
.fdash-vend:hover { border-color: var(--accent); }
.fdash-vend.semv { border-style: dashed; opacity: .8; }
.fdash-vend .ruim { color: var(--red, #e5484d); font-weight: 700; }
.fdash-vend .bom { color: var(--green, #3BA55C); }
.fdash-vend .destaque { color: var(--accent); font-weight: 700; margin-left: auto; }

/* ── a triagem (v286) ── */
.tri-item { display: flex; gap: 10px; align-items: center; padding: 9px 6px;
  border-bottom: 1px solid var(--border); cursor: pointer; }
.tri-item:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.tri-item input { width: 19px; height: 19px; accent-color: var(--accent); flex: 0 0 auto; }
.tri-barra { position: sticky; bottom: 8px; display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 14px; margin-top: 12px; box-shadow: 0 8px 26px rgba(0,0,0,.22); }
@media (max-width: 860px) {
  .tri-barra { bottom: calc(70px + var(--safe-b, 0px)); } /* acima da barra de navegação */
}

/* ── celular: densidade certa pro dedo ── */
@media (max-width: 860px) {
  .card { border-radius: 12px; }
  .btn { min-height: 40px; }
  .kpi-row { gap: 8px; }
}

/* ═══ v287: os padrões copiados dos melhores CRMs (pesquisa 20/08) ═══ */

/* Pipedrive: card sem próximo passo é aviso, não detalhe */
.fun-sempasso { color: var(--amber, #E8B34A); font-weight: 700; }

/* kanban: a coluna acende quando o card é arrastado por cima */
.fun-col.sobre287 { outline: 2px dashed var(--accent); outline-offset: -2px;
  background: color-mix(in srgb, var(--accent) 7%, transparent); }

/* Kommo: no computador largo, a gaveta do Qualificar abre AO LADO da conversa,
   sem escurecer — a conversa continua legível e clicável enquanto ele preenche.
   (pointer-events no fundo deixa os cliques atravessarem; a gaveta segue viva.) */
@media (min-width: 1200px) {
  .conv-gaveta-fundo { background: transparent; pointer-events: none; }
  .conv-gaveta { pointer-events: auto; border-left: 1px solid var(--border);
    box-shadow: -14px 0 40px rgba(0,0,0,.30); }
}

/* ═══ v289: os sinais visuais do WhatsApp na lista e na conversa ═══ */
.conv-hora { font-size: 11px; color: var(--text-2); white-space: nowrap; flex: 0 0 auto;
  font-variant-numeric: tabular-nums; }
.conv-hora.verde { color: #25D366; font-weight: 700; }
.conv-hora.vermelha { color: var(--red, #e5484d); font-weight: 700; }

/* o separador de dia no meio da conversa — a âncora temporal do hábito */
.conv-dia { align-self: center; background: var(--bg-2); color: var(--text-2);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; border-radius: 8px;
  padding: 3px 10px; margin: 6px 0 2px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* ═══ v290: a coluna "Sem resposta" ao lado do espelho ═══
   Só no computador largo — no celular ela é a aba 🔥 (não cabe coluna). */
.conv-rail { display: none; }
@media (min-width: 1150px) {
  .conv-rail { display: block; flex: 0 0 225px; max-height: 74vh; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 12px; background: var(--card);
    padding: 10px 10px 12px; }
  .conv-rail-t { font-size: 12.5px; font-weight: 800; margin-bottom: 7px;
    display: flex; align-items: center; gap: 6px; }
  .conv-rail-i { padding: 7px 8px; border-radius: 9px; cursor: pointer;
    display: grid; grid-template-columns: 1fr auto; gap: 0 6px; align-items: baseline;
    border-left: 3px solid transparent; }
  .conv-rail-i:hover { background: color-mix(in srgb, var(--accent) 7%, transparent);
    border-left-color: var(--accent); }
  .conv-rail-i strong { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .conv-rail-i .cr-tempo { font-size: 11px; font-weight: 800; }
  .conv-rail-i .cr-msg { grid-column: 1 / -1; font-size: 11px; color: var(--text-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}


/* ═══ v298: ESTOQUE (e toda tabela larga) utilizável no CELULAR ═══
   1) a coluna de ações fica GRUDADA na borda direita — o 💰 e o ⋯ aparecem
      sem arrastar a tabela pro lado;
   2) o menu ⋯ abre como FOLHA no pé da tela (na altura do dedão), não como
      pop espremido e cortado dentro da tabela.
   Desktop fica exatamente como era (tudo dentro do max-width: 900px). */
@media (max-width: 900px) {
  td.actions { position: sticky; right: 0; z-index: 5; background: var(--card);
    box-shadow: -8px 0 10px -8px rgba(0,0,0,.55); }
  .acao-pop { position: fixed; left: 10px; right: 10px; top: auto;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 9200;
    min-width: 0; max-height: 55vh; overflow-y: auto;
    box-shadow: 0 -12px 34px rgba(0,0,0,.5); }
  .acao-item { padding: 12px; font-size: 14.5px; }
}


/* ═══ v298b: no CARTÃO do celular (t-cartao), as AÇÕES sobem pro TOPO ═══
   O cartão do estoque tem uma tela de altura; as ações moravam no fim — era
   preciso rolar o cartão INTEIRO pra saber o que dá pra fazer com o carro.
   Agora: placa em cima, ações logo abaixo, o resto na sequência. */
@media (max-width: 860px), (orientation: landscape) and (max-height: 500px) {
  table.t-cartao tr { display: flex; flex-direction: column; }
  table.t-cartao td:first-child { order: -2; }
  table.t-cartao td.actions { order: -1; justify-content: flex-end;
    border-bottom: 1px solid var(--border); padding: 2px 0 8px; margin-bottom: 4px;
    position: static; box-shadow: none; background: none; }
  /* fundo escurecido atrás da folha do ⋯ — toque fora fecha (handler global) */
  details.acao-menu[open]::before { content: ''; position: fixed; inset: 0;
    background: rgba(0,0,0,.45); z-index: 9100; }
}


/* ═══ v316: A CONVERSA COM CARA DE WHATSAPP (pedido do Neto: "mais semelhante,
   pra eles se identificarem — cores e etc"). As cores são as do WhatsApp escuro:
   fundo #0b141a, recebida #202c33, enviada VERDE #005c4b, enviar #00a884. ═══ */
.conv-msgs { background: #0b141a; }
.conv-msg { max-width: 82%; font-size: 14px; box-shadow: 0 1px 1px rgba(0,0,0,.3); }
.conv-msg.in { background: #202c33; color: #e9edef; border-bottom-left-radius: 12px; border-top-left-radius: 4px; }
.conv-msg.out { background: #005c4b; color: #e9edef; border-bottom-right-radius: 12px; border-top-right-radius: 4px; }
.conv-msg .q { color: #aebac1; opacity: .9; font-size: 10px; }
.conv-msg.pendente316 { opacity: .8; }
.conv-msg a { color: #53bdeb; }
.resp-barra { background: #202c33; border-radius: 0 0 10px 10px; padding: 8px; }
.resp-barra textarea, #resp-txt { background: #2a3942; color: #e9edef; border: 0; border-radius: 18px; padding: 10px 14px; }
.resp-barra textarea::placeholder { color: #8696a0; }
.resp-enviar { background: #00a884 !important; color: #fff !important; border-radius: 50% !important;
  width: 42px; height: 42px; font-size: 17px; border: 0 !important; }
.resp-mic { background: transparent; border: 0; color: #8696a0; font-size: 19px; }
/* no celular a fileira de dados vira UMA linha rolável — conversa é conversa */
@media (max-width: 900px) {
  .conv-resumo { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* v319: lead NOVO na lista de conversas — borda laranja e fundo levemente aceso */
.conv-item.conv-nova319 { border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }


/* ═══ v334: CONVERSA COMPACTA NO CELULAR — o cabeçalho comia 41% da tela ═══ */
@media (max-width: 900px) {
  .conv-topo { padding: 8px 10px; gap: 6px; align-items: center; }
  .conv-topo strong { font-size: 14px !important; }
  .conv-topo .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .conv-topo .btn, .conv-topo a.btn { padding: 6px 10px !important; font-size: 12px !important; }
  .conv-qualif { padding: 7px 10px !important; font-size: 12px !important; }
  /* a fileira de ações vira UMA linha rolável — nada de dois andares */
  .conv-acoes { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
    align-items: center; gap: 6px; padding: 6px 8px !important; }
  .conv-acoes .btn { padding: 7px 11px !important; font-size: 12px !important;
    white-space: nowrap; flex: 0 0 auto !important; height: auto !important; }
  .conv-acoes > div { flex: 0 0 auto !important; flex-wrap: nowrap !important; }
  .conv-acoes > div > div { flex-wrap: nowrap !important; }
  /* a observação do lead vira 1 linha com reticências */
  #conv-painel > .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0 12px 5px !important; }
}


/* ═══ v336: A PELE WHATSAPP DO VENDEDOR — "se sentir no WhatsApp" ═══ */
/* barra de abas com UMA aba só é ruído — some (Conversas do vendedor) */
#hubtabs > div:has(> .tab:only-child) { display: none; }

.papel-vendedor #content { background: #111b21; }
.papel-vendedor .conv-lista { background: #111b21; border: 0; border-radius: 0; }
.papel-vendedor .conv-item { background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid #1d272e; padding: 12px 10px; }
.papel-vendedor .conv-item.on, .papel-vendedor .conv-item:active { background: #202c33; }
.papel-vendedor .conv-item.conv-nova319 { border-left: 4px solid #00a884;
  background: color-mix(in srgb, #00a884 8%, transparent); }
.papel-vendedor .conv-ini { width: 46px; height: 46px; border-radius: 50%;
  background: #364147; color: #cfd9de; font-size: 18px; display: flex;
  align-items: center; justify-content: center; }
.papel-vendedor .conv-badge { background: #00a884; color: #fff; border-radius: 12px;
  min-width: 20px; height: 20px; font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.papel-vendedor .conv-hora.verde { color: #00a884; }
.papel-vendedor .conv-tel { color: #8696a0; font-size: 11.5px; }
.papel-vendedor .conv-prev { color: #8696a0 !important; }
/* etiquetas discretas — informação sem gritaria */
.papel-vendedor .conv-item .badge.b-gray { background: transparent; border: 0;
  color: #8696a0; padding: 0; font-size: 10.5px; }


/* ═══ v338: segurar o 🎤 não pode virar seleção/menu do navegador ═══ */
.resp-mic { user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; touch-action: none; }


/* ═══ v354: a CONVERSA do vendedor 100% WhatsApp (a lista já era, v336) ═══ */
.papel-vendedor .conv-painel { background: #0b141a; border: 0; }
.papel-vendedor .conv-topo { background: #202c33; border-bottom: 1px solid #0b141a; }
.papel-vendedor .conv-topo strong { color: #e9edef; }
.papel-vendedor .conv-topo .muted { color: #8696a0; }
.papel-vendedor .conv-acoes { background: #111b21; border: 0; }
.papel-vendedor .resp-barra { background: #202c33; border-top: 1px solid #0b141a; }
.papel-vendedor .resp-barra textarea { background: #2a3942; color: #e9edef; border: 0;
  border-radius: 9px; }
.papel-vendedor .resp-barra textarea::placeholder { color: #8696a0; }
.papel-vendedor .resp-enviar { background: #00a884; color: #fff; border: 0; }
.papel-vendedor .resp-mic { color: #8696a0; }


/* ═══ v361: 🗑 apagar mensagem enviada — discreto até precisar ═══ */
.conv-del361 { cursor: pointer; opacity: .35; margin-left: 7px; font-size: 12px; }
.conv-msg:hover .conv-del361, .conv-msg:active .conv-del361 { opacity: .95; }


/* ═══ v369: a 3ª coluna como painel do lead (estilo Vende AI) ═══ */
#conv-rail369 { overflow-y: auto; }
#conv-rail369 .qual260-linha { flex-wrap: wrap; }
.pisca369 { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px;
  transition: outline .15s; }