/* ===== HOW CRM — base visual (PT Sans + tokens --palette-* de kommo-tokens.css). Tema clássico (azul) em :root / [data-color-scheme=dark]; temas HOW por [data-brand="how"] no fim do arquivo ===== */
@font-face { font-family: "PT Sans"; src: url("/fonts/PTS55F_W.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Sans"; src: url("/fonts/PTS75F_W.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Sans"; src: url("/fonts/PTS56F_W.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "PT Sans"; src: url("/fonts/PTS76F_W.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "PT Sans Caption"; src: url("/fonts/PTSans-Caption.woff") format("woff"); font-weight: 400 700; font-display: swap; }

/* Mapeamento dos tokens da interface para a paleta do Kommo (claro em :root, escuro em [data-color-scheme=dark]) */
:root {
  color-scheme: light;
  --font: "PT Sans", Arial, sans-serif;
  --font-caption: "PT Sans Caption", "Arial Black", sans-serif;
  --on-primary: #ffffff;
  --bg: var(--palette-background-default);            /* #f5f5f5 / #0f2231 */
  --panel: var(--palette-background-primary);         /* #fff / #153043 */
  --panel-2: var(--palette-background-secondary-300); /* #f5f7fc / #0f2231 */
  --panel-3: var(--palette-background-secondary-500); /* #ededed / #153043 */
  --chip-bg: #e8e8e8;
  --bubble-out: #e5eeff;
  --bubble-out-border: #d4e3f1;
  --warning-text: #d09e34;
  --toast-bg: #363b44;
  --sidebar-bg: var(--palette-left-menu-background-primary);   /* #1b3446 / #07131d */
  --sidebar-top-bg: var(--palette-left-menu-background-secondary); /* #162b3a / #07131d */
  --sidebar-bg-hover: rgba(255,255,255,.04);
  --sidebar-active: #4c8bf7;
  --sidebar-text: var(--palette-left-menu-text-primary);       /* #9da8ae / #97a6be */
  --sidebar-width: 65px;
  --header-h: 65px;
  --border: var(--palette-border-primary);            /* #e3e3e3 / #284860 */
  --border-strong: var(--palette-border-default);     /* #c5c5c5 / #596683 */
  --text: var(--palette-text-primary);                /* #363b44 / #f2f2f2 */
  --text-muted: var(--palette-text-secondary-dark);   /* #6b6d72 / #8092ad */
  --text-faint: var(--palette-text-secondary-light);  /* #92989b / #7f8ba4 */
  --link: var(--palette-link-primary);                /* #0057a9 / #1691ff */
  --link-hover: var(--palette-link-hover);
  --primary: #4c8bf7;                                  /* botão azul do Kommo (--base_button_active) */
  --primary-border: #4077d6;
  --primary-hover: #3d7de8;
  --primary-soft: #e9f1ff;
  --success: #24bc8c;
  --success-text: #209158;
  --success-soft: #edf7f1;
  --danger: #f37575;
  --danger-strong: #fd5598;
  --danger-soft: #fde1e1;
  --warning: #e4b248;
  --warning-soft: #fdf0c3;
  --hover-row: var(--palette-table-hover-background); /* #f8faff / #153f5f */
  --placeholder: var(--palette-placeholder-primary);
  --radius: 4px;
  --radius-sm: 3px;
  --shadow: 0 1px 2px rgba(0,0,0,.06);
  --shadow-lg: 0 6px 20px rgba(0,0,0,.18);
  --login-bg: linear-gradient(135deg, #1b3446 0%, #0f2231 100%); /* fundo da tela de login (tema clássico) */
}
[data-color-scheme="dark"] {
  color-scheme: dark;
  --chip-bg: #29405f;
  --bubble-out: #264b79;
  --bubble-out-border: #2b548b;
  --warning-text: #e4b248;
  --toast-bg: #264b79;
  --primary-soft: #264b79;
  --success-soft: #16382a;
  --danger-soft: #3d2124;
  --warning-soft: #3d3117;
  --shadow: 0 1px 2px rgba(0,0,0,.35);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); font-size: 15px; line-height: 1.3; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow: hidden; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cfd6e0; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

.boot-loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--border-strong); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
.spinner.sm { width: 16px; height: 16px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Layout (menu lateral 65px + barra superior 65px, como no Kommo) ===== */
.app { height: 100vh; display: flex; }
.sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; align-items: stretch; flex-shrink: 0; user-select: none; position: relative; z-index: 110; }
/* bloco "Conta" no topo — logo K da primeira versão (quadrado azul) + rótulo; vai direto para Configurações */
.sidebar .logo { height: 65px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--sidebar-top-bg); position: relative; cursor: pointer; overflow: hidden; text-decoration: none; }
.sidebar .logo .hmark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; }
.sidebar .logo .hmark svg { width: 32px; height: 32px; display: block; }
.sidebar .logo:hover .hmark { filter: brightness(1.1); }
/* logo HOW (marca SVG + wordmark "HOW" + "CRM" em laranja) — brand.js#logoHtml */
.hlogo { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.hlogo b { font-weight: 800; letter-spacing: .02em; }
.hlogo i { font-style: normal; color: #F26A1B; letter-spacing: .26em; font-size: .72em; font-weight: 700; }
.hlogo svg { flex-shrink: 0; }
.sidebar .logo .acct-label { font-size: 10.5px; line-height: 12px; color: #fff; }
.sidebar nav { display: flex; flex-direction: column; flex: 1; padding: 12px 0 20px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.sidebar nav::-webkit-scrollbar { display: none; }
/* item: ícone de traço (icons de ui.js, 24px) + rótulo; ativo = bloco destacado com filete azul à esquerda (primeira versão) */
.sidebar nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 60px; padding: 0; color: var(--sidebar-text); font-size: 11px; line-height: 13px; text-decoration: none; text-align: center; position: relative; margin-bottom: 2px; border-left: 3px solid transparent; border-right: 3px solid transparent; }
.sidebar nav a .nav-ico { width: 28px; height: 26px; display: flex; align-items: center; justify-content: center; position: relative; }
.sidebar nav a .nav-ico svg { width: 24px; height: 24px; display: block; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sidebar nav a span.nav-title { display: block; width: 65px; margin: 0 auto; overflow: visible; white-space: nowrap; letter-spacing: -.2px; font-size: 10.5px; }
.sidebar nav a:hover { color: #fff; text-decoration: none; background: var(--sidebar-bg-hover); }
.sidebar nav a.active { color: #fff; background: rgba(255,255,255,.08); border-left-color: var(--sidebar-active); }
.sidebar nav a.active span.nav-title { color: #fff; font-weight: 700; }
.sidebar nav .spacer { flex: 1; }
.sidebar nav a .badge { position: absolute; top: 5px; left: calc(50% + 4px); background: #aa3b3f; color: #fff; font-size: 10px; line-height: 10px; font-weight: 700; padding: 3px 5px; border-radius: 20px; min-width: 16px; text-align: center; }
.sidebar .user { padding: 10px 6px 12px; display: flex; justify-content: center; }
.sidebar .user .avatar { width: 34px; height: 34px; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; }
/* barra superior de página (equivale ao .content__top / pipeline header do Kommo) */
.header { height: var(--header-h); background: var(--bg); border-bottom: 0; display: flex; align-items: center; gap: 12px; padding: 0 30px; flex-shrink: 0; }
.header h1 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; font-family: var(--font-caption); }
.header .sub { color: var(--text-muted); font-weight: 400; margin-left: 6px; text-transform: none; letter-spacing: 0; font-family: var(--font); font-size: 15px; }
.header .grow { flex: 1; }
.header .search { position: relative; width: 340px; max-width: 30vw; }
.header .search input { width: 100%; padding: 6px 12px 6px 32px; border-radius: 3px; border: 1px solid transparent; background: transparent; outline: none; color: var(--text); font-size: 15px; }
.header .search input::placeholder { color: var(--placeholder); }
.header .search input:focus { border-color: var(--border-strong); background: var(--panel); }
.header .search svg { position: absolute; left: 10px; top: 9px; width: 16px; height: 16px; stroke: var(--text-faint); fill: none; stroke-width: 2; }
.header .search .results { position: absolute; top: 38px; left: 0; right: 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 50; max-height: 420px; overflow: auto; padding: 6px 0; }
.header .search .results .grp { padding: 6px 12px 2px; font-size: 11px; text-transform: uppercase; color: var(--text-faint); letter-spacing: .04em; }
.header .search .results a { display: block; padding: 7px 12px; color: var(--text); }
.header .search .results a:hover { background: var(--hover-row); text-decoration: none; }
.content { flex: 1; min-height: 0; overflow: auto; position: relative; }
.content.no-scroll { overflow: hidden; display: flex; flex-direction: column; }
.page { padding: 18px 30px; }
.page-narrow { max-width: 1100px; margin: 0 auto; }

/* ===== Avatar ===== */
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #5b7fa6; color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex-shrink: 0; overflow: hidden; }
.avatar.sm { width: 24px; height: 24px; font-size: 11px; }
.avatar.lg { width: 44px; height: 44px; font-size: 17px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; border-radius: 50%; }
.avatar { position: relative; }

/* ===== Buttons (.button-input do Kommo) ===== */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--panel); color: var(--text); font-weight: 700; font-size: 14px; line-height: 14px; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--palette-button-classic-hover-background); text-decoration: none; }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary { background: var(--primary); border-color: var(--primary-border); color: #fff; }
.btn.primary:hover { background: var(--primary-hover); }
.btn.success { background: #24bc8c; border-color: #1fa77c; color: #fff; }
.btn.danger { background: var(--danger); border-color: #e46060; color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-muted); font-weight: 400; }
.btn.ghost:hover { background: rgba(128,128,128,.15); color: var(--text); }
.btn.link { background: none; border: 0; color: var(--link); padding: 4px 6px; height: auto; font-weight: 400; }
.btn.sm { padding: 0 10px; height: 26px; font-size: 13px; }
.btn.xs { padding: 0 8px; height: 22px; font-size: 12px; }
.btn.icon { padding: 0 7px; }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.btn-group .btn.active { background: var(--primary-soft); color: var(--link); border-color: var(--border-strong); position: relative; z-index: 1; }

/* ===== Forms ===== */
.input, select.input, textarea.input { width: 100%; padding: 6px 10px; height: 32px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); outline: none; transition: border-color .12s, box-shadow .12s; font-size: 15px; }
textarea.input { height: auto; }
/* opções dos selects nativos: fundo e cor explícitos em todos os temas (popup legível no tema escuro — a lista do navegador não herda o fundo transparente) */
select option, select optgroup { background: var(--panel); color: var(--text); }
/* select com a opção vazia "Selecione" escolhida: tom de placeholder (as opções da lista continuam na cor normal) */
select.input.ph { color: var(--placeholder); }
select option:checked { background: var(--primary-soft); color: var(--text); }
.input::placeholder { color: var(--placeholder); }
.input:focus { border-color: var(--primary); box-shadow: none; }
textarea.input { min-height: 80px; resize: vertical; }
.input.sm { padding: 3px 8px; height: 26px; font-size: 13px; }
label.lbl, .lbl { display: block; font-size: 12px; color: var(--text-muted); margin: 0 0 4px; }
.field { margin-bottom: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox input { width: 16px; height: 16px; accent-color: var(--primary); }
.switch { position: relative; width: 36px; height: 20px; background: #cfd6e0; border-radius: 20px; cursor: pointer; transition: background .15s; flex-shrink: 0; display: inline-block; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--panel); border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch.on { background: var(--primary); }
.switch.on::after { transform: translateX(16px); }
.hint { font-size: 12px; color: var(--text-faint); }
.error-text { color: var(--danger); font-size: 12px; }
.inline-edit { border: 1px solid transparent; border-radius: 4px; padding: 3px 6px; margin: -3px -6px; cursor: text; min-height: 22px; }
.inline-edit:hover { border-color: var(--border-strong); background: var(--panel); }
.inline-edit:focus { outline: none; border-color: var(--primary); background: var(--panel); }
.inline-edit.empty::before { content: attr(data-placeholder); color: var(--text-faint); }

/* ===== Cards / panels ===== */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; }
.card-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; font-weight: 600; }
.card-header .grow { flex: 1; }
.card-body { padding: 16px; }
.toolbar { display: flex; align-items: center; gap: 10px; padding: 0 30px 12px; background: var(--bg); border-bottom: 0; flex-wrap: wrap; flex-shrink: 0; }
.toolbar .grow { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 3px; font-size: 12px; background: var(--chip-bg); color: var(--text); white-space: nowrap; }
.chip.tag { background: var(--chip-bg); }
.chip.blue { background: var(--primary-soft); color: var(--primary); }
.chip.green { background: var(--success-soft); color: var(--success); }
.chip.red { background: var(--danger-soft); color: var(--danger); }
.chip.yellow { background: var(--warning-soft); color: var(--warning-text); }
.chip .x { cursor: pointer; opacity: .6; margin-left: 2px; }
.chip .x:hover { opacity: 1; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.small { font-size: 12px; }
.bold { font-weight: 600; }
.right { text-align: right; }
.center { text-align: center; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; }
.flex { display: flex; align-items: center; gap: 8px; }
.flex.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.empty { padding: 40px 20px; text-align: center; color: var(--text-muted); }
.empty svg { width: 48px; height: 48px; stroke: var(--text-faint); fill: none; stroke-width: 1.5; margin-bottom: 8px; }
.money { font-variant-numeric: tabular-nums; }

/* ===== Tables ===== */
.table { width: 100%; border-collapse: collapse; background: transparent; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 700; font-family: var(--font-caption); background: var(--bg); position: sticky; top: 0; z-index: 1; height: 44px; }
.table tbody tr:hover { background: var(--hover-row); }
.table tr.clickable { cursor: pointer; }
.table td.actions { white-space: nowrap; text-align: right; }
.table .check { width: 34px; }
.pager { display: flex; align-items: center; gap: 8px; padding: 10px 16px; justify-content: flex-end; color: var(--text-muted); font-size: 13px; }

/* ===== Tabs ===== */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 8px; }
.tabs a, .tabs button { padding: 10px 14px; color: var(--text-muted); border: 0; background: none; border-bottom: 2px solid transparent; font-weight: 500; }
.tabs a.active, .tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.tabs a:hover { text-decoration: none; color: var(--text); }

/* ===== Dropdown ===== */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 180px; background: var(--panel); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); border: 1px solid var(--border); padding: 4px 0; z-index: 60; display: none; }
.dropdown-menu.right { left: auto; right: 0; }
.dropdown.open .dropdown-menu, .dropdown-menu.open { display: block; }
.dropdown-menu a, .dropdown-menu button.item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 12px; color: var(--text); background: none; border: 0; font-size: 13.5px; white-space: nowrap; }
.dropdown-menu a:hover, .dropdown-menu button.item:hover { background: var(--primary-soft); text-decoration: none; }
.dropdown-menu .sep { height: 1px; background: var(--border); margin: 4px 0; }
.dropdown-menu .danger { color: var(--danger); }
.menu-floating { position: fixed; min-width: 180px; background: var(--panel); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); border: 1px solid var(--border); padding: 4px 0; z-index: 400; max-height: min(60vh, 400px); overflow: auto; display: flex; flex-direction: column; }
/* listas longas (pickMenu): a própria lista rola (≈ 8–9 itens visíveis), a busca fica fixa no topo */
.menu-floating_pick { overflow: hidden; }
.menu-floating__list { overflow-y: auto; max-height: min(50vh, 312px); }
.menu-floating .item.on { font-weight: 700; }
.menu-floating .item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 12px; color: var(--text); background: none; border: 0; font-size: 13.5px; white-space: nowrap; cursor: pointer; }
.menu-floating .item:hover { background: var(--primary-soft); }
.menu-floating .item.danger { color: var(--danger); }
.menu-floating .sep { height: 1px; background: var(--border); margin: 4px 0; }
.menu-floating .title { padding: 6px 12px; font-size: 11px; color: var(--text-faint); text-transform: uppercase; }

/* ===== Modal ===== */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 300; overflow: auto; animation: fade .12s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { background: var(--panel); border-radius: 6px; width: 560px; max-width: 100%; box-shadow: var(--shadow-lg); animation: pop .14s ease-out; display: flex; flex-direction: column; max-height: 88vh; }
.modal.lg { width: 860px; } .modal.xl { width: 1100px; } .modal.sm { width: 420px; }
@keyframes pop { from { transform: translateY(8px); opacity: .6; } to { transform: none; opacity: 1; } }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.modal-header h3 { font-size: 16px; flex: 1; }
.modal-body { padding: 20px; overflow: auto; }
.modal-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.modal-footer .left { margin-right: auto; }
.close-x { background: none; border: 0; font-size: 20px; line-height: 1; color: var(--text-faint); padding: 4px 6px; border-radius: 4px; }
.close-x:hover { background: var(--panel-3); color: var(--text); }

/* ===== Toasts ===== */
.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 500; }
.toast { background: var(--toast-bg); color: var(--on-primary); padding: 10px 14px; border-radius: 8px; box-shadow: var(--shadow-lg); font-size: 13.5px; max-width: 380px; animation: pop .15s ease-out; }
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }

/* ===== Login ===== */
.login-wrap { flex: 1; width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--login-bg, linear-gradient(135deg, #1b3446 0%, #0f2231 100%)); }
.login-card { background: var(--panel); border-radius: 14px; padding: 34px; width: 400px; max-width: 94vw; box-shadow: var(--shadow-lg); }
.login-card .logo { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; margin-bottom: 20px; }
.login-card .logo .hlogo { font-size: 24px; }

/* ===== Kanban (pipeline) ===== */
/* Funil/lista/leads de entrada e cartão desenham a própria barra superior e marcam o container com .howcrm-page (o .header do shell é ocultado — regra em "Chats / inbox") */
.content.howcrm-page { display: flex; flex-direction: column; overflow: hidden; background: var(--palette-background-default); }
.kanban { display: flex; gap: 12px; padding: 14px 18px; overflow-x: auto; overflow-y: hidden; flex: 1; min-height: 0; align-items: stretch; }
.kanban .col { width: 272px; flex: 0 0 272px; display: flex; flex-direction: column; min-height: 0; }
.kanban .col-head { padding: 8px 12px 6px; border-top: 4px solid var(--border-strong); border-radius: 6px 6px 0 0; background: var(--panel); }
.kanban .col-head .name { font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; }
.kanban .col-head .stats { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.kanban .col-body { flex: 1; overflow-y: auto; padding: 8px 6px; background: rgba(128,128,128,.07); border-radius: 0 0 6px 6px; min-height: 60px; }
.kanban .col-body.drag-over { background: var(--primary-soft); outline: 2px dashed var(--primary); outline-offset: -2px; }
.kanban .add-quick { padding: 6px; }
.lead-card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; box-shadow: 0 1px 1px rgba(16,24,40,.04); transition: box-shadow .12s, transform .12s; }
.lead-card:hover { box-shadow: var(--shadow-lg); }
.lead-card.dragging { opacity: .5; }
.lead-card .name { font-weight: 600; margin-bottom: 4px; word-break: break-word; }
.lead-card .price { color: var(--text-muted); font-size: 12.5px; }
.lead-card .contact { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.lead-card .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.lead-card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--text-faint); }
.task-ind { display: inline-flex; align-items: center; gap: 4px; }
.task-ind.overdue { color: var(--danger); }
.task-ind.today { color: var(--warning); }
.task-ind.none { color: var(--text-faint); }
.task-ind.future { color: var(--success); }

/* ===== Entity card ===== */
.entity-card { display: grid; grid-template-columns: 380px minmax(0, 1fr); height: 100%; min-height: 0; }
.entity-card .left { border-right: 1px solid var(--border); background: var(--panel); overflow-y: auto; }
.entity-card > .right { display: flex; flex-direction: column; min-height: 0; background: var(--bg); text-align: left; }
.entity-card .feed { flex: 1; overflow-y: auto; padding: 16px 20px; }
.entity-card .composer { border-top: 1px solid var(--border); background: var(--panel); padding: 12px 16px; }
.entity-title { padding: 16px 18px 8px; }
.entity-title h2 { font-size: 20px; }
.stage-bar { display: flex; gap: 3px; padding: 6px 18px 12px; }
.stage-bar .st { flex: 1; height: 8px; border-radius: 3px; background: var(--border); cursor: pointer; position: relative; }
.stage-bar .st.done { opacity: 1; }
.stage-bar .st:hover::after { content: attr(data-name); position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: var(--toast-bg); color: var(--on-primary); font-size: 11px; padding: 3px 7px; border-radius: 4px; white-space: nowrap; z-index: 5; }
.section { padding: 10px 18px; border-top: 1px solid var(--border); }
.section .sec-title { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; }
.section .sec-title .grow { flex: 1; }
.kv { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 6px 10px; align-items: center; font-size: 13.5px; }
.kv .k { color: var(--text-muted); font-size: 12.5px; }
.kv .v { min-width: 0; }
.linked-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.linked-item:last-child { border-bottom: 0; }
.linked-item .info { flex: 1; min-width: 0; }
.linked-item .info .n { font-weight: 500; }
.linked-item .info .s { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-item { display: flex; gap: 12px; margin-bottom: 14px; }
.feed-item .ico { width: 32px; height: 32px; border-radius: 50%; background: var(--panel-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-muted); }
.feed-item .ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.feed-item .ico.note { background: var(--warning-soft); color: var(--warning-text); }
.feed-item .ico.task { background: var(--primary-soft); color: var(--primary); }
.feed-item .ico.chat { background: var(--success-soft); color: var(--success); }
.feed-item .ico.call { background: #efe6fb; color: #6f3fc4; }
.feed-item .body { flex: 1; min-width: 0; }
.feed-item .meta { font-size: 12px; color: var(--text-faint); margin-bottom: 3px; display: flex; gap: 8px; align-items: center; }
.feed-item .bubble { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; }
.feed-item .bubble.out { background: var(--bubble-out); border-color: var(--bubble-out-border); }
.feed-item .bubble.pinned { border-color: var(--warning); }
.feed-item .event { font-size: 13px; color: var(--text-muted); }
.feed-day { text-align: center; font-size: 11.5px; color: var(--text-faint); margin: 12px 0; position: relative; }
.feed-day::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--border); z-index: 0; }
.feed-day span { background: var(--bg); padding: 0 10px; position: relative; z-index: 1; }
.composer .modes { display: flex; gap: 4px; margin-bottom: 8px; }
.composer .modes button { padding: 4px 10px; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--text-muted); font-size: 12.5px; }
.composer .modes button.active { background: var(--primary-soft); color: var(--primary); }
.composer textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: 8px; padding: 10px; min-height: 64px; resize: vertical; outline: none; }
.composer textarea:focus { border-color: var(--primary); }
.composer .actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }

/* ===== Task list ===== */
.task-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--panel); }
.task-row.done { opacity: .6; }
.task-row .chk { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); cursor: pointer; margin-top: 2px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.task-row .chk:hover { border-color: var(--success); }
.task-row.done .chk { background: var(--success); border-color: var(--success); color: var(--on-primary); }
.task-row .txt { flex: 1; min-width: 0; }
.task-row .when { font-size: 12px; white-space: nowrap; }
.task-row .when.overdue { color: var(--danger); font-weight: 600; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.calendar-grid .day { background: var(--panel); min-height: 110px; padding: 6px; font-size: 12px; }
.calendar-grid .day.other { background: var(--panel-2); color: var(--text-faint); }
.calendar-grid .day.today .num { background: var(--primary); color: var(--on-primary); border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.calendar-grid .day .ev { background: var(--primary-soft); color: var(--primary); border-radius: 4px; padding: 2px 5px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.calendar-grid .day .ev.overdue { background: var(--danger-soft); color: var(--danger); }
.calendar-grid .day .ev.done { background: var(--panel-3); color: var(--text-faint); text-decoration: line-through; }
.calendar-head { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); font-size: 11.5px; text-transform: uppercase; color: var(--text-muted); padding: 6px 0; }

/* ===== Chats / inbox ===== */
/* Páginas "de tela cheia" do Kommo (Chats, Configurações): a coluna esquerda ocupa o topo, então a barra superior
   genérica (.header) é ocultada enquanto a view marca o container com .howcrm-page (removida em destroy/route). */
.main:has(> .content.howcrm-page) > .header { display: none; }
.inbox { display: flex; height: 100%; background: var(--bg); }
.inbox .list { width: 420px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
.inbox .conv { position: relative; display: block; min-height: 65px; padding: 10px 15px 13px 70px; border-bottom: 1px solid var(--border); cursor: pointer; background: var(--panel); }
.inbox .conv.active { background: var(--palette-active-element-900, #4c8bf7); color: #fff; }
.inbox .conv .t { font-weight: 700; display: flex; }
.inbox .conv .p { color: var(--text-faint); font-size: 15px; line-height: 19px; overflow: hidden; }
.inbox .thread { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.inbox .thread .msgs { flex: 1; overflow-y: auto; padding: 16px 30px; display: flex; flex-direction: column; gap: 14px; }
.inbox .side { width: 340px; flex-shrink: 0; border-left: 1px solid var(--border); background: var(--panel); overflow-y: auto; }
.msg { max-width: 72%; display: flex; gap: 10px; align-items: flex-end; align-self: flex-start; }
.msg.out { align-self: flex-end; flex-direction: row-reverse; }
.msg .time { font-size: 11px; color: var(--text-faint); margin-top: 4px; text-align: right; }

/* ===== Settings ===== */
/* aside 265px "CONFIGURAÇÕES" (itens de 56px separados por borda, ativo em azul) + conteúdo com cartões; detalhes em settings.js */
.settings { display: flex; height: 100%; background: var(--bg); }
.settings .nav { width: 265px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--panel); overflow-y: auto; }
.settings .nav a { display: flex; align-items: center; height: 56px; padding: 0 20px 0 30px; color: var(--text); border-bottom: 1px solid var(--border); }
.settings .nav a.active { color: var(--base_active_color, #1579d2); font-weight: 700; }
.settings .nav a:hover { text-decoration: none; background: var(--hover-row); }
.settings .nav .grp { padding: 12px 18px 4px; font-size: 11px; text-transform: uppercase; color: var(--text-faint); letter-spacing: .05em; }
.settings .body { flex: 1; min-width: 0; overflow-y: auto; padding: 0 25px 30px; }
.stage-editor .stage { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; background: var(--panel); }
.stage-editor .stage .swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,.1); cursor: pointer; }
.color-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.color-palette .c { width: 24px; height: 24px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; }
.color-palette .c.sel { border-color: var(--text); }
.stat-tile { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.stat-tile .lbl { font-size: 12px; color: var(--text-muted); }
.stat-tile .val { font-size: 24px; font-weight: 700; margin-top: 4px; }
.stat-tile .sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 10px; }
.bar-chart .b { flex: 1; background: var(--primary); border-radius: 3px 3px 0 0; position: relative; min-height: 2px; }
.bar-chart .b.won { background: var(--success); }
.bar-chart .b span { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--text-faint); }
.funnel .row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.funnel .row .lbl { width: 180px; font-size: 13px; }
.funnel .row .bar { height: 22px; border-radius: 4px; min-width: 4px; }
.funnel .row .n { font-size: 12.5px; color: var(--text-muted); }
code, .code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: var(--panel-3); padding: 2px 6px; border-radius: 4px; }
pre.code { padding: 10px 12px; overflow: auto; white-space: pre-wrap; word-break: break-all; }
.kbd { border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 11px; }
@media (max-width: 900px) {
  .entity-card { grid-template-columns: 1fr; }
  .entity-card .left { max-height: 45vh; }
  .inbox { grid-template-columns: 1fr; }
  .settings { grid-template-columns: 1fr; }
  .header .search { display: none; }
}

/* ===== Kommo lists (barra superior .list__body-right__top, tabela .list__table, aside "Listas", ações em massa, widgets do painel) ===== */
/* Views que desenham a própria barra superior de 65px (contatos, calendário, listas, painel, estatísticas) escondem a .header do shell */
.main:has(> #view.ktop-page) > .header { display: none; }
.ktop { height: 65px; flex-shrink: 0; display: flex; align-items: stretch; background: var(--panel); border-bottom: 1px solid var(--border); position: relative; z-index: 30; user-select: none; }
.ktop__caption { display: flex; align-items: center; padding: 0 10px 0 30px; border-right: 1px solid var(--border); flex-shrink: 0; }
.ktop__title { display: inline-flex; align-items: center; gap: 6px; height: 64px; font-size: 15px; font-weight: 700; text-transform: uppercase; color: var(--text); background: none; border: 0; padding: 0; margin-right: 18px; white-space: nowrap; cursor: default; font-family: var(--font); }
.ktop__title.clickable { cursor: pointer; }
.ktop__title .caret { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.4; opacity: .8; }
.ktop__icons { display: flex; align-items: center; margin-left: -9px; margin-right: 6px; }
.ktop__icon-btn { width: 34px; height: 39px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; color: #ccc; border-radius: 4px; }
.ktop__icon-btn svg { width: 14px; height: 16px; fill: currentColor; stroke: none; }
.ktop__icon-btn.active { color: var(--primary); }
.ktop__icon-btn:hover:not(.active) { color: var(--text); }
.ktop__modes { display: flex; align-items: center; margin-left: 10px; padding-left: 20px; border-left: 1px solid var(--border); height: 64px; }
.ktop__mode { background: none; border: 0; padding: 0; margin-right: 8px; height: 64px; font-family: var(--font-caption); font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); cursor: pointer; }
.ktop__mode:last-child { margin-right: 10px; }
.ktop__mode.active, .ktop__mode:hover { color: var(--text); }
.ktop__search { flex: 1; min-width: 140px; display: flex; align-items: center; padding: 0 20px; border-right: 1px solid var(--border); position: relative; }
.ktop__search .lupa { width: 15px; height: 15px; stroke: var(--placeholder); fill: none; stroke-width: 2; margin-right: 8px; flex-shrink: 0; }
.ktop__preset { display: inline-flex; align-items: center; padding: 5px; margin-right: 5px; font-size: 15px; line-height: 19px; color: var(--palette-text-secondary-dark); background: #cfe3a7; border: 1px solid #a2c45f; border-radius: 2px; white-space: nowrap; flex-shrink: 0; }
[data-color-scheme="dark"] .ktop__preset { color: #4a5a2f; }
.ktop__chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px; margin-right: 5px; font-size: 15px; line-height: 19px; color: var(--text-muted); background: var(--palette-search-breadcrumbs-background); border: 1px solid var(--palette-search-breadcrumbs-border); border-radius: 2px; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.ktop__chip .x { cursor: pointer; color: #2798d5; font-size: 16px; line-height: 12px; margin-left: 2px; }
.ktop__input { flex: 1; min-width: 60px; background: none; border: 0; outline: none; font-size: 15px; height: 21px; color: var(--text); padding: 0; }
.ktop__input::placeholder { color: var(--placeholder); }
.ktop__summary { color: var(--text-faint); font-size: 15px; white-space: nowrap; margin-left: 20px; }
.ktop__summary b { color: var(--text); font-weight: 400; }
.ktop__actions { display: flex; align-items: center; padding: 0 30px 0 10px; gap: 12px; flex-shrink: 0; }
.ktop__more { width: 29px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; color: var(--text); border-radius: 4px; }
.ktop__more svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.ktop__more:hover { background: var(--palette-button-classic-hover-background); }
.ktop__btn { height: 38px; padding: 0 20px; border-radius: 4px; font-size: 14px; font-weight: 700; text-transform: uppercase; line-height: 36px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border: 1px solid var(--border); background: var(--panel); color: var(--text); }
.ktop__btn:hover { background: var(--palette-button-classic-hover-background); }
.ktop__btn.blue { background: #4c8bf7; border-color: #4077d6; color: #f5f5f5; }
.ktop__btn.blue:hover { background: #4d85e6; }
.ktop__btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; }
/* painel de filtros (abre sob a área de busca) */
.kfilters { position: absolute; top: 65px; left: 0; right: 0; background: var(--panel); border: 1px solid var(--border); border-top: 0; box-shadow: 0 8px 20px rgba(0,0,0,.18); padding: 14px 20px; display: none; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; z-index: 40; }
.kfilters.open { display: flex; }
.kfilters .f { display: flex; flex-direction: column; gap: 4px; }
.kfilters .f .lbl { font-size: 12px; color: var(--text-muted); margin: 0; }
.kfilters .input { min-width: 150px; }
.kfilters .kf-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* aside "Listas" (submenu Contatos | Empresas | listas) */
.kaside-overlay { position: fixed; inset: 0; z-index: 200; }
.kaside { position: fixed; top: 0; bottom: 0; left: var(--sidebar-width); width: 265px; background: var(--panel); box-shadow: 14px 0 24px 1px rgba(0,0,0,.1); z-index: 201; display: flex; flex-direction: column; animation: kaside-in .12s ease-out; }
@keyframes kaside-in { from { transform: translateX(-12px); opacity: .4; } to { transform: none; opacity: 1; } }
.kaside__head { height: 65px; flex-shrink: 0; display: flex; align-items: center; padding: 0 30px; font-size: 15px; font-weight: 700; text-transform: uppercase; color: var(--text); border-bottom: 1px solid var(--border); }
.kaside__list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.kaside__item { display: flex; align-items: center; height: 56px; padding: 0 20px 0 30px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 15px; text-decoration: none; }
.kaside__item:hover { background: var(--hover-row); text-decoration: none; color: var(--text); }
.kaside__item.selected { color: #1579d2; font-weight: 700; }
.kaside__item .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kaside__item .ed { width: 14px; height: 14px; stroke: var(--text-faint); fill: none; stroke-width: 2; opacity: 0; }
.kaside__item:hover .ed { opacity: 1; }
.kaside__foot { padding: 14px 30px; border-top: 1px solid var(--border); }
.kaside__foot a, .kaside__foot button { color: var(--link); background: none; border: 0; padding: 0; font-size: 15px; cursor: pointer; }
/* tabela de listas (.list__table do Kommo) */
.klist-wrap { flex: 1; min-height: 0; overflow: auto; padding: 15px 15px 0; background: var(--bg); position: relative; }
.klist { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: auto; background: var(--panel); min-width: 900px; }
.klist th { position: sticky; top: 0; z-index: 3; background: var(--panel); height: 42px; padding: 0; text-align: left; vertical-align: middle; font-weight: 700; border-bottom: 0; }
.klist th .hd { display: flex; align-items: center; height: 42px; padding: 12px 10px; border-right: 1px solid var(--border); font-family: var(--font-caption); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 19px; }
.klist th:last-child .hd { border-right: 0; }
.klist th.sortable { cursor: pointer; user-select: none; }
.klist th.sortable:hover .hd { color: var(--text); }
.klist th .hd .arrow { margin-left: auto; font-size: 9px; padding-left: 6px; color: var(--text-faint); }
.klist th.kchk, .klist td.kchk { width: 37px; min-width: 37px; padding: 0 0 0 15px; vertical-align: middle; }
.klist th.kchk .hd { border-right: 0; padding: 0; }
.klist td.kchk { overflow: visible; }
.klist td { height: 39px; padding: 0 10px; border-top: 1px solid var(--border); font-size: 15px; line-height: 19px; color: var(--text); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.klist td:last-child { padding-right: 15px; }
.klist tbody tr { position: relative; background: var(--panel); }
.klist tbody tr:hover td { background: var(--hover-row); }
.klist tbody tr.selected td { background: var(--palette-table-hover-selected-background); }
.klist tbody tr.clickable { cursor: pointer; }
.klist td a, .klist td .lnk { color: var(--text); text-decoration: underline; }
.klist td a:hover, .klist td .lnk:hover { color: var(--link); }
.klist td a.name-link { color: var(--link); text-decoration: none; }
.klist td a.name-link:hover { text-decoration: underline; }
.klist td .muted-cell { color: var(--text-faint); }
.klist tr.overdue td.od, .klist tr.overdue td.od a { color: var(--danger); }
.klist tr.done td { color: var(--text-faint); }
.klist tr.done td.od { text-decoration: line-through; }
.klist .name-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.klist .name-cell .name-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klist .name-cell .tags { margin-left: auto; display: inline-flex; gap: 4px; flex-shrink: 0; padding-left: 8px; }
.ktag { display: inline-block; font-size: 12px; line-height: 18px; height: 18px; padding: 0 5px; border-radius: 4px; color: var(--text-faint); background: var(--panel); position: relative; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.ktag::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--border); border-radius: 4px; pointer-events: none; }
.klist tbody tr:hover .ktag, .klist tbody tr.selected .ktag { background: transparent; }
.kchk-box { width: 18px; height: 18px; border: 1px solid var(--border); border-radius: 4px; background: var(--panel); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; vertical-align: middle; position: relative; color: transparent; flex-shrink: 0; }
.kchk-box svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 3; }
.kchk-box:hover { border-color: var(--border-strong); }
.kchk-box.on { color: var(--text); border-color: var(--border-strong); }
.klist tbody tr.selected td.kchk { position: relative; z-index: 6; }
.klist tbody tr.selected td.kchk::before { content: ""; position: absolute; left: -15px; top: -1px; bottom: 0; width: 3px; background: #158fd2; }
/* barra de seleção múltipla no topo da página (padrão de funil, lista de leads, contatos, empresas, tarefas) */
.kbulk { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 15px 0 30px; background: var(--palette-table-multiaction-background); border-bottom: 1px solid var(--palette-border-primary); font-size: 13px; flex-shrink: 0; flex-wrap: wrap; }
.kbulk__n { font-weight: 700; margin-right: 6px; white-space: nowrap; }
.kbulk__btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; background: var(--palette-background-primary); border: 1px solid var(--palette-border-primary); border-radius: 4px; color: var(--palette-text-primary); font-family: var(--font); font-size: 13px; line-height: 14px; cursor: pointer; white-space: nowrap; }
.kbulk__btn:hover { background: var(--palette-button-classic-hover-background); }
.kbulk__btn:disabled { opacity: .5; cursor: default; }
.kbulk__btn.danger { color: var(--danger); }
.kbulk__btn.blue { background: var(--primary); border-color: var(--primary); color: #fff; }
.kbulk__btn .kbulk__arrow { flex-shrink: 0; }
.kbulk__btn.has-val { border-color: var(--primary); background: var(--primary-soft); }
.kbulk__btn .kbulk__val { font-weight: 700; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbulk__btn .kbulk__x { font-style: normal; margin-left: 2px; padding: 0 2px; color: var(--text-faint); font-size: 15px; line-height: 1; }
.kbulk__btn .kbulk__x:hover { color: var(--danger); }
.kbulk__note { color: var(--text-muted); font-size: 12px; margin-right: 6px; white-space: nowrap; }
.kbulk__grow { flex: 1; }
/* seletor flutuante Funil → Etapa e par de selects */
.kstage-menu { min-width: 240px; max-width: 360px; padding: 0; }
.kstage__head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase; color: var(--text-faint); }
.kstage__lbl { font-weight: 700; }
.kstage__title { font-weight: 700; letter-spacing: .3px; }
.kstage__pipe { flex: 1; min-width: 0; height: 26px; padding: 0 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--panel); color: var(--text); font-size: 12px; text-transform: none; }
.kstage__list { padding: 4px 0; max-height: min(50vh, 320px); overflow: auto; }
.kstage__item { display: flex; align-items: center; width: 100%; padding: 6px 12px; background: none; border: 0; cursor: pointer; text-align: left; }
.kstage__item:hover { background: var(--primary-soft); }
.kstage__check { margin-left: auto; color: var(--text-faint); font-size: 12px; }
.kstage-chip { display: inline-block; max-width: 100%; padding: 2px 8px; border-radius: 3px; font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kstage-selects { display: flex; align-items: center; gap: 6px; width: 100%; }
.kstage-selects select { flex: 1; min-width: 0; }
.kstage-selects__arrow { color: var(--text-faint); flex-shrink: 0; }
/* linha "adicionar" (como .list-row_adding) */
.klist tr.adding td { color: var(--text-faint); cursor: pointer; }
.klist tr.adding .kchk-box { border-style: dotted; color: var(--text-faint); }
.klist tr.adding:hover td { color: var(--text); }
/* paginação */
.kpager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 30px; color: var(--text-faint); font-size: 13px; flex-shrink: 0; background: var(--bg); }
.kpager button { background: none; border: 1px solid var(--border); border-radius: 4px; height: 26px; padding: 0 8px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.kpager button:hover:not(:disabled) { color: var(--text); background: var(--panel); }
.kpager button:disabled { opacity: .4; cursor: default; }
.kpager button svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
/* rodapé de paginação estilo Kommo (list__footer / #list_pagination) — kPagination() de _shared.js */
.kpg { display: flex; align-items: center; gap: 24px; height: 50px; padding: 0 30px 0 15px; flex-shrink: 0; background: var(--bg); border-top: 1px solid var(--border); color: var(--text-faint); font-size: 13px; }
.kpg__left { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.kpg__rows { height: 26px; padding: 0 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--panel); color: var(--text); font-size: 13px; }
.kpg__nav { display: flex; align-items: center; gap: 2px; }
.kpg__btn { min-width: 28px; height: 28px; padding: 0 7px; border: 0; border-radius: 4px; background: none; color: var(--text-muted); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.kpg__btn:hover:not(:disabled):not(.active) { background: var(--palette-button-classic-hover-background); color: var(--text); }
.kpg__btn.active { background: var(--palette-button-classic-hover-background); color: var(--text); font-weight: 700; cursor: default; }
.kpg__btn:disabled { opacity: .35; cursor: default; }
.kpg__arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.kpg__dots { min-width: 20px; text-align: center; color: var(--text-faint); }
.kpg__right { margin-left: auto; display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.kpg__total { color: var(--text); }
.kpg__hint { color: var(--placeholder); font-size: 12px; }
@media (max-width: 900px) { .kpg__hint, .kpg__descr { display: none; } }
/* widget do painel (.dashboard-tile__item do Kommo) */
.kwidget { background: var(--panel); border-radius: 10px; padding: 14px 15px 13px; box-shadow: 0 4px 4px rgba(0,0,0,.12); display: flex; flex-direction: column; min-height: 200px; position: relative; overflow: hidden; }
[data-color-scheme="dark"] .kwidget { box-shadow: 0 4px 4px rgba(0,0,0,.35); }
.kwidget__head { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; min-height: 14px; }
.kwidget__title { font-family: var(--font-caption); font-size: 12px; font-weight: 700; letter-spacing: .36px; text-transform: uppercase; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kwidget__head svg { width: 12px; height: 12px; stroke: #e4b248; fill: none; stroke-width: 2.4; }
.kwidget__head .sp { flex: 1; }
.kwidget__head a { font-size: 12px; color: var(--link); white-space: nowrap; }
.kwidget__big { text-align: right; margin-top: 4px; }
.kwidget__big .n { font-size: 29px; font-weight: 700; color: #24bc8c; line-height: 34px; font-variant-numeric: tabular-nums; }
.kwidget__big .n.red { color: var(--danger); } .kwidget__big .n.yellow { color: #ffd66d; } .kwidget__big .n.blue { color: var(--primary); }
.kwidget__big .cap { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.kwidget__sep { border-top: 1px solid var(--border-strong); width: 100px; margin: 24px 0 8px; }
.kwidget__rows { display: flex; flex-direction: column; overflow: auto; flex: 1; min-height: 0; }
.kwrow { display: flex; flex-wrap: wrap; align-items: baseline; margin-bottom: 12px; padding-bottom: 8px; position: relative; }
.kwrow .t { font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.kwrow .t a { color: var(--text); }
.kwrow .c { font-size: 15px; color: var(--text-faint); margin-left: 6px; }
.kwrow .v { margin-left: auto; font-size: 15px; color: #24bc8c; font-variant-numeric: tabular-nums; }
.kwrow .v.muted { color: var(--text-muted); }
.kwrow .bar { position: absolute; left: 0; bottom: 0; height: 4px; border-radius: 10px; background: #ffd66d; min-width: 3px; }
.kwrow .bar.blue { background: var(--primary); } .kwrow .bar.green { background: #24bc8c; }
.kwidget__empty { color: var(--text-faint); font-size: 13px; padding: 20px 0; text-align: center; }

/* campos obrigatórios em formulários de criação: borda vermelha ao tentar salvar vazio (some ao preencher) */
.kreq__f.invalid .lbl { color: var(--danger, #e0474c); }
.kreq__f.invalid .input, .kreq__f.invalid input, .kreq__f.invalid select, .kreq__f.invalid textarea { border-color: var(--danger, #e0474c) !important; box-shadow: 0 0 0 2px rgba(224, 71, 76, .22); }

/* ===== editor do botão de chat do site (Configurações → Fontes → Aparência) ===== */
.wb-editor { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.wb-form { min-width: 0; }
.wb-form .field { margin-bottom: 16px; }

/* título de seção com filete, para separar os blocos sem pesar */
.wb-cap {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint); margin: 26px 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.wb-form > .wb-cap:first-child { margin-top: 0; }
.wb-cap + .hint { margin-top: -4px; margin-bottom: 12px; }

/* seletor de cor: quadrado, mais alto e mais curto */
.wb-colorwrap { display: flex; align-items: center; gap: 10px; }
.wb-color {
  flex: 0 0 auto; width: 52px; height: 40px; padding: 3px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
}
.wb-color::-webkit-color-swatch-wrapper { padding: 0; }
.wb-color::-webkit-color-swatch { border: 0; border-radius: 5px; }
.wb-color::-moz-color-swatch { border: 0; border-radius: 5px; }
.wb-colortxt { flex: 0 0 auto; width: 110px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* bloco de campo embutido: [x] Nome … [x] obrigatório  /  [ rótulo ] */
.wb-fld { margin-bottom: 18px; }
.wb-fld:last-of-type { margin-bottom: 6px; }
.wb-fld__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.wb-fld__top .checkbox { margin: 0; white-space: nowrap; }
.wb-fld__top > .checkbox:first-child { font-weight: 600; }
.wb-fld__top > .checkbox:last-child { font-size: 12px; color: var(--text-faint); }
.wb-fld.off .wb-fld__top > .checkbox:first-child { opacity: .55; }
.wb-fld.off .wb-fld__top > .checkbox:last-child { opacity: .4; }
.wb-fld input[disabled] { opacity: .5; }

/* campos personalizados: mesma estrutura de duas linhas, em cartão */
.wb-cflist { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.wb-cf { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px 14px; background: var(--panel-2, transparent); }
.wb-cf.gone { border-style: dashed; opacity: .6; }
.wb-cf__top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.wb-cf__top .checkbox { margin: 0 0 0 auto; white-space: nowrap; font-size: 12px; color: var(--text-faint); }
.wb-cfname { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-cftag {
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-faint); border: 1px solid var(--border); border-radius: 20px; padding: 2px 8px;
}
.wb-cf__acts { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.wb-cf__acts .btn.icon { width: 28px; height: 28px; padding: 0; }
.wb-cf__acts .btn.icon svg { width: 16px; height: 16px; }
.wb-cf__acts .wb-up svg { transform: rotate(180deg); }
.wb-cf__acts .btn.danger:hover { color: var(--danger, #e0474c); }
.wb-cf__acts .btn.disabled { opacity: .3; pointer-events: none; }

/* prévia */
.wb-previewwrap { position: sticky; top: 0; }
.wb-previewwrap .wb-cap { margin-top: 0; }
.wb-preview { width: 100%; height: 540px; border: 1px solid var(--border); border-radius: 10px; background: #eef2f7; display: block; }
.wb-previewwrap .hint { margin-top: 8px; }
.wb-preview.form { height: 720px; background: #fff; }

@media (max-width: 1080px) {
  .wb-editor { grid-template-columns: 1fr; gap: 20px; }
  .wb-previewwrap { position: static; }
  .wb-preview { height: 460px; }
  .wb-preview.form { height: 600px; }
}

/* ---- editor do formulário do site: estilo, modelos, CSS/HTML livres ---- */
.field-row.three { grid-template-columns: 1fr 1fr 1fr; }
.wb-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.wb-style .field-row { margin-bottom: 4px; }
.wb-fontwrap { display: flex; flex-direction: column; gap: 6px; }
.wb-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.wb-step { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px 14px; background: var(--panel-2, transparent); display: flex; flex-direction: column; gap: 8px; }
.wb-step__top { display: flex; align-items: center; justify-content: space-between; }
.wb-step__fields { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.wb-step__fields .checkbox { margin: 0; }
.wb-checks { display: flex; flex-direction: column; gap: 6px; padding-top: 22px; }
.wb-checks .checkbox { margin: 0; }
.wb-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; white-space: pre; }
.wb-classref { margin: -6px 0 16px; font-size: 12px; }
.wb-classref summary { cursor: pointer; color: var(--text-faint); }
.wb-classes { width: 100%; border-collapse: collapse; margin-top: 8px; }
.wb-classes td { padding: 4px 8px 4px 0; vertical-align: top; border-top: 1px solid var(--border); }
.wb-classes code { font-size: 11px; white-space: nowrap; }
@media (max-width: 1080px) { .field-row.three { grid-template-columns: 1fr 1fr; } }

/* ---- widget "Formulários e botão do site": card em Instalados e banner em Fontes ---- */
.sw-plan { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.sw-usage { margin: 6px 0; font-size: 12px; }
.sw-usage__top { display: flex; justify-content: space-between; margin-bottom: 3px; }
.sw-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.sw-bar__fill { height: 100%; background: var(--primary, #2f80ed); border-radius: 3px; transition: width .3s; }
.sw-bar.warn .sw-bar__fill { background: #e8a33d; }
.sw-bar.full .sw-bar__fill { background: #c0392b; }
.sw-featlist { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 10px; font-size: 12px; color: var(--text-faint); }
.sw-feat.on { color: var(--text); }
.sw-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.sw-feats .checkbox { margin: 0; }
.sw-banner { margin-bottom: 16px; padding: 12px 16px; }
.sw-banner.off { border-color: #e8a33d; }
.sw-preview { margin: -6px 0 12px; }

/* ---- faturamento composto ---- */
.bill-bar { margin-bottom: 16px; padding: 12px 16px; }
.bill-total { font-size: 20px; font-weight: 700; }
.w-price { margin: 6px 0 8px; font-size: 13px; }
.bill-impact { margin: 6px 0 14px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 8px; }
.bill-table td.r, .bill-table th.r, .table td.r, .table th.r { text-align: right; }
.bill-table tfoot td { border-top: 2px solid var(--border); padding-top: 10px; }
.bill-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
@media (max-width: 1080px) { .bill-prices { grid-template-columns: 1fr 1fr; } }
/* ---- licenças, faturas, pagamento (billingSetup.js) ---- */
.bill-banner { display: flex; align-items: center; gap: 12px; padding: 8px 30px; font-size: 13px; flex-shrink: 0; background: var(--warning-soft); color: var(--text); border-bottom: 1px solid var(--border); }
.bill-banner.red { background: var(--danger-soft); }
.bill-banner.blue { background: color-mix(in srgb, var(--primary) 14%, var(--bg)); }
.bill-banner > span { flex: 1; min-width: 0; }
.bill-banner__link { font-size: 12px; white-space: nowrap; }
.bill-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.bill-kpi { font-size: 28px; font-weight: 700; line-height: 1.1; }
.bill-kpi small { font-size: 14px; font-weight: 400; color: var(--text-muted); }
.seat-stepper { margin: 10px 0; }
.seat-stepper__ctl { display: inline-flex; align-items: center; gap: 6px; }
.seat-stepper__ctl .btn.icon { width: 34px; height: 34px; font-size: 18px; justify-content: center; padding: 0; }
.seat-stepper__n { width: 84px; text-align: center; font-size: 18px; font-weight: 700; }
.seat-stepper__line { margin-top: 6px; font-size: 13px; color: var(--text-muted); }
.bill-wiz__steps { display: flex; gap: 18px; margin-bottom: 16px; font-size: 13px; color: var(--text-faint); }
.bill-wiz__steps span { display: inline-flex; align-items: center; gap: 6px; }
.bill-wiz__steps span i { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; font-style: normal; font-size: 12px; background: var(--border); color: var(--text); }
.bill-wiz__steps span.on { color: var(--text); font-weight: 600; }
.bill-wiz__steps span.on i, .bill-wiz__steps span.done i { background: var(--primary); color: #fff; }
.bill-wiz__total { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 8px; }
.bill-wiz__opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; cursor: pointer; }
.bill-wiz__opt:has(input:checked) { border-color: var(--primary); }
.bill-wiz__opt input { margin-top: 3px; }
.bill-wiz__card { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.bill-pay__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bill-pay__head .r { text-align: right; }
.bill-pay__lines { list-style: none; padding: 0; margin: 0 0 12px; border-top: 1px solid var(--border); }
.bill-pay__lines li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.bill-pay__ok { padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, #2ecc71 18%, var(--bg)); font-weight: 600; }
.bill-pay svg { width: 18px; height: 18px; vertical-align: middle; }
.bill-pay__err { padding: 8px 12px; border-radius: 8px; background: var(--danger-soft); color: var(--danger); font-size: 13px; margin-bottom: 10px; }
.bill-pix { display: flex; gap: 16px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.bill-pix__qr { width: 180px; height: 180px; border-radius: 6px; background: #fff; padding: 6px; flex-shrink: 0; }
.bill-pix__code { font-family: var(--font-mono, monospace); font-size: 11px; margin-top: 8px; word-break: break-all; }
.bill-seats__info { margin-top: 8px; font-size: 13px; }
.bill-inv-row td { vertical-align: middle; }
@media (max-width: 720px) { .bill-pix { flex-direction: column; } .bill-banner { padding: 8px 14px; flex-wrap: wrap; } }

/* ===== Temas HOW (ligados por <html data-brand="how">; sem o atributo vale o tema clássico acima, intacto) =====
   brand.js#THEMES: how = claro/escuro pelo sistema; how-light / how-dark travam data-color-scheme (index.html + ui.js#applyTheme).
   Os tokens --palette-* que as views usam direto (kommo-tokens.css) são remapeados para os tokens HOW, senão o azul do Kommo
   continuaria aparecendo em links, fundos e seleções. */
[data-brand="how"] {
  --bg: #F2F0F0; --panel: #fff; --panel-2: #f7f3f1; --panel-3: #ebe6e3;
  --text: #0D0D0D; --text-muted: #5f5955; --text-faint: #9a918c;
  --border: #e3dcd7; --border-strong: #c4bfbe;
  --primary: #F26A1B; --primary-border: #d95a12; --primary-hover: #F2421B; --primary-soft: #fdeadf;
  --sidebar-active: #F26A1B; --sidebar-bg: #0D0D0D; --sidebar-top-bg: #000; --sidebar-text: #bfb5af;
  --link: #b8450f; --link-hover: #F2421B;
  --hover-row: #fbf3ee; --bubble-out: #fdeadf; --bubble-out-border: #f6cfb4; --chip-bg: #ece6e2;
  --login-bg: linear-gradient(135deg, #591902, #0D0D0D);
  /* tokens do Kommo usados direto pelas views → paleta HOW */
  --palette-background-default: var(--bg);
  --palette-background-primary: var(--panel);
  --palette-background-secondary-300: var(--panel-2);
  --palette-background-secondary-500: var(--panel-3);
  --palette-background-secondary-800: var(--panel-3);
  --palette-border-primary: var(--border);
  --palette-border-default: var(--border-strong);
  --palette-text-primary: var(--text);
  --palette-text-secondary-dark: var(--text-muted);
  --palette-text-secondary-light: var(--text-faint);
  --palette-link-primary: var(--link);
  --palette-link-hover: var(--link-hover);
  --palette-table-hover-background: var(--hover-row);
  --palette-hover-default: var(--hover-row);
  --palette-hover-primary: var(--hover-row);
  --palette-button-classic-hover-background: var(--panel-2);
  --palette-left-menu-background-primary: var(--sidebar-bg);
  --palette-left-menu-background-secondary: var(--sidebar-top-bg);
  --palette-left-menu-text-primary: var(--sidebar-text);
  --palette-active-element-900: var(--primary);
  --palette-active-element-800: var(--primary-border);
  --palette-active-element-700: var(--primary-hover);
  --palette-action-droppable: var(--primary);
  --palette-external-message-background: var(--primary);
  --base_button_active: var(--primary);
  --base_button_active_border: var(--primary-border);
  --base_active_color: var(--primary);
}
[data-brand="how"][data-color-scheme="dark"] {
  --bg: #0D0D0D; --panel: #171412; --panel-2: #1d1916; --panel-3: #241f1b;
  --text: #F2F0F0; --text-muted: #bfb5af; --text-faint: #7D7D7D;
  --border: #2b2522; --border-strong: #3d3430;
  --primary: #F26A1B; --primary-border: #d95a12; --primary-hover: #F2421B; --primary-soft: #3a1d0d;
  --sidebar-bg: #0D0D0D; --sidebar-top-bg: #000; --sidebar-active: #F26A1B;
  --link: #F08C2C; --link-hover: #F26A1B;
  --hover-row: #1d1916; --bubble-out: #3a1d0d; --bubble-out-border: #5a2d12; --chip-bg: #2b2522; --toast-bg: #2b2522;
  --login-bg: linear-gradient(135deg, #2a0c02, #0D0D0D);
}
[data-brand="how"] ::-webkit-scrollbar-thumb { background: var(--border-strong); background-clip: padding-box; }

/* Configurações → Aparência: cor do tema da marca (mesmo seletor do painel master) */
.brand-themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:8px}
.brand-theme{border:1px solid var(--border);border-radius:8px;padding:10px 12px;cursor:pointer;display:grid;gap:6px;background:var(--panel);text-align:left;font:inherit;color:var(--text)}
.brand-theme:hover{border-color:var(--text-faint)}.brand-theme.on{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}
.brand-theme:disabled{cursor:default;opacity:.75}
.brand-theme .sw{display:flex;gap:4px}.brand-theme .sw span{width:18px;height:18px;border-radius:5px;border:1px solid rgba(0,0,0,.12)}
.brand-theme b{font-size:13.5px}.brand-theme small{color:var(--text-muted);line-height:1.35;font-size:12px}

/* ---- HOW: cores-base do kommo-tokens.css que ainda apontavam para azul-marinho/azul (as views usam --palette-* e --color-*
   derivados delas: colunas do funil, cards do inbox, esqueletos de carregamento, botões "Novo …", fundo do e-mail/estatísticas).
   Sobrescrever a base muda tudo de uma vez sem tocar nas telas. Tema clássico não é afetado. ---- */
[data-brand="how"] {
  --color-blueberry: #F26A1B; --color-dodger-blue: #F26A1B; --color-blue-sky: #F26A1B; --color-blue-userflow: #F26A1B;
  --color-cobalt-blue: #b8450f; --color-navy-blue: #8a3308; --color-mariner: #F2421B; --color-nations-blue: #F08C2C;
  --color-honolulu-blue: #F08C2C; --color-cerulean: #F08C2C; --color-steel-blue: #c98a12;
  --color-steel-mist: #8b817b; --color-shadow-blue: #9a918c;
  --color-alice-blue: #fdeadf; --color-brilliant-white: #fdeadf; --color-solitude: #fdeadf; --color-ghost-white: #fbf3ee;
  --color-link-water: #f6cfb4; --color-baby-blue-eyes: #f3b98f; --color-anakiwa: #f3b98f;
  --color-dark-gunmetal: #0D0D0D; --color-rich-black: #000; --color-yankees-blue: #171412; --color-big-stone: #1a1614;
  --color-dark-slate-gray: #2b2522; --color-cello: #3a2c22; --color-astronaut: #3d3430; --color-metallic-blue: #3a1d0d;
  --color-deep-koamaru: #2b2522; --color-east-bay: #4a3a32;
}
[data-brand="how"][data-color-scheme="dark"] {
  --color-cobalt-blue: #F08C2C; --color-navy-blue: #F26A1B; --color-steel-mist: #bfb5af; --color-shadow-blue: #9a918c;
  --color-alice-blue: #3a1d0d; --color-brilliant-white: #3a1d0d; --color-solitude: #3a1d0d; --color-ghost-white: #1d1916;
  --color-link-water: #5a2d12; --color-baby-blue-eyes: #7a3a14; --color-anakiwa: #7a3a14;
}
[data-brand="how"] .inbox { --ib-unread: var(--primary-soft); --ib-counter: var(--primary); }
[data-brand="how"] .ktop__btn.blue { background: var(--primary); border-color: var(--primary-border); color: #fff; }
[data-brand="how"] .ktop__btn.blue:hover { background: var(--primary-hover); }
[data-brand="how"][data-color-scheme="dark"] .inbox { --ib-unread: var(--primary-soft); --ib-counter: var(--primary); }

/* ---- HOW: tokens --palette-* definidos com hex literal no kommo-tokens.css (não passam pelas cores-base) — claro e escuro.
   O bloco escuro repete os remapeamentos porque `:root[data-color-scheme=dark]` do arquivo de tokens tem especificidade maior
   que `[data-brand="how"]` sozinho. ---- */
[data-brand="how"] {
  --palette-pipeline-item-message-background: var(--primary-soft);
  --palette-table-hover-selected-background: var(--primary-soft);
  --palette-search-breadcrumbs-background: var(--primary-soft);
  --palette-search-breadcrumbs-border: #f3b98f;
  --palette-customers-switch-button-background: var(--panel-2);
  --palette-background-qualification: var(--primary);
  --palette-external-message-reply-background: var(--primary-hover);
  --palette-trigger-plug-item-background: var(--primary-soft);
  --palette-salesbot-list-trigger-background: var(--primary-soft);
  --palette-salesbot-action-show-button-background: var(--primary-soft);
  --palette-salesbot-action-show-button-border: var(--primary-border);
  --palette-salesbot-action-show-background: var(--primary-soft);
  --palette-global-onboarding-light-blue: var(--primary-soft);
  --palette-global-onboarding-blue-purple: var(--primary);
  --palette-home-tip-background: var(--panel-2);
  --palette-card-top-background: var(--sidebar-bg);
  --palette-pipeline-item-drag-placeholder: var(--panel-3);
  --palette-notification-favorite-background: var(--panel-3);
}
[data-brand="how"][data-color-scheme="dark"] {
  --palette-background-default: var(--bg);
  --palette-background-primary: var(--panel);
  --palette-background-secondary-300: var(--panel-2);
  --palette-background-secondary-500: var(--panel-3);
  --palette-background-secondary-800: var(--panel-3);
  --palette-background-primary-disabled: var(--panel-2);
  --palette-background-tour: var(--panel);
  --palette-background-qualification: var(--primary);
  --palette-border-primary: var(--border);
  --palette-border-default: var(--border-strong);
  --palette-box-shadow-default: #000;
  --palette-text-primary: var(--text);
  --palette-text-secondary-dark: var(--text-muted);
  --palette-text-secondary-light: var(--text-faint);
  --palette-text-secondary-disabled-light: var(--text-faint);
  --palette-placeholder-primary: var(--text-faint);
  --palette-placeholder-default: var(--text-faint);
  --palette-link-primary: var(--link);
  --palette-link-hover: var(--link-hover);
  --palette-table-hover-background: var(--hover-row);
  --palette-table-hover-selected-background: var(--primary-soft);
  --palette-table-multiaction-background: var(--panel-3);
  --palette-hover-default: var(--hover-row);
  --palette-hover-primary: var(--hover-row);
  --palette-button-classic-hover-background: var(--panel-3);
  --palette-left-menu-background-primary: var(--sidebar-bg);
  --palette-left-menu-background-secondary: var(--sidebar-top-bg);
  --palette-left-menu-text-primary: var(--sidebar-text);
  --palette-active-element-900: var(--primary);
  --palette-active-element-800: var(--primary-border);
  --palette-active-element-700: var(--primary-hover);
  --palette-action-droppable: var(--primary);
  --palette-scrollbar-track-background: var(--panel-2);
  --palette-scrollbar-thumb-background: var(--border-strong);
  --palette-search-breadcrumbs-background: var(--primary-soft);
  --palette-search-breadcrumbs-border: #7a3a14;
  --palette-customers-switch-button-background: var(--panel-3);
  --palette-notification-favorite-background: var(--panel-3);
  --palette-pipeline-item-drag-placeholder: var(--panel-3);
  --palette-pipeline-item-message-background: var(--primary-soft);
  --palette-card-top-background: #000;
  --palette-trigger-plug-item-background: var(--primary-soft);
  --palette-salesbot-list-trigger-background: var(--primary-soft);
  --palette-salesbot-action-show-button-background: var(--primary-soft);
  --palette-salesbot-action-show-button-border: var(--primary-border);
  --palette-salesbot-action-show-background: var(--primary-soft);
  --palette-external-message-background: var(--primary);
  --palette-external-message-reply-background: var(--primary-hover);
  --palette-global-onboarding-light-blue: var(--primary-soft);
  --palette-global-onboarding-blue-purple: var(--primary);
  --palette-home-tip-background: var(--panel-2);
  --base_button_active: var(--primary);
  --base_button_active_border: var(--primary-border);
  --base_active_color: var(--primary);
}