/* CRMboob · tema (onda 11) — padrão visual da home da Attio (docs/design-referencia.html).
   Carregado DEPOIS de app.css: define os tokens e sobrescreve só apresentação.
   Princípios: duas tintas (grafite + lavanda), hairlines no lugar de caixas, ease-out, "app como herói". */
:root {
  --ink-900:#1c1d1f; --ink-800:#222529; --ink-700:#2d3238; --ink-600:#4e5967; --ink-500:#566170; --ink-400:#a2adba; /* ink-400 só decorativo (contraste < 4.5) */
  --line-300:#c9d0d9; --line-200:#d2d8df; --line-100:#e3e7ec; --hairline:#ebeef2;
  --surface-0:#fff; --surface-50:#fafafb; --surface-100:#f3f4f6; --surface-200:#eceff3;
  --accent-50:#e8f0fe; --accent-200:#b6cdfb; --accent-600:#2457c5;
  --lavanda-50:#f1f4ff; --lavanda-100:#e6ecff; --lavanda-300:#bccbff; --lavanda-500:#86a0ee;
  --ok-bg:#e6f6ea; --ok-ink:#17703d; --bad-bg:#fdecec; --bad-ink:#c0392b; --warn-bg:#fff4e0; --warn-ink:#8a5200;
  --ia-bg:#efeafd; --ia-ink:#5b3fc4;
  --stage-1:#f08a24; --stage-2:#2f6bff; --stage-3:#8b5cf6; --stage-4:#22c55e;
  --btn-primary-bg:linear-gradient(-30deg,#1c1d1f 25.6%,#2e3238 163%); --btn-primary-ink:#f3f4f6;
  --hero-gradient:radial-gradient(90% 80% at 50% 100%,#e6ecff 0%,#bccbff 45%,#86a0ee 100%);
  --shadow-window:0 0 1px 1px rgba(0,22,62,.01),0 4px 12px -1px rgba(0,22,62,.04),0 1px 2px rgba(0,22,62,.18);
  --shadow-card:0 1px 3px rgba(0,0,0,.04),0 0 2px rgba(28,40,64,.18);
  --shadow-inset-btn:inset .2px .2px 2px rgba(255,255,255,.1),0 1.5px 1.5px rgba(0,0,0,.25);
  --r-chip:6px; --r-btn:8px; --r-card:12px; --r-window:14px; --r-pill:9999px;
  --ease-out:cubic-bezier(.2,0,0,1); --ease-out-strong:cubic-bezier(0,0,0,1);
  --dur-fast:.15s; --dur-base:.2s; --dur-slow:.3s; --dur-enter:.5s;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  /* escala tipográfica do app (compacta; a home usa 64/48 só no marketing) */
  --fs-titulo:15px; --fs-corpo:14px; --lh-corpo:20px; --fs-menor:13px; --fs-mini:12px; --fs-rotulo:11px;
  /* espaçamentos (grade de 4) */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:20px; --e-6:24px; --e-8:32px;
  --lateral-w:232px; --topo-h:48px;
  --bg:var(--surface-0); --ink:var(--ink-800); --panel:var(--surface-0); --lateral-bg:var(--surface-50); --marca-ink:#1c2a5c;
  color-scheme: light;
}
/* Modo escuro: [data-theme="dark"] (escolhido no botão do topo) ou, antes do JS fixar o tema (só claro/escuro), o sistema em modo escuro
   (sem data-theme). [data-theme="light"] força o claro. Mesmos tokens nos dois blocos: manter em sincronia. Contraste AA conferido. */
:root[data-theme="dark"] {
  --ink-900:#f4f5f7; --ink-800:#e6e8eb; --ink-700:#d6d9de; --ink-600:#aab2bd; --ink-500:#9aa3b0; --ink-400:#5f6977;
  --line-300:#3a414c; --line-200:#2e343d; --line-100:#262b33; --hairline:#20242b;
  --surface-0:#0f1115; --surface-50:#14171c; --surface-100:#1a1e25; --surface-200:#222730;
  --accent-50:#16233f; --accent-200:#2b4a8a; --accent-600:#8ab0ff;
  --lavanda-300:#3b4c86; --lavanda-500:#7d95e6;
  --lavanda-50:#151a2b; --lavanda-100:#1b2441;
  --ok-bg:#12301d; --ok-ink:#5fcf8a; --bad-bg:#3b1a18; --bad-ink:#ff8a80; --warn-bg:#3a2a10; --warn-ink:#f0b35a;
  --ia-bg:#241d3d; --ia-ink:#b8a6ff;
  --btn-primary-bg:linear-gradient(-30deg,#f3f4f6 25.6%,#d6d9de 163%); --btn-primary-ink:#1c1d1f;
  --hero-gradient:radial-gradient(90% 80% at 50% 100%,#141a2e 0%,#1b2748 45%,#27386b 100%);
  --shadow-window:0 0 1px 1px rgba(0,0,0,.4),0 8px 24px -4px rgba(0,0,0,.5); --shadow-card:0 1px 3px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.04);
  --bg:var(--surface-0); --panel:var(--surface-0); --lateral-bg:var(--surface-50); --marca-ink:#e6ecff;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-900:#f4f5f7; --ink-800:#e6e8eb; --ink-700:#d6d9de; --ink-600:#aab2bd; --ink-500:#9aa3b0; --ink-400:#5f6977;
    --line-300:#3a414c; --line-200:#2e343d; --line-100:#262b33; --hairline:#20242b;
    --surface-0:#0f1115; --surface-50:#14171c; --surface-100:#1a1e25; --surface-200:#222730;
    --accent-50:#16233f; --accent-200:#2b4a8a; --accent-600:#8ab0ff;
    --lavanda-300:#3b4c86; --lavanda-500:#7d95e6;
    --lavanda-50:#151a2b; --lavanda-100:#1b2441;
    --ok-bg:#12301d; --ok-ink:#5fcf8a; --bad-bg:#3b1a18; --bad-ink:#ff8a80; --warn-bg:#3a2a10; --warn-ink:#f0b35a;
    --ia-bg:#241d3d; --ia-ink:#b8a6ff;
    --btn-primary-bg:linear-gradient(-30deg,#f3f4f6 25.6%,#d6d9de 163%); --btn-primary-ink:#1c1d1f;
    --hero-gradient:radial-gradient(90% 80% at 50% 100%,#141a2e 0%,#1b2748 45%,#27386b 100%);
    --shadow-window:0 0 1px 1px rgba(0,0,0,.4),0 8px 24px -4px rgba(0,0,0,.5); --shadow-card:0 1px 3px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.04);
    --bg:var(--surface-0); --panel:var(--surface-0); --lateral-bg:var(--surface-50); --marca-ink:#e6ecff;
    color-scheme: dark;
  }
}

body { font-size: var(--fs-corpo); line-height: var(--lh-corpo); letter-spacing: -.003em; font-feature-settings: "cv11", "ss01"; }
::selection { background: var(--lavanda-300); color: var(--ink-900); }
:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- Casca: sidebar estilo Attio ---------- */
.app { background: var(--bg); }
@media (min-width: 901px) { .app { grid-template-columns: var(--lateral-w) 1fr; } }
.lateral .abas { display: flex; flex-direction: column; gap: 1px; }
.lateral { background: var(--lateral-bg); border-right: 1px solid var(--hairline); padding: var(--e-2) var(--e-2) var(--e-3); gap: 1px; overflow-y: auto; }
.lateral .marca { font-size: var(--fs-corpo); font-weight: 600; letter-spacing: -.01em; padding: 6px 8px; margin: 2px 0 var(--e-3); border-radius: var(--r-btn); gap: 8px; min-height: 36px; transition: background var(--dur-fast) var(--ease-out); }
.lateral .marca:hover { background: var(--surface-100); }
.lateral .marca i { width: 22px; height: 22px; border-radius: 6px; background: var(--hero-gradient); box-shadow: var(--shadow-card); display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; color: var(--marca-ink); flex-shrink: 0; }
.lateral .marca .ws { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral .marca .seta { color: var(--ink-500); }
.lateral .grupo { font-size: var(--fs-rotulo); font-weight: 500; color: var(--ink-500); text-transform: none; letter-spacing: 0; padding: var(--e-3) 8px var(--e-1); }
.nav { gap: 8px; padding: 0 8px; height: 30px; border-radius: 7px; color: var(--ink-600); font-size: var(--fs-menor); font-weight: 500; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.nav .ico { color: var(--ink-500); flex-shrink: 0; transition: color var(--dur-fast) var(--ease-out); }
.nav:hover { background: var(--surface-100); color: var(--ink-900); }
.nav.ativo { background: var(--surface-0); color: var(--ink-900); box-shadow: var(--shadow-card); }
.nav.ativo .ico { color: var(--ink-900); }
.lateral .rodape { border-top: 1px solid var(--hairline); margin: auto 0 0; padding: var(--e-3) 8px 0; min-width: 0; display: grid; gap: 6px; font-size: var(--fs-mini); line-height: 16px; color: var(--ink-500); }
.lateral .rodape .quem { min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--ink-700); }
.lateral .rodape .quem b { font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral .rodape .av { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-200); display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--ink-700); flex-shrink: 0; }
.lateral .rodape a { color: var(--ink-600); text-decoration: none; flex-shrink: 0; }
.lateral .rodape a:hover { color: var(--ink-900); }
.online { margin: 0; font-size: var(--fs-mini); }

.principal { background: var(--bg); }
.topo { height: var(--topo-h); border-bottom: 1px solid var(--hairline); padding: 0 var(--e-5); background: var(--bg); }
.topo h1 { font-size: var(--fs-titulo); font-weight: 600; letter-spacing: -.01em; }

/* ---------- Botões, chips, campos ---------- */
.btn { border: 1px solid var(--line-100); background: var(--surface-0); border-radius: var(--r-btn); padding: 0 12px; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--fs-menor); box-shadow: 0 1px 2px rgba(0,22,62,.05); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--surface-50); border-color: var(--line-200); }
.btn.primario { background: var(--btn-primary-bg); color: var(--btn-primary-ink); border-color: transparent; box-shadow: var(--shadow-inset-btn); }
.btn.primario:hover { filter: brightness(1.12); }
.btn.pequeno { height: 26px; padding: 0 9px; font-size: var(--fs-mini); border-radius: 7px; }
.filtros { gap: 2px; background: var(--surface-100); padding: 2px; border-radius: 9px; }
.filtros .btn { border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-600); }
.filtros .btn:hover { color: var(--ink-900); background: transparent; }
.filtros .btn.ativo { background: var(--surface-0); color: var(--ink-900); border-color: transparent; box-shadow: var(--shadow-card); }
.chip { border-radius: var(--r-chip); padding: 0 6px; height: 20px; font-size: var(--fs-rotulo); line-height: 20px; border: 1px solid var(--hairline); background: var(--surface-50); }
.chip.ia, .chip.ok, .chip.ruim, .chip.aviso { border-color: transparent; }
input.campo, textarea.campo, select.campo { border: 1px solid var(--line-100); border-radius: var(--r-btn); padding: 7px 10px; background: var(--surface-0); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
input.campo:focus, textarea.campo:focus, select.campo:focus, .compor textarea:focus { outline: 2px solid var(--accent-600); outline-offset: -1px; border-color: var(--accent-600); box-shadow: 0 0 0 3px var(--lavanda-100); }

/* ---------- Inbox: três colunas separadas por hairlines ---------- */
.lista { border-right: 1px solid var(--hairline); background: var(--bg); }
.item { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--hairline); gap: 4px; transition: background var(--dur-fast) var(--ease-out); }
.item:hover { background: var(--surface-50); }
.item.ativo { background: var(--lavanda-50); box-shadow: inset 2px 0 0 var(--lavanda-500); }
.item .nome { font-weight: 500; color: var(--ink-900); }
.item { min-width: 0; }
.item .l1 { min-width: 0; flex-wrap: wrap; row-gap: 4px; }
.item .l1 .nome { min-width: 0; }
.item .hora { font-size: var(--fs-rotulo); font-family: var(--font-mono); color: var(--ink-500); flex-shrink: 0; }
.chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chat { background: var(--surface-50); }
.faixa { border-bottom: 1px solid var(--hairline); font-size: var(--fs-menor); }
.mensagens { padding: var(--e-6); gap: var(--e-2); }
.msg { border-radius: 12px; box-shadow: none; border: 1px solid var(--hairline); background: var(--surface-0); }
.msg.out { background: var(--surface-200); border-color: transparent; }
.msg.out.ia { background: var(--ia-bg); border-color: transparent; }
.msg.nota { border: 0; }
.compor { border-top: 1px solid var(--hairline); background: var(--bg); }
.compor textarea { border: 1px solid var(--line-100); border-radius: var(--r-btn); height: auto; min-height: 40px; line-height: 20px; padding: 9px 10px; }
.ficha { border-left: 1px solid var(--hairline); padding: 0; gap: 0; background: var(--bg); }
.ficha > * { padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--hairline); margin: 0; }
.ficha h3 { font-size: var(--fs-rotulo); text-transform: none; letter-spacing: 0; color: var(--ink-500); font-weight: 500; margin: 0 0 var(--e-2); }
.attr { grid-template-columns: 104px 1fr; padding: 4px 0; font-size: var(--fs-menor); }
.resumo { border-radius: var(--r-btn); }

/* ---------- Kanban: colunas sem caixa, separadas por hairline ---------- */
.kanban { gap: 0; padding: 0; }
.coluna { background: transparent; border-radius: 0; border-right: 1px solid var(--hairline); padding: var(--e-3); width: 284px; height: 100%; max-height: none; }
.coluna .cab { padding: 2px 4px var(--e-3); font-weight: 500; font-size: var(--fs-menor); }
.coluna .cab .bola { width: 8px; height: 8px; }
.coluna.alvo { outline: none; background: var(--lavanda-50); }
.card { border-radius: 10px; box-shadow: var(--shadow-card); padding: 10px 12px; transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.card:hover { box-shadow: var(--shadow-window); }
.card { min-width: 0; }
.card .t { overflow: hidden; text-overflow: ellipsis; }
.card .l { flex-wrap: wrap; min-width: 0; row-gap: 4px; }
.card .l > span:not(.valor) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Painel/config: seções com hairline em vez de caixas pesadas ---------- */
.grade { gap: 0; padding: 0; border-bottom: 1px solid var(--hairline); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.kpi { background: transparent; box-shadow: none; border-radius: 0; border-right: 1px solid var(--hairline); padding: var(--e-5) var(--e-6); }
.kpi b { white-space: nowrap; font-size: 26px; line-height: 34px; font-weight: 600; letter-spacing: -.025em; color: var(--ink-900); }
.kpi span { font-size: var(--fs-mini); }
.secao { padding: 0 var(--e-6) var(--e-8); gap: 0; max-width: 880px; }
.caixa { background: transparent; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--hairline); padding: var(--e-6) 0; gap: var(--e-3); }
.caixa h2 { font-size: var(--fs-titulo); font-weight: 600; letter-spacing: -.01em; color: var(--ink-900); }
.caixa p { font-size: var(--fs-menor); }
.modo { border-color: var(--line-100); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.modo:hover { border-color: var(--line-300); }
table.tab td, table.tab th { border-bottom: 1px solid var(--hairline); padding: 9px 8px; }
table.tab th { font-size: var(--fs-mini); font-weight: 500; }
.chamado-box { border-color: var(--hairline); }
.atalhos { border-color: var(--line-100); }
.atalhos button:hover { background: var(--lavanda-50); }
.atalhos button.ativo { background: var(--lavanda-100); box-shadow: inset 3px 0 0 var(--marca-ink); color: var(--ink-900); }
.atalhos button.ativo b { color: var(--marca-ink); }
.atalhos button.ativo span { color: var(--ink-600); }

/* ---------- Login: colagem de janelas do app sobre lavanda ---------- */
.login { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(360px, 440px) 1fr; place-items: stretch; padding: 0; background: var(--bg); }
.login form { grid-column: 1; grid-row: 1; position: relative; z-index: 2; align-self: center; justify-self: center; background: transparent; box-shadow: none; border-radius: 0; padding: var(--e-8); width: 100%; max-width: 400px; gap: var(--e-4); animation: entra var(--dur-enter) var(--ease-out) both; }
.login .marca { padding: 0 0 var(--e-4); font-size: 16px; }
.login h1 .dois { color: var(--ink-500); }
.login .rotulo { display: grid; gap: 6px; font-size: var(--fs-menor); font-weight: 500; color: var(--ink-700); }
.login h1 { font-size: 32px; line-height: 1.05; letter-spacing: -.025em; font-weight: 600; margin: 0; color: var(--ink-900); }
.login .sub { margin: -4px 0 var(--e-2); color: var(--ink-600); font-size: var(--fs-menor); }
.login .btn.primario { height: 40px; font-size: var(--fs-corpo); margin-top: var(--e-1); }
.colagem { position: relative; grid-column: 2; grid-row: 1; background: var(--hero-gradient); border-left: 1px solid var(--hairline); overflow: hidden; min-height: 100vh; }
.colagem::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to right, rgba(255,255,255,.12) 0 1px, transparent 1px 48px); }
.janela { position: absolute; background: var(--surface-0); color: var(--ink-800); border-radius: var(--r-window); box-shadow: var(--shadow-window), 0 24px 48px -12px rgba(20,32,90,.25); overflow: hidden; font-size: 12px; line-height: 16px; animation: sobe var(--dur-enter) var(--ease-out) both; }
.janela .barra { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--hairline); grid-template-columns: none; font-size: 12px; }
.janela .barra i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-200); min-width: 0; }
.janela .barra span { margin-left: 8px; font-weight: 600; color: var(--ink-700); }
.j-corpo { padding: 4px 14px; display: grid; gap: 0; }
.j-lin { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.j-lin:last-child { border-bottom: 0; }
.j-lin b { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-200); flex-shrink: 0; display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--ink-700); }
.j-lin div { flex: 1; min-width: 0; display: grid; }
.j-lin strong { font-weight: 600; color: var(--ink-900); }
.j-lin small { color: var(--ink-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.j-lin em, .j-kanban small { font-style: normal; }
.j-lin em { font-size: 11px; padding: 0 6px; border-radius: 6px; background: var(--surface-100); color: var(--ink-600); }
.j-lin em.ia { background: var(--ia-bg); color: var(--ia-ink); }
.j-kanban { grid-template-columns: repeat(4, 1fr); padding: 0; }
.j-kanban > div { padding: 10px; border-right: 1px solid var(--hairline); display: grid; gap: 8px; align-content: start; min-height: 230px; }
.j-kanban > div:last-child { border-right: 0; }
.j-kanban h4 { margin: 0 0 2px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; color: var(--ink-800); }
.j-kanban em { display: block; width: 8px; height: 8px; border-radius: 50%; }
.j-kanban p { margin: 0; padding: 8px 10px; border-radius: 8px; box-shadow: var(--shadow-card); background: var(--surface-0); font-weight: 500; display: grid; gap: 2px; }
.j-kanban small { color: var(--ink-600); font-family: var(--font-mono); font-size: 11px; font-weight: 400; }
.j-chat { background: var(--surface-50); padding: 14px; gap: 8px; }
.j-chat p { margin: 0; padding: 7px 10px; max-width: 80%; justify-self: start; border-radius: 10px; background: var(--surface-0); border: 1px solid var(--hairline); }
.j-chat p.out { justify-self: end; background: var(--ia-bg); color: var(--ink-900); border-color: transparent; }
.j1 { width: 340px; left: 6%; top: 9%; animation-delay: .05s; }
.j2 { width: 600px; left: 16%; top: 46%; animation-delay: .15s; }
.j3 { width: 330px; left: 50%; top: 7%; animation-delay: .25s; }
@keyframes sobe { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .janela, .login form { animation: none; } }

@media (max-width: 900px) {
  /* casca móvel: linha 1 = marca + Online/conta/sair; linha 2 = abas roláveis */
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100vh; height: 100dvh; }
  .lateral { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marca rodape" "abas abas"; gap: 0; padding: 6px 12px 0; border-right: 0; border-bottom: 1px solid var(--hairline); overflow: visible; }
  .lateral .marca { display: flex; grid-area: marca; margin: 0; min-width: 0; }
  .lateral .rodape { display: flex; grid-area: rodape; align-items: center; gap: 10px; border-top: 0; margin: 0; padding: 0; }
  .lateral .rodape .quem b { display: none; }
  .lateral > *, .principal, .conteudo { min-width: 0; }
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .lateral .abas { grid-area: abas; flex-direction: row; gap: 2px; overflow-x: auto; padding: 6px 0 8px; scrollbar-width: none; }
  .lateral .abas .nav { flex-shrink: 0; }
  .lateral .grupo { display: none; }
  .topo { padding: 0 12px; overflow-x: auto; gap: 8px; }
  .topo h1 { flex-shrink: 0; }
  .filtros { flex-shrink: 0; }
  .login { grid-template-columns: 1fr; background: var(--hero-gradient); align-content: center; }
  .colagem { display: none; }
  .login form { background: var(--surface-0); border-radius: var(--r-window); box-shadow: var(--shadow-window); margin: 16px auto; padding: var(--e-6); width: calc(100% - 32px); }
}

/* ---------- Revisão 2: ficha sem transbordo, Detalhes em telas estreitas, filtros que quebram ---------- */
.ficha { min-width: 0; overflow-x: hidden; }
.ficha > *, .ficha * { min-width: 0; }
.attr { grid-template-columns: 104px minmax(0, 1fr); }
.attr > span:last-child, .ficha .resumo, .evento { overflow-wrap: anywhere; }
.ficha .l1, .ficha .status-neg, .ficha .acoes-linha, .chamado-box .l1, .nota-interna { flex-wrap: wrap; }
.ficha select.campo, .ficha input.campo { max-width: 100%; }
.card .l .dono { margin-left: auto; color: var(--ink-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-estreito { display: none !important; }
.faixa { flex-wrap: wrap; row-gap: 6px; }
.faixa .so-estreito + .btn { margin-left: 0; }
@media (max-width: 1200px) {
  .so-estreito { display: inline-flex !important; }
  .ficha-topo.so-estreito { display: flex !important; position: sticky; top: 0; z-index: 1; background: var(--bg); }
  .inbox { grid-template-columns: 300px minmax(0, 1fr); }
  .inbox .ficha { display: none; }
  .inbox.ficha-aberta .ficha { display: grid; position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100%); z-index: 30; box-shadow: var(--shadow-window), -24px 0 48px -12px rgba(0,22,62,.25); overflow-y: auto; }
}
@media (max-width: 900px) {
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .inbox.ficha-aberta .ficha { width: 100%; box-shadow: none; }
  .topo { height: auto; min-height: var(--topo-h); flex-wrap: wrap; padding: 8px 12px; overflow-x: visible; }
  .topo > * { min-width: 0; max-width: 100%; }
  .filtros { flex-wrap: wrap; flex-shrink: 1; }
}

/* ---------- Topo: tema (claro/escuro) e idioma PT | EN ---------- */
.prefs { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.prefs .tema { color: var(--ink-600); }
.prefs .tema:hover { color: var(--ink-900); }
.prefs .tema .ico { flex-shrink: 0; }
.prefs .idioma .btn { min-width: 32px; font-weight: 500; letter-spacing: .02em; }
.topo-login { position: absolute; top: var(--e-4); right: var(--e-4); z-index: 3; }
.topo-login .prefs .tema { background: var(--surface-0); }
.topo-login .filtros { background: var(--surface-100); box-shadow: var(--shadow-card); }
@media (max-width: 900px) {
  .prefs .tema span { display: none; }
  .prefs .tema { padding: 0 7px; }
  .topo-login { top: var(--e-3); right: var(--e-3); }
}

/* janelas móveis da colagem (js/janelas.js) */
.janela.movel .barra { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.janela.movel.movendo, .janela.movel.movendo .barra { cursor: grabbing; user-select: none; }
.janela.movel.movendo { box-shadow: var(--shadow-float, var(--shadow-window)); }
.janela.movel .alca { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; z-index: 5; background: linear-gradient(135deg, transparent 0 55%, var(--line-200) 55% 62%, transparent 62% 72%, var(--line-200) 72% 79%, transparent 79%); opacity: .7; }
.janela.movel:hover .alca, .janela.movel:focus-visible .alca { opacity: 1; }
.janela.movel:focus-visible { outline: 2px solid var(--ia-ink, #5b5bd6); outline-offset: 2px; }
.colagem.solta .janela { transform: none; }
.colagem .reorganizar { position: absolute; right: 8px; bottom: 8px; z-index: 999; font: inherit; font-size: 12px; line-height: 16px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-200); background: var(--surface-0); color: var(--ink-600); cursor: pointer; opacity: .85; }
.colagem .reorganizar:hover, .colagem .reorganizar:focus-visible { opacity: 1; color: var(--ink-900); }
.colagem .reorganizar[hidden] { display: none; }
@media (max-width: 400px) { .colagem .reorganizar { right: auto; left: 8px; } } /* à direita cobria a alça da janela do canto */

/* logotipo (bb no balão): grafite = currentColor; lavanda troca com o tema */
:root { --logo-lav: #7c5cf0; }
:root[data-theme="dark"] { --logo-lav: #a78bfa; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --logo-lav: #a78bfa; } }
.login .marca .logo-svg { height: 34px; width: auto; display: block; color: var(--ink-900); }
.lateral .marca i.simb { width: 30px; height: 30px; background: none; box-shadow: none; color: var(--ink-900); }
.lateral .marca i.simb .simb-svg { width: 30px; height: 30px; display: block; }
/* avisos da prévia da base (OCR: confira, limite de páginas, parcial) são frases: quebram linha em vez de cortar com reticências */
.base-previa > p.chip.aviso { display: block; white-space: normal; height: auto; line-height: 1.4; padding: 4px 8px; overflow: visible; text-overflow: clip; }

/* Produto do host (Atendimento em crmbb.*, CRM em crm.*): rótulo na marca e atalho discreto para o outro produto */
.produto-rotulo { margin: calc(-1 * var(--e-3)) 0 var(--e-3); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.lateral .marca .ws { display: flex; flex-direction: column; line-height: 1.2; }
.lateral .marca .produto { font-size: 11px; font-weight: 500; color: var(--ink-500); }
.abas .nav.outro-produto { margin-top: var(--e-3); color: var(--ink-500); font-size: 12px; }
.outro-aviso p { margin: 0 0 var(--e-3); }