/* ════════════════════════════════════════════════════════════════════════
   IVSTO · Sistema de design do produto (Onda 1 · D2/D3)
   Tudo escopado em html.ivsto-host: o host da advocacia não muda.
   Marca: 4 tokens (Calcário, Basalto, Sombra, Rubrica) como teto. As rampas
   abaixo são TONS desses tokens, não cores novas. Rubrica = 1 papel (ação/alerta).
   Medidas: sequência de Fibonacci (razão → φ = 1,618).
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Rampas e escalas ─────────────────────────────────────────────── */
html.ivsto-host {
  /* Pedra: rampa única de Calcário · Sombra · Basalto (mesmo matiz ≈ 90° OKLCH) */
  --pedra-0:   #FFFDF9;
  --pedra-50:  #FAF8F3;
  --pedra-100: #F4F1EA;
  --pedra-150: #EAE6DD;  /* Calcário */
  --pedra-200: #DDD8CD;
  --pedra-300: #C7C1B4;
  --pedra-400: #A29D91;
  --pedra-500: #7E7A70;
  --pedra-550: #636057;  /* Sombra */
  --pedra-650: #4B4943;
  --pedra-700: #3A3934;
  --pedra-800: #2B2A26;  /* Basalto */
  --pedra-900: #1D1C19;
  /* Rubrica: só ação e alerta */
  --rubrica-50:  #FBF2EF;
  --rubrica-100: #F5E1DB;
  --rubrica-200: #E9C2B8;
  --rubrica-400: #B76A5C;
  --rubrica-600: #8C3A2E;  /* Rubrica */
  --rubrica-700: #742E24;
  --rubrica-800: #57221A;

  /* Espaço φ (Fibonacci) */
  --f-3: 3px; --f-5: 5px; --f-8: 8px; --f-13: 13px; --f-21: 21px; --f-34: 34px; --f-55: 55px; --f-89: 89px;
  /* Tipo (razão √φ ≈ 1,272) */
  --t-xs: 12px; --t-sm: 13px; --t-base: 16px; --t-md: 20px; --t-lg: 26px; --t-xl: 33px; --t-2xl: 42px;
  --lh-text: 1.618; --lh-ui: 1.382; --lh-title: 1.272;
  /* Movimento: 233 ms (Fibonacci), curva de desaceleração suave */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-1: 144ms; --dur-2: 233ms; --dur-3: 377ms;
  /* Famílias */
  --f-marca: 'Marcellus', 'Times New Roman', serif;
  --f-texto: 'EB Garamond', Georgia, serif;
  --f-num: 'IBM Plex Mono', ui-monospace, monospace;
  --f-ui: 'EB Garamond', Georgia, serif;          /* troca a Inter da FSC */
  --f-titulo: 'Marcellus', 'Times New Roman', serif; /* troca Cormorant/Cinzel da FSC */
  /* Profundidade: sombra em Basalto, nunca preta */
  --sh-1: 0 1px 2px rgba(43,42,38,.06), 0 1px 1px rgba(43,42,38,.04);
  --sh-2: 0 3px 8px rgba(43,42,38,.07), 0 1px 3px rgba(43,42,38,.05);
  --sh-3: 0 13px 34px rgba(43,42,38,.14), 0 3px 8px rgba(43,42,38,.06);
  --anel: 0 0 0 3px var(--rubrica-200);

  /* ── Remapa dos tokens legados (FSC) para as rampas ── */
  --forest: var(--pedra-800); --forest-deep: var(--pedra-800); --forest-mid: var(--pedra-800);
  --brand: var(--pedra-800); --brand-mid: var(--pedra-800); --brand-light: var(--pedra-700);
  --brand-btn: var(--rubrica-600); --brand-hover: var(--rubrica-700);
  --gold: var(--pedra-550); --gold-light: var(--pedra-400); --gold-dark: var(--pedra-650);
  --gold-fill: var(--pedra-300);  /* ouro como PREENCHIMENTO (texto escuro por cima) */
  --cream: var(--pedra-50); --paper: var(--pedra-0); --paper-doc: var(--pedra-0); --ink: var(--pedra-800);
  --bg: var(--pedra-150); --bg-light: var(--pedra-100); --bg-card: var(--pedra-50); --white: var(--pedra-0);
  --border: var(--pedra-200);
  --text: var(--pedra-800); --text-mid: var(--pedra-650); --text-muted: var(--pedra-550);
  --danger: var(--rubrica-600); --danger-bg: var(--rubrica-50); --danger-border: var(--rubrica-200);
  --success: var(--pedra-650); --success-bg: rgba(75,73,67,.08); --success-border: rgba(75,73,67,.20);
  --warning: var(--rubrica-600); --warning-bg: var(--rubrica-50); --warning-border: var(--rubrica-200);
  --info: var(--pedra-800); --info-bg: rgba(43,42,38,.05); --info-border: rgba(43,42,38,.12);
  --state-attention-fill: var(--rubrica-600); --state-attention-text: var(--pedra-800);
  --state-attention-bg: var(--rubrica-50); --state-attention-border: var(--rubrica-200);
  --state-today-bg: var(--rubrica-600); --state-today-text: var(--pedra-0);
  --state-info-text: var(--pedra-800);
  --radius: 5px; --radius-sm: 3px; --radius-lg: 8px;
  --sidebar-w: 233px; --sidebar-w-mini: 55px;
  --shadow-md: var(--sh-2); --shadow-lg: var(--sh-3);
  /* Gráficos: rampa Pedra; Rubrica só na série em destaque */
  --chart-1: #2B2A26; --chart-2: #8C3A2E; --chart-3: #7E7A70; --chart-4: #C7C1B4; --chart-5: #A29D91; --chart-6: #4B4943;
  --funil-1: #2B2A26; --funil-2: #3A3934; --funil-3: #4B4943; --funil-4: #636057; --funil-5: #A29D91; --funil-6: #C7C1B4; --funil-7: #DDD8CD; --funil-8: #8C3A2E;
  --chart-ink: #4B4943; --chart-bg: #FAF8F3; --chart-font: 'IBM Plex Mono', monospace;

  font-size: 17px;               /* Garamond tem olho pequeno: 17 px equivale ao 16 da Inter */
  background: var(--pedra-150);
  -webkit-text-size-adjust: 100%;
}

/* ── 2. Tipografia ───────────────────────────────────────────────────── */
html.ivsto-host body {
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: var(--lh-ui);
  color: var(--text);
  background: var(--pedra-150);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}
html.ivsto-host h1, html.ivsto-host h2, html.ivsto-host h3, html.ivsto-host h4, html.ivsto-host .serif {
  font-family: var(--f-marca);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: var(--lh-title);
}
html.ivsto-host input, html.ivsto-host select, html.ivsto-host textarea, html.ivsto-host button {
  font-family: var(--f-texto);
}
/* Números e protocolo em Plex Mono, com algarismos tabulares */
html.ivsto-host .kpi-value, html.ivsto-host .fg-kpi-val, html.ivsto-host .fin-kpi-pill-val, html.ivsto-host .nav-count,
html.ivsto-host .badge, html.ivsto-host #appVersion, html.ivsto-host .fg-bar-val, html.ivsto-host .cockpit-bell-badge,
html.ivsto-host .fin-table td, html.ivsto-host time, html.ivsto-host .iv-num {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
html.ivsto-host tbody td { font-variant-numeric: tabular-nums; }
/* Rótulos: Plex Mono em versalete espaçado */
html.ivsto-host .kpi-label, html.ivsto-host .fg-kpi-label, html.ivsto-host .fin-drawer-lbl, html.ivsto-host .fin-drawer-section-title,
html.ivsto-host .sidebar-nav-label, html.ivsto-host thead th, html.ivsto-host .fg-pilar-label {
  font-family: var(--f-num);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pedra-550);
}
html.ivsto-host .form-label {
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--pedra-650);
  letter-spacing: .01em;
}
html.ivsto-host ::selection { background: var(--rubrica-100); color: var(--pedra-900); }

/* ── 3. Shell: sidebar em Basalto ─────────────────────────────────────── */
html.ivsto-host #appView.active {
  background: linear-gradient(to right, var(--pedra-800) var(--sidebar-w), var(--pedra-150) var(--sidebar-w));
}
html.ivsto-host .sidebar {
  background: var(--pedra-800);
  border-right: 1px solid rgba(234,230,221,.06);
  box-shadow: none;
}
html.ivsto-host .sidebar-logo {
  padding: var(--f-21) var(--f-21) var(--f-21);
  border-bottom: 1px solid rgba(234,230,221,.08);
  gap: var(--f-13);
}
html.ivsto-host .sidebar-icon {
  width: 34px; height: 34px; min-width: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius); border: 1px solid rgba(234,230,221,.22);
  background: transparent; color: var(--pedra-150);
  font-family: var(--f-marca); font-size: 13px; letter-spacing: .08em; text-transform: none;
}
html.ivsto-host .sidebar-brand-name { font-family: var(--f-marca); font-size: 17px; letter-spacing: .32em; color: var(--pedra-150); font-weight: 400; line-height: 1.1; }
html.ivsto-host .sidebar-brand-sub  { font-family: var(--f-num); font-size: 9.5px; letter-spacing: .24em; color: var(--pedra-400); margin-top: var(--f-3); }
html.ivsto-host .sidebar-brand-block > div:first-child { background: rgba(234,230,221,.18) !important; opacity: 1 !important; }
html.ivsto-host .sidebar-nav { padding: var(--f-21) var(--f-13); }
html.ivsto-host .sidebar-nav-label { color: var(--pedra-400) !important; padding: 0 var(--f-13); margin-bottom: var(--f-8); }
html.ivsto-host .nav-btn {
  gap: var(--f-13);
  min-height: 44px;
  padding: var(--f-8) var(--f-13);
  margin-bottom: var(--f-3);
  border-radius: var(--radius);
  border-left: 2px solid transparent;
  font-family: var(--f-texto);
  font-size: 16.5px;
  font-weight: 400;
  letter-spacing: .01em;
  color: rgba(234,230,221,.72);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
html.ivsto-host .nav-btn svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.6; }
html.ivsto-host .nav-btn:hover { background: rgba(234,230,221,.06); color: var(--pedra-50); }
html.ivsto-host .nav-btn.active {
  background: rgba(234,230,221,.08);
  border-left: 2px solid var(--rubrica-400);
  padding-left: var(--f-13);
  color: var(--pedra-0);
  font-weight: 500;
}
html.ivsto-host .nav-btn .nav-count {
  background: rgba(234,230,221,.08); border: 1px solid rgba(234,230,221,.14);
  color: var(--pedra-200); font-size: 11px; border-radius: var(--radius-sm); padding: 1px 6px;
}
html.ivsto-host .nav-btn .nav-count:empty { display: none; }
html.ivsto-host .sidebar-footer { border-top: 1px solid rgba(234,230,221,.06); }
html.ivsto-host #appVersion { color: var(--pedra-400); font-size: 10px; }
html.ivsto-host .acct-av { background: var(--pedra-800); color: var(--pedra-100); }

/* ── 4. Cabeçalho: vidro calcário, régua fina ─────────────────────────── */
html.ivsto-host .crm-header {
  min-height: 55px;
  padding: var(--f-13) var(--f-34);
  gap: var(--f-21);
  background: rgba(244,241,234,.86);
  -webkit-backdrop-filter: saturate(1.2) blur(13px);
  backdrop-filter: saturate(1.2) blur(13px);
  border-bottom: 1px solid var(--pedra-200);
  box-shadow: none;
}
html.ivsto-host .crm-header h2 { font-family: var(--f-marca); font-size: var(--t-lg); font-weight: 400; color: var(--pedra-800); letter-spacing: .01em; }
html.ivsto-host .crm-header-sub { font-size: var(--t-sm); color: var(--pedra-550); font-style: italic; }
html.ivsto-host .cockpit-hello { font-family: var(--f-marca); font-weight: 400; color: var(--pedra-800); line-height: var(--lh-title); }
html.ivsto-host .cockpit-greet { align-items: baseline; margin: 0; }
html.ivsto-host .cockpit-hello { margin: 0; }
html.ivsto-host .cockpit-context { color: var(--pedra-550); }
html.ivsto-host .sidebar-toggle {
  width: 44px; min-width: 44px; height: 44px;
  border: 1px solid var(--pedra-200); background: var(--pedra-50); color: var(--pedra-800);
  box-shadow: none; border-radius: var(--radius);
}
html.ivsto-host .sidebar-toggle:hover { background: var(--pedra-800); color: var(--pedra-50); transform: none; box-shadow: none; }
html.ivsto-host .cockpit-search { border-radius: var(--radius); }
html.ivsto-host .cockpit-search input { background: var(--pedra-50); border: 1px solid var(--pedra-200); padding-left: 34px; }
html.ivsto-host .cockpit-icon-btn, html.ivsto-host .acct-trigger { min-width: 44px; min-height: 44px; }
html.ivsto-host .badge-demo { background: transparent; color: var(--pedra-550); border: 1px dashed var(--pedra-300); font-family: var(--f-num); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }

/* ── 5. Conteúdo e grade áurea ─────────────────────────────────────────── */
html.ivsto-host .crm-content {
  padding: var(--f-34);
  background: var(--pedra-150);
  max-width: 1597px;              /* Fibonacci */
}
html.ivsto-host .grid-4, html.ivsto-host .grid-3, html.ivsto-host .grid-2 { gap: var(--f-21); margin-bottom: var(--f-34); }
/* par áureo: 38,2% | 61,8% */
html.ivsto-host .iv-par { display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--f-21); }
html.ivsto-host .iv-par.inv { grid-template-columns: 1.618fr 1fr; }
/* entrada suave da aba ao trocar */
html.ivsto-host .crm-content > section { animation: iv-entra var(--dur-2) var(--ease) both; }
@keyframes iv-entra { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ── 6. Superfícies ──────────────────────────────────────────────────── */
html.ivsto-host .card, html.ivsto-host .settings-card {
  background: var(--pedra-50);
  border: 1px solid var(--pedra-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
html.ivsto-host .card:hover { box-shadow: var(--sh-2); border-color: var(--pedra-300); }
html.ivsto-host .card-accent { border-top: 2px solid var(--pedra-800); }
html.ivsto-host .kpi-card, html.ivsto-host .fg-kpi {
  background: var(--pedra-50);
  border: 1px solid var(--pedra-200);
  border-top: 2px solid var(--pedra-800);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-1);
}
html.ivsto-host .kpi-card:hover, html.ivsto-host .fg-kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
html.ivsto-host .kpi-value { font-size: var(--t-xl); font-weight: 500; color: var(--pedra-800); letter-spacing: -.01em; line-height: 1.1; }
html.ivsto-host .fg-kpi-val { font-size: var(--t-lg); font-weight: 500; color: var(--pedra-800); }
html.ivsto-host .kpi-icon { background: var(--pedra-100); border: 1px solid var(--pedra-200); color: var(--pedra-550); border-radius: var(--radius); }
html.ivsto-host .kpi-meta, html.ivsto-host .fg-kpi-sub { color: var(--pedra-550); font-size: var(--t-sm); }
html.ivsto-host .empty-state { color: var(--pedra-550); padding: var(--f-34) var(--f-21); }
html.ivsto-host .empty-state h3 { font-family: var(--f-marca); font-weight: 400; font-size: var(--t-md); color: var(--pedra-800); }
/* .empty-icon: ver seção Beagle IVSTO (D6) */

/* ── 7. Controles ────────────────────────────────────────────────────── */
html.ivsto-host input, html.ivsto-host select, html.ivsto-host textarea {
  background: var(--pedra-0);
  border: 1px solid var(--pedra-200);
  border-radius: var(--radius);
  color: var(--pedra-800);
  font-size: var(--t-base);
  padding: var(--f-8) var(--f-13);
  min-height: 40px;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
html.ivsto-host textarea { line-height: var(--lh-text); }
html.ivsto-host input[type="checkbox"], html.ivsto-host input[type="radio"] { min-height: 0; accent-color: var(--pedra-800); }
html.ivsto-host input::placeholder, html.ivsto-host textarea::placeholder { color: var(--pedra-500); font-style: italic; }
html.ivsto-host input:hover, html.ivsto-host select:hover, html.ivsto-host textarea:hover { border-color: var(--pedra-300); }
html.ivsto-host input:focus, html.ivsto-host select:focus, html.ivsto-host textarea:focus {
  border-color: var(--rubrica-400);
  box-shadow: var(--anel);
  background: var(--pedra-0);
  outline: none;
}
html.ivsto-host :focus-visible { outline: 2px solid var(--rubrica-600); outline-offset: 2px; }

/* Botões: um gesto Rubrica (primário); o resto em Pedra */
html.ivsto-host .btn-primary, html.ivsto-host .btn-crm-primary, html.ivsto-host #pageAction {
  background: var(--rubrica-600);
  color: var(--pedra-0);
  border: 1px solid var(--rubrica-600);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, var(--sh-1);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  font-weight: 500;
  letter-spacing: .01em;
  min-height: 40px;
  padding: var(--f-8) var(--f-21);
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
html.ivsto-host .btn-primary:hover, html.ivsto-host .btn-crm-primary:hover, html.ivsto-host #pageAction:hover {
  background: var(--rubrica-700); border-color: var(--rubrica-700); transform: translateY(-1px); box-shadow: var(--sh-2);
}
html.ivsto-host .btn-primary:active, html.ivsto-host .btn-crm-primary:active, html.ivsto-host #pageAction:active { transform: none; box-shadow: var(--sh-1); }
html.ivsto-host .btn-secondary, html.ivsto-host .btn-crm-secondary, html.ivsto-host .empty-state .empty-actions button {
  background: var(--pedra-0);
  color: var(--pedra-800);
  border: 1px solid var(--pedra-300);
  border-radius: var(--radius);
  box-shadow: none;
  font-family: var(--f-texto);
  font-size: var(--t-base);
  font-weight: 500;
  min-height: 40px;
  padding: var(--f-8) var(--f-21);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
html.ivsto-host .btn-secondary:hover, html.ivsto-host .btn-crm-secondary:hover, html.ivsto-host .empty-state .empty-actions button:hover {
  background: var(--pedra-100); border-color: var(--pedra-550); color: var(--pedra-900); box-shadow: none; transform: none;
}
/* vence o bloco legado com !important (app.css "— Botões —") */
html.ivsto-host .btn-crm-primary, html.ivsto-host .btn-crm-gold, html.ivsto-host .btn-crm-secondary {
  padding: 0 var(--f-21) !important; font-size: var(--t-base) !important; border-radius: var(--radius) !important;
}
html.ivsto-host .btn-crm-gold { background: var(--pedra-800); color: var(--pedra-50); border-color: var(--pedra-800); box-shadow: var(--sh-1); }
html.ivsto-host .btn-crm-gold:hover { background: var(--pedra-900); filter: none; box-shadow: var(--sh-2); }
html.ivsto-host .btn-icon { color: var(--pedra-550); min-width: 34px; min-height: 34px; }
html.ivsto-host .btn-icon:hover { background: var(--pedra-100); color: var(--pedra-800); transform: none; }
html.ivsto-host .btn-danger, html.ivsto-host .btn-icon.btn-danger:hover { color: var(--rubrica-600); }

/* Abas, pílulas e chips: Basalto marca o ativo; Rubrica fica para ação */
html.ivsto-host .fin-tab-btn.active, html.ivsto-host .cfg-tab-btn.active, html.ivsto-host .fin-toggle-btn.active,
html.ivsto-host .pill-filter-btn.active, html.ivsto-host .qd-pill .active, html.ivsto-host .agenda-chip.active {
  background: var(--pedra-800) !important; color: var(--pedra-50) !important; border-color: var(--pedra-800) !important;
}
html.ivsto-host .agenda-chip { border-color: var(--pedra-200); background: var(--pedra-0); color: var(--pedra-650); }
html.ivsto-host .badge { border-radius: var(--radius-sm); font-size: 11px; padding: 2px 8px; font-weight: 500; }
html.ivsto-host .badge-triagem, html.ivsto-host .badge-pendente, html.ivsto-host .badge-contato { background: var(--pedra-100); color: var(--pedra-650); border-color: var(--pedra-300); }
html.ivsto-host .badge-perdido, html.ivsto-host .badge-inadimplente { background: var(--rubrica-50); color: var(--rubrica-700); border-color: var(--rubrica-200); }

/* ── 8. Tabelas ──────────────────────────────────────────────────────── */
html.ivsto-host thead th { padding: var(--f-13) var(--f-21); border-bottom: 1px solid var(--pedra-300); background: transparent; }
html.ivsto-host tbody tr { border-bottom: 1px solid var(--pedra-200); transition: background var(--dur-1) var(--ease); }
html.ivsto-host tbody tr:hover { background: var(--pedra-100); }
html.ivsto-host tbody td { padding: var(--f-13) var(--f-21); font-size: 15.5px; color: var(--pedra-700); }
html.ivsto-host .table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 9. Modais e gavetas ─────────────────────────────────────────────── */
html.ivsto-host .modal-overlay { background: rgba(29,28,25,.46); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
html.ivsto-host .modal-box {
  background: var(--pedra-50);
  border: 1px solid var(--pedra-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-3);
  animation: iv-modal var(--dur-2) var(--ease) both;
}
@keyframes iv-modal { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
html.ivsto-host .modal-header { border-bottom: 1px solid var(--pedra-200); }
html.ivsto-host #fin-drawer, html.ivsto-host .ac-drawer { background: var(--pedra-50); box-shadow: var(--sh-3); }
html.ivsto-host #fin-drawer-overlay { background: rgba(29,28,25,.32); }
html.ivsto-host .prof-pop { background: var(--pedra-0); border: 1px solid var(--pedra-200); box-shadow: var(--sh-3); border-radius: var(--radius-lg); }
html.ivsto-host .busca-global-dropdown { background: var(--pedra-0); border: 1px solid var(--pedra-200); box-shadow: var(--sh-3); border-radius: var(--radius-lg); }
html.ivsto-host #toast-container > * { border-radius: var(--radius-lg); box-shadow: var(--sh-3); font-family: var(--f-texto); }

/* ── 10. Filtros que respiram ─────────────────────────────────────────── */
html.ivsto-host .filter-panel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--f-13); padding: var(--f-13) var(--f-21); }
html.ivsto-host .filter-panel > * { min-width: 0; }
html.ivsto-host #leadsEsteira, html.ivsto-host #acompKanban { gap: var(--f-13); scroll-snap-type: x proximity; scroll-padding: 0 var(--f-13); }
html.ivsto-host #leadsEsteira > *, html.ivsto-host #acompKanban > * { scroll-snap-align: start; }

/* Barra de rolagem discreta */
html.ivsto-host ::-webkit-scrollbar { width: 8px; height: 8px; }
html.ivsto-host ::-webkit-scrollbar-thumb { background: var(--pedra-300); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
html.ivsto-host ::-webkit-scrollbar-thumb:hover { background: var(--pedra-400); background-clip: padding-box; }

/* ── 11. Login no mesmo sistema ──────────────────────────────────────── */
html.ivsto-host #loginView { background: radial-gradient(ellipse at 50% 38%, #34332E 0%, var(--pedra-800) 61.8%); }
html.ivsto-host .lc-card { border-radius: var(--radius-lg); border: 1px solid rgba(234,230,221,.14); box-shadow: 0 21px 55px rgba(0,0,0,.34); overflow: hidden; }
html.ivsto-host .lc-header { padding: var(--f-34) var(--f-21) var(--f-21); }
html.ivsto-host .lc-firm-name { font-size: var(--t-xl); letter-spacing: .32em; }
html.ivsto-host .lc-body { background: var(--pedra-50); }
html.ivsto-host .lc-btn-sso { min-height: 44px; border-radius: var(--radius); border: 1px solid var(--pedra-300); background: var(--pedra-0); font-size: var(--t-base); transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
html.ivsto-host .lc-btn-sso:hover { border-color: var(--pedra-550); background: var(--pedra-0); }
html.ivsto-host .lc-email-toggle { min-height: 44px; border-radius: var(--radius); border-color: var(--pedra-300); }
html.ivsto-host .lc-btn-primary { min-height: 44px; border-radius: var(--radius); }
html.ivsto-host .lc-input { min-height: 44px; }
html.ivsto-host .lc-footer { background: var(--pedra-100); border-top: 1px solid var(--pedra-200); }
html.ivsto-host .lc-footer a, html.ivsto-host .lc-footer span { font-family: var(--f-texto); color: var(--pedra-650); }
html.ivsto-host #authCheckOverlay { background: var(--pedra-800); }

/* ── 12. Painel do assistente (moldura; liga por flag) ────────────────── */
html.ivsto-host .iv-assist-btn { display: none; }
html.ivsto-host.iv-assist-on .iv-assist-btn { display: inline-flex; }
html.ivsto-host .iv-assist {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: 377px; max-width: 100vw;
  display: flex; flex-direction: column;
  background: var(--pedra-50);
  border-left: 1px solid var(--pedra-200);
  box-shadow: var(--sh-3);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
}
html.ivsto-host.iv-assist-open .iv-assist { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease), visibility 0s; }
@media (min-width: 1280px) {
  /* no desktop largo o painel divide a tela em vez de cobrir: conteúdo | 377 px */
  html.ivsto-host.iv-assist-open #appView.active { margin-right: 377px; }
  html.ivsto-host .iv-assist { box-shadow: none; }
}
html.ivsto-host .iv-assist-head { display: flex; align-items: center; justify-content: space-between; gap: var(--f-13); min-height: 55px; padding: var(--f-13) var(--f-21); border-bottom: 1px solid var(--pedra-200); }
html.ivsto-host .iv-assist-head h3 { font-size: var(--t-md); margin: 0; color: var(--pedra-800); }
html.ivsto-host .iv-assist-head small { display: block; font-family: var(--f-num); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--pedra-550); }
html.ivsto-host .iv-assist-body { flex: 1; overflow-y: auto; padding: var(--f-21); display: flex; flex-direction: column; gap: var(--f-13); }
html.ivsto-host .iv-assist-msg { max-width: 89%; padding: var(--f-13) var(--f-13); border-radius: var(--radius-lg); line-height: var(--lh-text); font-size: var(--t-base); }
html.ivsto-host .iv-assist-msg.sis { align-self: flex-start; background: var(--pedra-0); border: 1px solid var(--pedra-200); color: var(--pedra-700); }
html.ivsto-host .iv-assist-foot { padding: var(--f-13) var(--f-21) calc(var(--f-13) + env(safe-area-inset-bottom)); border-top: 1px solid var(--pedra-200); display: flex; gap: var(--f-8); }
html.ivsto-host .iv-assist-foot textarea { flex: 1; resize: none; min-height: 44px; max-height: 144px; }
html.ivsto-host .iv-x { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; border-radius: var(--radius); color: var(--pedra-550); cursor: pointer; }
html.ivsto-host .iv-x:hover { background: var(--pedra-100); color: var(--pedra-800); }

/* ── 13. Navegação inferior (celular) ─────────────────────────────────── */
html.ivsto-host .iv-bnav { display: none; }

/* ════════ TABLET ≤ 1024 ════════ */
@media (max-width: 1024px) {
  html.ivsto-host #appView.active { background: var(--pedra-150); }
  html.ivsto-host .crm-header { padding: var(--f-8) var(--f-21); flex-wrap: nowrap; }
  html.ivsto-host .crm-header-sub, html.ivsto-host #demoTag { display: none !important; }
  html.ivsto-host .crm-header-left { min-width: 0; flex: 1 1 auto; }
  html.ivsto-host .crm-header-actions { flex: 0 1 auto; min-width: 0; }
  html.ivsto-host .cockpit-search { flex: 0 1 233px; min-width: 0; }
  html.ivsto-host .cockpit-search input { width: 100%; }
  html.ivsto-host .crm-content { padding: var(--f-21); }
  html.ivsto-host .sidebar { width: min(85vw, 300px); box-shadow: none; }
  html.ivsto-host #appView.sidebar-open .sidebar { box-shadow: var(--sh-3); }
  /* 08/10: o #sidebarBackdrop do fim do body fica fora do #appView (.view isola o empilhamento)
     e cobria a gaveta inteira: o toque no menu só fechava. O fundo de dentro do #appView basta. */
  html.ivsto-host #sidebarBackdrop { display: none; }
}

/* ════════ CELULAR ≤ 768 ════════ */
@media (max-width: 768px) {
  html.ivsto-host { font-size: 16.5px; }
  /* cabeçalho enxuto: título + sino + conta; menu vai para a barra inferior */
  html.ivsto-host .crm-header {
    display: flex !important; flex-wrap: nowrap; align-items: center;
    min-height: 55px; padding: var(--f-8) var(--f-13); gap: var(--f-8);
    padding-top: calc(var(--f-8) + env(safe-area-inset-top));
  }
  html.ivsto-host .crm-header .sidebar-toggle { display: none !important; }
  /* sem backdrop-filter no celular: ele prenderia o botão flutuante ao cabeçalho */
  html.ivsto-host .crm-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--pedra-100); }
  html.ivsto-host #atendModoCaptacao, html.ivsto-host #atendModoAcomp, html.ivsto-host #toggleRecursosCasos,
  html.ivsto-host .fin-toggle-btn, html.ivsto-host #agendaBtnRealizados, html.ivsto-host .agenda-chip { min-height: 44px; }
  html.ivsto-host .agenda-chip { display: inline-flex; align-items: center; padding: 0 var(--f-13); }
  /* alvo mínimo de 44 px para todo botão do conteúdo no celular */
  html.ivsto-host .crm-content button, html.ivsto-host .crm-content select { min-height: 44px; }
  html.ivsto-host .crm-content button:not([class*="btn-"]):not(.agenda-chip) { min-width: 44px; }
  html.ivsto-host .crm-content [class*="btn-"], html.ivsto-host .crm-content .empty-state .empty-actions button { min-height: 44px !important; }
  html.ivsto-host .crm-header-left { flex: 1 1 auto; min-width: 0; }
  html.ivsto-host .crm-header h2 { font-size: var(--t-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.ivsto-host .cockpit-hello { font-size: var(--t-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.ivsto-host .crm-header-actions { flex: 0 0 auto; gap: var(--f-5); }
  html.ivsto-host #demoTag, html.ivsto-host .cockpit-search { display: none !important; }
  /* ação da página vira botão flutuante estendido, acima da barra inferior */
  html.ivsto-host #pageAction {
    position: fixed; z-index: 45;
    right: var(--f-13); bottom: calc(55px + var(--f-13) + env(safe-area-inset-bottom));
    min-height: 48px; padding: var(--f-8) var(--f-21);
    border-radius: 24px; box-shadow: var(--sh-3);
  }
  html.ivsto-host .crm-content { padding: var(--f-13) var(--f-13) calc(55px + 89px + env(safe-area-inset-bottom)); }
  /* tudo cabe na largura: nada empurra a página para o lado */
  html.ivsto-host .crm-content, html.ivsto-host .crm-content > section, html.ivsto-host .crm-content .card { max-width: 100%; min-width: 0; }
  html.ivsto-host .filter-panel { padding: var(--f-13); gap: var(--f-8); }
  html.ivsto-host .filter-panel > input, html.ivsto-host .filter-panel > select,
  html.ivsto-host .filter-panel input[type="text"], html.ivsto-host .filter-panel input[type="search"] { width: 100% !important; flex: 1 1 100%; }
  html.ivsto-host .filter-panel > select { flex: 1 1 calc(50% - var(--f-8)); width: auto !important; }
  html.ivsto-host input, html.ivsto-host select, html.ivsto-host textarea { min-height: 44px; font-size: 16px; } /* 16 px: iOS não dá zoom */
  html.ivsto-host .btn-primary, html.ivsto-host .btn-secondary, html.ivsto-host .btn-crm-primary, html.ivsto-host .btn-crm-secondary { min-height: 44px; }
  html.ivsto-host .grid-4 { grid-template-columns: 1fr 1fr; gap: var(--f-13); }
  html.ivsto-host .grid-3, html.ivsto-host .grid-2, html.ivsto-host .iv-par, html.ivsto-host .iv-par.inv { grid-template-columns: 1fr; gap: var(--f-13); }
  html.ivsto-host #leadsEsteira > *, html.ivsto-host #acompKanban > * { min-width: min(82vw, 300px) !important; max-width: 82vw; }
  /* modal: tela cheia no celular (decisão anterior, app.css "Item 4"); entra subindo */
  html.ivsto-host .modal-box {
    border: 0;
    padding-bottom: calc(var(--f-21) + env(safe-area-inset-bottom)) !important;
    animation: iv-folha var(--dur-3) var(--ease) both;
  }
  @keyframes iv-folha { from { transform: translateY(21px); opacity: .6; } to { transform: none; opacity: 1; } }
  html.ivsto-host .iv-assist { width: 100vw; }

  /* barra inferior */
  html.ivsto-host .iv-bnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
    display: grid; grid-template-columns: repeat(var(--iv-bnav-n, 5), 1fr);
    height: calc(55px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(43,42,38,.96);
    -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px);
    border-top: 1px solid rgba(234,230,221,.08);
  }
  html.ivsto-host #appView:not(.active) ~ .iv-bnav, html.ivsto-host body:not(.iv-app) .iv-bnav { display: none; }
  html.ivsto-host .iv-bnav button {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 55px; padding: var(--f-5) 0 0;
    background: none; border: 0; cursor: pointer;
    color: rgba(234,230,221,.62);
    font-family: var(--f-texto); font-size: 12px; letter-spacing: .02em;
    transition: color var(--dur-1) var(--ease);
    -webkit-tap-highlight-color: transparent;
  }
  html.ivsto-host .iv-bnav button svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6; }
  html.ivsto-host .iv-bnav button[aria-current="page"] { color: var(--pedra-0); }
  html.ivsto-host .iv-bnav button[aria-current="page"]::before {
    content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; border-radius: 0 0 2px 2px; background: var(--rubrica-400);
  }
  html.ivsto-host .iv-bnav .iv-dot { position: absolute; top: 8px; left: calc(50% + 8px); min-width: 8px; height: 8px; border-radius: 4px; background: var(--rubrica-400); }
  html.ivsto-host .sidebar-backdrop { z-index: 46; }
  html.ivsto-host .sidebar { z-index: 47; }
}

@media (max-width: 380px) {
  html.ivsto-host .iv-bnav button span { font-size: 11px; }
  html.ivsto-host .grid-4 { grid-template-columns: 1fr; }
}

/* ── Movimento reduzido ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.ivsto-host *, html.ivsto-host *::before, html.ivsto-host *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ── Impressão: sem shell ───────────────────────────────────────────── */
@media print {
  html.ivsto-host .sidebar, html.ivsto-host .crm-header, html.ivsto-host .iv-bnav, html.ivsto-host .iv-assist, html.ivsto-host #pageAction { display: none !important; }
  html.ivsto-host #appView.active { display: block; background: #fff; }
}

/* IVSTO · projeção tonal das cores secundárias (gerado por d2b_projecao.py).
   Cada --x-HEX recebe o tom da rampa Pedra (ou Rubrica, para alerta) com a mesma luminosidade. */
html.ivsto-host {
  --x-0078d4: #79776F; /* era #0078D4 */
  --x-031b14: #181610; /* era #031B14 */
  --x-038387: #75736B; /* era #038387 */
  --x-06261d: #222019; /* era #06261D */
  --x-071a13: #181610; /* era #071A13 */
  --x-081f18: #1C1A14; /* era #081F18 */
  --x-08261d: #22201A; /* era #08261D */
  --x-0a2f24: #2A2821; /* era #0A2F24 */
  --x-0b2318: #201D17; /* era #0B2318 */
  --x-0b382b: #322F29; /* era #0B382B */
  --x-0b3d20: #35332C; /* era #0B3D20 */
  --x-0d0d1a: #110F09; /* era #0D0D1A */
  --x-0f1f17: #1D1B15; /* era #0F1F17 */
  --x-0f2b1c: #27241E; /* era #0F2B1C */
  --x-107c10: #69665F; /* era #107C10 */
  --x-122a20: #27241E; /* era #122A20 */
  --x-128c4b: #78756E; /* era #128C4B */
  --x-143c28: #35332C; /* era #143C28 */
  --x-155724: #4B4841; /* era #155724 */
  --x-15803d: #6D6B63; /* era #15803D */
  --x-166534: #57554D; /* era #166534 */
  --x-184a32: #413F38; /* era #184A32 */
  --x-198754: #75726A; /* era #198754 */
  --x-1a6b3a: #5D5A53; /* era #1A6B3A */
  --x-1b3e2f: #38362F; /* era #1B3E2F */
  --x-1e9e6a: #89867E; /* era #1E9E6A */
  --x-1f5438: #4A4841; /* era #1F5438 */
  --x-1f6b3a: #5D5A53; /* era #1F6B3A */
  --x-22c55e: #A8A59D; /* era #22C55E */
  --x-2e482d: #434039; /* era #2E482D */
  --x-2f7a45: #6B6861; /* era #2F7A45 */
  --x-495933: #55524B; /* era #495933 */
  --x-636b3a: #68665E; /* era #636B3A */
  --x-6b5020: #58554E; /* era #6B5020 */
  --x-7a3227: #783329; /* era #7A3227 */
  --x-7a5c2e: #64625A; /* era #7A5C2E */
  --x-7e7d41: #7C7971; /* era #7E7D41 */
  --x-7f0000: #6E251B; /* era #7F0000 */
  --x-856a00: #706D66; /* era #856A00 */
  --x-8764b8: #7B7971; /* era #8764B8 */
  --x-8a5b00: #984D41; /* era #8A5B00 */
  --x-8a5d00: #6A6760; /* era #8A5D00 */
  --x-8c3a2e: #8C3A2E; /* era #8C3A2E */
  --x-94a3b8: #A4A299; /* era #94A3B8 */
  --x-988f48: #8F8D85; /* era #988F48 */
  --x-9a3412: #903E32; /* era #9A3412 */
  --x-9b1c1c: #89382C; /* era #9B1C1C */
  --x-9c3626: #924034; /* era #9C3626 */
  --x-a8c8a8: #C1BEB5; /* era #A8C8A8 */
  --x-b04a35: #A35448; /* era #B04A35 */
  --x-b3a04e: #A3A098; /* era #B3A04E */
  --x-b91c1c: #9A493D; /* era #B91C1C */
  --x-bfdbfe: #DBD8D0; /* era #BFDBFE */
  --x-c2410c: #A7594C; /* era #C2410C */
  --x-c4a821: #ACA9A1; /* era #C4A821 */
  --x-c4a86a: #AEABA3; /* era #C4A86A */
  --x-c8a96b: #B0ADA5; /* era #C8A96B */
  --x-c8a96e: #B0ADA5; /* era #C8A96E */
  --x-c9a96b: #B0AEA5; /* era #C9A96B */
  --x-c9a96e: #B1AEA6; /* era #C9A96E */
  --x-ca5010: #B06357; /* era #CA5010 */
  --x-d4a017: #ACA9A1; /* era #D4A017 */
  --x-d4edda: #E8E5DD; /* era #D4EDDA */
  --x-d5d1c6: #D4D1C9; /* era #D5D1C6 */
  --x-d9d4c7: #D7D4CC; /* era #D9D4C7 */
  --x-dac190: #C7C4BC; /* era #DAC190 */
  --x-dc5050: #BA6F62; /* era #DC5050 */
  --x-dcefe2: #ECE9E1; /* era #DCEFE2 */
  --x-dcf8c6: #F0EDE4; /* era #DCF8C6 */
  --x-ddca8a: #CDCAC2; /* era #DDCA8A */
  --x-e0dbd0: #DEDBD3; /* era #E0DBD0 */
  --x-e3ded2: #E1DED6; /* era #E3DED2 */
  --x-e4e0d8: #E3E0D8; /* era #E4E0D8 */
  --x-e8e0d0: #E4E1D8; /* era #E8E0D0 */
  --x-e8e2cf: #E5E2D9; /* era #E8E2CF */
  --x-e8e5e0: #E8E5DD; /* era #E8E5E0 */
  --x-e8f0eb: #F1EEE5; /* era #E8F0EB */
  --x-e8f5e8: #F4F1E8; /* era #E8F5E8 */
  --x-e8f5f0: #F4F1E9; /* era #E8F5F0 */
  --x-eae6dd: #E9E6DE; /* era #EAE6DD */
  --x-ede8e0: #ECE9E0; /* era #EDE8E0 */
  --x-eef3f1: #F5F2E9; /* era #EEF3F1 */
  --x-ef4444: #BF7467; /* era #EF4444 */
  --x-efeadd: #EDEAE1; /* era #EFEADD */
  --x-efeae2: #EEEBE2; /* era #EFEAE2 */
  --x-f0e8d8: #ECE9E0; /* era #F0E8D8 */
  --x-f0ede6: #F0EDE4; /* era #F0EDE6 */
  --x-f0fdf4: #FCF9F0; /* era #F0FDF4 */
  --x-f59e0b: #E4A094; /* era #F59E0B */
  --x-f6dcd6: #E5E2DA; /* era #F6DCD6 */
  --x-f6ead0: #EEEBE2; /* era #F6EAD0 */
  --x-f6f3ec: #F6F3EA; /* era #F6F3EC */
  --x-f6f3ed: #F6F3EB; /* era #F6F3ED */
  --x-f7f5f2: #F8F5ED; /* era #F7F5F2 */
  --x-f8f6f0: #F9F6ED; /* era #F8F6F0 */
  --x-f8f7f4: #FAF7EE; /* era #F8F7F4 */
  --x-f97316: #D28B7E; /* era #F97316 */
  --x-fed7aa: #FAD4CD; /* era #FED7AA */
  --x-fee2e2: #EDEAE1; /* era #FEE2E2 */
  --x-fff7ed: #FBF8EF; /* era #FFF7ED */
  --x-fff9ec: #FCF9F1; /* era #FFF9EC */
}

/* ── Ajustes finos (loop de verificação) ─────────────────────────────── */
html.ivsto-host button:disabled, html.ivsto-host .btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
@media (min-width: 1025px) {
  /* com o painel aberto o conteúdo fica com ~830 px: o cabeçalho se enxuga como no tablet */
  html.ivsto-host.iv-assist-open .crm-header-sub, html.ivsto-host.iv-assist-open #demoTag { display: none !important; }
  html.ivsto-host.iv-assist-open .cockpit-search { flex: 0 1 233px; min-width: 0; }
  html.ivsto-host.iv-assist-open .cockpit-search input { width: 100%; max-width: none; }
}

/* ── D5 · App instalado (tela cheia no celular) ───────────────────────────
   Aberto pelo ícone da tela inicial, o app ocupa a tela toda (display standalone/fullscreen).
   As áreas seguras (entalhe, barra de gestos) viram respiro do próprio shell. */
html.ivsto-host.iv-instalado, html.ivsto-host.iv-instalado body { height: 100%; overscroll-behavior-y: none; }
html.ivsto-host.iv-instalado body { -webkit-tap-highlight-color: transparent; } /* texto continua copiável (número de processo, CPF) */
html.ivsto-host .sidebar { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); }
html.ivsto-host .crm-header { padding-right: max(var(--f-13), env(safe-area-inset-right)); }
html.ivsto-host #loginView { padding: calc(clamp(1.25rem, 3vw, 3rem) + env(safe-area-inset-top)) calc(clamp(1.25rem, 3vw, 3rem) + env(safe-area-inset-right)) calc(clamp(1.25rem, 3vw, 3rem) + env(safe-area-inset-bottom)) calc(clamp(1.25rem, 3vw, 3rem) + env(safe-area-inset-left)); min-height: 100dvh; }
html.ivsto-host .iv-assist-head { padding-top: calc(var(--f-13) + env(safe-area-inset-top)); }
@media (display-mode: standalone), (display-mode: fullscreen) {
  html.ivsto-host .crm-header { padding-top: calc(var(--f-8) + env(safe-area-inset-top)); }
}
/* modais e gavetas de tela cheia não ficam sob a barra de status ou o entalhe */
@media (max-width: 640px) {
  html.ivsto-host .modal-box { padding-top: calc(24px + env(safe-area-inset-top)) !important; }
}
html.ivsto-host .ac-drawer, html.ivsto-host #fin-drawer { top: env(safe-area-inset-top); bottom: env(safe-area-inset-bottom); height: auto; }
/* celular deitado (Safari com viewport-fit=cover): conteúdo fora do entalhe lateral */
@media (orientation: landscape) and (max-height: 500px) {
  html.ivsto-host .crm-content { padding-left: max(var(--f-21), env(safe-area-inset-left)); padding-right: max(var(--f-21), env(safe-area-inset-right)); }
  html.ivsto-host .crm-header { padding-left: max(var(--f-21), env(safe-area-inset-left)); }
}

/* convite discreto para instalar (só no celular, só no navegador, uma vez) */
html.ivsto-host .iv-instalar {
  position: fixed; left: var(--f-13); right: var(--f-13); z-index: 48;
  bottom: calc(55px + var(--f-13) + 48px + var(--f-13) + env(safe-area-inset-bottom)); /* acima do botão flutuante */
  display: flex; align-items: center; gap: var(--f-13);
  padding: var(--f-13); border-radius: var(--radius-lg);
  background: var(--pedra-800); color: var(--pedra-100); box-shadow: var(--sh-3);
  animation: iv-folha var(--dur-3) var(--ease) both;
}
html.ivsto-host .iv-instalar img { width: 44px; height: 44px; border-radius: 10px; flex: 0 0 auto; }
html.ivsto-host .iv-instalar p { margin: 0; flex: 1; min-width: 0; font-size: 15px; line-height: 1.382; }
html.ivsto-host .iv-instalar b { color: var(--pedra-0); font-weight: 500; }
html.ivsto-host .iv-instalar button { min-height: 44px; padding: 0 var(--f-13); border-radius: var(--radius); border: 1px solid rgba(234,230,221,.24); background: transparent; color: var(--pedra-100); font-family: var(--f-texto); font-size: 15px; cursor: pointer; }
html.ivsto-host .iv-instalar button.sim { background: var(--rubrica-600); border-color: var(--rubrica-600); color: var(--pedra-0); }
@media (min-width: 769px) { html.ivsto-host .iv-instalar { display: none; } }
@media (max-width: 768px) {
  /* alças de arrastar/redimensionar do Painel não servem ao toque: a largura volta ao conteúdo */
  html.ivsto-host #painel-content .painel-sec { padding-left: 0; }
  html.ivsto-host .painel-sec-grip, html.ivsto-host .painel-sec-resize { display: none; }
  html.ivsto-host .painel-sec-foot { padding-left: 0; }
}
@media (max-width: 768px) {
  /* Casos no celular: cada linha vira um cartão (título inteiro; fase, cliente e situação embaixo) */
  html.ivsto-host #tab-casos table thead { display: none; }
  html.ivsto-host #tab-casos .table-scroll-wrap { overflow-x: visible; }
  html.ivsto-host #casosTableBody tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--f-8) var(--f-13);
    padding: var(--f-13) var(--f-13) var(--f-13) var(--f-21);
  }
  html.ivsto-host #casosTableBody td { padding: 0 !important; border: 0; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.ivsto-host #casosTableBody tr > td:nth-child(5) { color: var(--pedra-550); }
  html.ivsto-host #casosTableBody td.col-hide-mobile { display: none; }
  html.ivsto-host #casosTableBody tr > td:first-child { grid-column: 1 / -1; font-size: 16.5px; line-height: 1.382; white-space: normal; }
  html.ivsto-host #casosTableBody tr > td:last-child { justify-self: end; align-self: center; }
  html.ivsto-host #casosTableBody tr > td[colspan] { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  /* WhatsApp no celular: lista em 100% da largura; a conversa abre em tela cheia (padrão lista → conversa) */
  html.ivsto-host #tab-whatsapp .wa-layout {
    flex-direction: column;
    height: calc(100dvh - 55px - 55px - var(--f-34) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: 377px;
  }
  html.ivsto-host #tab-whatsapp .wa-sidebar { width: 100% !important; max-width: 100% !important; flex: 1 1 auto; border-right: 0; border-bottom: 0; min-height: 0; overflow-y: auto; }
  html.ivsto-host #tab-whatsapp .wa-sidebar.wa-panel-hidden { display: none !important; }
  html.ivsto-host #tab-whatsapp .wa-main { display: none !important; }
  html.ivsto-host #tab-whatsapp .wa-main.wa-panel-active { display: flex !important; flex: 1 1 auto; min-height: 0; }
  html.ivsto-host #tab-whatsapp .wa-context { display: none !important; }
  html.ivsto-host .crm-content:has(#tab-whatsapp[style*="block"]) { padding-bottom: var(--f-13); }
}

/* ── Prazos da semana (topo do Painel, host IVSTO) ───────────────────── */
html.ivsto-host .iv-prazos { padding: var(--f-13) var(--f-21); margin-bottom: var(--f-21); border-top: 2px solid var(--rubrica-600); }
html.ivsto-host .iv-prazos-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--f-13); margin: var(--f-5) 0 var(--f-8); }
html.ivsto-host .iv-prazos-cab h3 { margin: 0; font-size: var(--t-md); color: var(--pedra-800); }
html.ivsto-host .iv-prazos-n { font-family: var(--f-num); font-size: 11px; letter-spacing: .06em; color: var(--pedra-550); }
html.ivsto-host .iv-prazo { display: grid; grid-template-columns: 89px minmax(0, 1fr) auto; align-items: center; gap: var(--f-13); width: 100%; min-height: 55px; padding: var(--f-8) 0; border: 0; border-top: 1px solid var(--pedra-200); background: none; text-align: left; cursor: pointer; font-family: var(--f-texto); color: var(--pedra-800); }
html.ivsto-host .iv-prazo:first-child { border-top: 0; }
html.ivsto-host .iv-prazo:hover { background: var(--pedra-100); }
html.ivsto-host .iv-prazo-data { font-family: var(--f-num); font-size: 12px; color: var(--pedra-650); font-variant-numeric: tabular-nums; }
html.ivsto-host .iv-prazo-tx { min-width: 0; }
html.ivsto-host .iv-prazo-tx b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ivsto-host .iv-prazo-tx small { display: block; color: var(--pedra-550); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ivsto-host .chip-iv { font-family: var(--f-num); font-size: 10.5px; letter-spacing: .06em; padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid var(--pedra-300); background: var(--pedra-100); color: var(--pedra-650); white-space: nowrap; }
html.ivsto-host .chip-iv.r { background: var(--rubrica-50); border-color: var(--rubrica-200); color: var(--rubrica-700); }
html.ivsto-host .iv-prazos-vazio { margin: var(--f-8) 0; color: var(--pedra-550); font-style: italic; }
html.ivsto-host .iv-prazos-erro { color: var(--rubrica-700); font-style: normal; }
html.ivsto-host .iv-prazos-mais { min-height: 44px; margin-top: var(--f-5); padding: 0; border: 0; background: none; color: var(--pedra-800); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-family: var(--f-texto); }
@media (max-width: 768px) { html.ivsto-host .iv-prazo { grid-template-columns: 70px minmax(0, 1fr) auto; } }
@media (max-width: 768px) {
  /* caixas de seleção maiores ao toque (mínimo WCAG 2.2 AA de 24 px, com folga) */
  html.ivsto-host .crm-content input[type="checkbox"] { width: 28px; height: 28px; min-height: 28px; margin: 8px; }
}

/* ── Beagle IVSTO (D6) ───────────────────────────────────────────────────
   Assinatura discreta da marca. Escala Pedra; nunca Rubrica.
   Mono vai por máscara (cor pelo token); perfil e farejo por imagem.      */
html.ivsto-host .lc-footer::before,
html.ivsto-host .sidebar-footer::before {
  content: ""; flex: none; display: inline-block;
  -webkit-mask: url("/img/beagle/beagle-mono.svg?v=86a4cbb2") center / contain no-repeat;
          mask: url("/img/beagle/beagle-mono.svg?v=86a4cbb2") center / contain no-repeat;
}
html.ivsto-host .lc-footer::before { width: 21px; height: 18px; background: var(--pedra-550); }
html.ivsto-host .sidebar-footer { display: flex; align-items: center; gap: var(--f-8); }
html.ivsto-host .sidebar-footer::before { width: 24px; height: 20px; background: var(--pedra-400); opacity: .85; }

html.ivsto-host .iv-av {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--pedra-300);
  background: var(--pedra-150) url("/img/beagle/beagle-perfil.svg?v=71dd02b1") center / cover no-repeat;
}
html.ivsto-host .iv-assist-id { display: flex; align-items: center; gap: var(--f-13); min-width: 0; }
html.ivsto-host .iv-assist-msg.sis { position: relative; margin-left: 42px; max-width: calc(89% - 42px); }
html.ivsto-host .iv-assist-msg.sis::before {
  content: ""; position: absolute; left: -42px; top: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--pedra-300);
  background: var(--pedra-150) url("/img/beagle/beagle-perfil.svg?v=71dd02b1") center / cover no-repeat;
}

html.ivsto-host .empty-state .empty-icon {
  width: 144px; height: 105px; margin: 0 auto var(--f-13);
  font-size: 0; line-height: 0; filter: none; opacity: 1;
  background: url("/img/beagle/beagle-farejo.svg?v=1e97cc50") center / contain no-repeat;
}
html.ivsto-host .empty-state .empty-icon > * { display: none; }
@media (max-width: 768px) { html.ivsto-host .empty-state .empty-icon { width: 110px; height: 80px; } }

/* ── Ajustes da verificação pós-deploy (02647fc) ─────────────────────────
   Financeiro: as tabelas largas rolam dentro do cartão em vez de cortar colunas
   (o cartão vinha com overflow:hidden inline; em 768 px Status e Atraso sumiam). */
html.ivsto-host [id^="fin-panel-"] > .card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
/* Login do produto: a inscrição da sociedade é da advocacia, não do IVSTO. */
html.ivsto-host .lc-footer > span:last-child,
html.ivsto-host .lc-footer > .lc-foot-sep:nth-last-child(2) { display: none; }