/* ── Atendimento IA: Funil, Fila de Aprovação e Parâmetros — etapa 1 (02/10/2026) ──
 * Mesmo visual de Audiências e Agenda (marinho #0f172a + slate). Antes estas telas usavam
 * estilos soltos e herdavam .ctw .card-t do quadro de processos: no escuro os cartões ficavam
 * brancos com letra clara, e "Aprovar e enviar"/"Salvar" (btn-g) eram marinho sobre marinho. */

.crm { --c-card: #fff; --c-soft: #f1f5f9; --c-bd: #e2e8f0; --c-t1: #0f172a; --c-t2: #475569; --c-t3: #64748b }
body.dark-mode .crm { --c-card: #1e293b; --c-soft: #0f172a; --c-bd: #334155; --c-t1: #e5e7eb; --c-t2: #cbd5e1; --c-t3: #94a3b8 }
.crm { color: var(--c-t1) }
.crm .crm-sub { color: var(--c-t3); font-size: 12.5px }
.crm .crm-lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-t3); margin-bottom: 4px }

/* Selos de área e urgência */
.crm .crm-ar, .crm .crm-ur { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap }
.crm .crm-ar { background: #e2e8f0; color: #334155 }
.crm .crm-ar.trabalhista, .crm .crm-ar.societario { background: #eeedfe; color: #3c3489 }
.crm .crm-ar.civel { background: #e6f1fb; color: #0c447c }
.crm .crm-ar.familia { background: #fceef4; color: #8c2a4e }
.crm .crm-ar.consumidor { background: #fef4e7; color: #633806 }
.crm .crm-ar.previdenciario, .crm .crm-ar.imobiliario, .crm .crm-ar.ambiental { background: #e1f5ee; color: #085041 }
.crm .crm-ar.penal { background: #fcebeb; color: #a32d2d }
.crm .crm-ur.alta { background: #fcebeb; color: #a32d2d }
.crm .crm-ur.media { background: #faeeda; color: #854f0b }
.crm .crm-ur.baixa { background: #e1f5ee; color: #0f6e56 }
body.dark-mode .crm .crm-ar { background: #334155; color: #e2e8f0 }
body.dark-mode .crm .crm-ar.trabalhista, body.dark-mode .crm .crm-ar.societario { background: #312e81; color: #ddd6fe }
body.dark-mode .crm .crm-ar.civel { background: #1e3a5f; color: #bfdbfe }
body.dark-mode .crm .crm-ar.familia { background: #5b1f3a; color: #fbcfe8 }
body.dark-mode .crm .crm-ar.consumidor { background: #4a3210; color: #fde68a }
body.dark-mode .crm .crm-ar.previdenciario, body.dark-mode .crm .crm-ar.imobiliario, body.dark-mode .crm .crm-ar.ambiental { background: #064e3b; color: #a7f3d0 }
body.dark-mode .crm .crm-ar.penal, body.dark-mode .crm .crm-ur.alta { background: #5f1d1d; color: #fecaca }
body.dark-mode .crm .crm-ur.media { background: #4a3210; color: #fde68a }
body.dark-mode .crm .crm-ur.baixa { background: #064e3b; color: #a7f3d0 }

/* Botões: aprovar em verde, sempre legível */
.crm .crm-ok { background: #15803d; color: #fff; border: 1px solid #15803d }
.crm .crm-ok:hover { background: #166534; border-color: #166534 }
body.dark-mode .crm .btn-o { background: transparent; color: #e5e7eb; border-color: #64748b }
body.dark-mode .crm .btn-p { background: #e5e7eb !important; color: #0f172a !important; border-color: #e5e7eb !important }
.crm .btn i { font-size: 15px }

/* Funil: quadro */
.crm-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start }
.crm-col { flex: 0 0 240px; background: var(--c-soft); border: 1px solid var(--c-bd); border-radius: 12px; padding: 10px; min-height: 160px }
.crm-col h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--c-t1) }
.crm-col h3 span { margin-left: auto; min-width: 22px; text-align: center; font-size: 12px; padding: 1px 7px; border-radius: 20px; background: var(--c-card); border: 1px solid var(--c-bd); color: var(--c-t2) }
.crm-col.alvo { outline: 2px dashed #64748b; outline-offset: -2px }
.crm-vazio { color: var(--c-t2); font-size: 12.5px; padding: 2px }
.crm-cd { background: var(--c-card); border: 1px solid var(--c-bd); border-left: 3px solid #94a3b8; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: grab }
.crm-cd b { display: block; font-size: 14px; color: var(--c-t1) }
.crm-cd .tel { display: block; font-size: 12.5px; color: var(--c-t3); margin-top: 1px }
.crm-cd .rod { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px }
.crm-cd.trabalhista, .crm-cd.societario { border-left-color: #534ab7 }
.crm-cd.civel { border-left-color: #185fa5 }
.crm-cd.familia { border-left-color: #d4537e }
.crm-cd.consumidor { border-left-color: #b45309 }
.crm-cd.previdenciario, .crm-cd.imobiliario, .crm-cd.ambiental { border-left-color: #0f6e56 }
.crm-cd.penal { border-left-color: #e34948 }

/* Fila de aprovação — etapa 2: mensagem do cliente ao lado da resposta da IA, edição na própria tela */
.crm-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px }
.crm-fbar .crm-sub { margin-left: auto }
.crm-chip { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 20px; border: 1px solid var(--c-bd); background: var(--c-card); color: var(--c-t2); cursor: pointer }
.crm-chip.on { background: #0f172a; border-color: #0f172a; color: #fff }
body.dark-mode .crm-chip.on { background: #e5e7eb; border-color: #e5e7eb; color: #0f172a }
.crm-it { background: var(--c-card); border: 1px solid var(--c-bd); border-radius: 12px; margin-bottom: 12px; overflow: hidden }
.crm-it.urg { border-left: 3px solid #e34948 }
.crm-it .ih { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--c-bd) }
.crm-it .ih b { font-size: 15px }
.crm-it .ih .esp { margin-left: auto; font-size: 12.5px; color: var(--c-t2); display: inline-flex; align-items: center; gap: 4px }
.crm-it .ib { padding: 12px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.crm-it .cli, .crm-it .ia { border: 1px solid var(--c-bd); border-radius: 10px; padding: 10px 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere }
.crm-it .cli { background: var(--c-soft); margin-bottom: 6px }
.crm-it .cli small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--c-t3); white-space: normal }
.crm-it .cli.vazio { color: var(--c-t2); font-size: 13px; border-style: dashed }
.crm-it .ia { background: #eff6ff; border-color: #bfdbfe }
body.dark-mode .crm-it .ia { background: #172554; border-color: #1e3a8a }
.crm-it .ap-tx { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; line-height: 1.55; padding: 10px 12px; border-radius: 10px; border: 2px solid #2563eb; background: var(--c-card); color: var(--c-t1); resize: vertical }
.crm-it .dest { margin-top: 6px; font-size: 12.5px; color: var(--c-t2) }
.crm-it .ir { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; background: var(--c-soft); border-top: 1px solid var(--c-bd) }
.crm-it .ir .prox { color: var(--c-t2); font-size: 13px }
.crm-it .ir .bts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto }
.crm-it .ir .pergunta { font-size: 13px; font-weight: 600; color: #a32d2d }
body.dark-mode .crm-it .ir .pergunta { color: #fecaca }
.crm .crm-dz { background: #b91c1c; color: #fff; border: 1px solid #b91c1c }
.crm .btn:disabled { opacity: .55; cursor: not-allowed }

/* Parâmetros */
.crm-intro { background: var(--c-card); border: 1px solid var(--c-bd); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px }
.crm-intro p { margin: 4px 0 0; color: var(--c-t2); font-size: 13px; line-height: 1.5 }
.crm-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px }
.crm-ar-card { background: var(--c-card); border: 1px solid var(--c-bd); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px }
.crm-ar-card .topo { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.crm-ar-card .topo b { font-size: 15px }
.crm-ar-card label.crm-liga { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-t2); cursor: pointer; min-height: 40px }
.crm-ar-card label.crm-liga input { width: 18px; height: 18px; accent-color: #15803d }
.crm-ar-card textarea { width: 100%; box-sizing: border-box; background: var(--c-card); color: var(--c-t1); border: 1px solid var(--c-bd); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13.5px; line-height: 1.5 }
body.dark-mode .crm-ar-card textarea { background: #0f172a }
.crm-ar-card .rod { display: flex; align-items: center; gap: 10px }

@media (max-width: 700px) {
  .crm-col { flex-basis: 78vw }
  .crm-areas { grid-template-columns: 1fr }
  .crm .btn { min-height: 44px }
  .crm-it .ib { grid-template-columns: 1fr }
  .crm-it .ih .esp { margin-left: 0; width: 100% }
  .crm-it .ir .bts { width: 100%; margin-left: 0 }
  .crm-it .ir .btn { flex: 1 1 auto; justify-content: center }
  .crm-fbar .crm-sub { margin-left: 0; width: 100% }
  .crm-chip { min-height: 44px }
}

/* Funil — etapa 3: números, busca e filtros, colunas que cabem, cartão com a última mensagem,
 * painel do caso em gaveta e, no celular, uma etapa por vez em lista */
.fn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap }
.fn-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px }
.fn-kpi { display: flex; align-items: center; gap: 10px; background: var(--c-card); border: 1px solid var(--c-bd); border-radius: 12px; padding: 10px 14px; min-width: 0 }
.fn-kpi > i { font-size: 20px; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: none }
.fn-kpi b { display: block; font-size: 20px; line-height: 1.15; color: var(--c-t1) }
.fn-kpi small { display: block; font-size: 12.5px; color: var(--c-t2); line-height: 1.3 }
.fn-kpi.a > i { background: #e6f1fb; color: #0c447c } .fn-kpi.b > i { background: #fcebeb; color: #a32d2d }
.fn-kpi.c > i { background: #eeedfe; color: #3c3489 } .fn-kpi.d > i { background: #e1f5ee; color: #0f6e56 }
body.dark-mode .fn-kpi.a > i { background: #1e3a5f; color: #bfdbfe } body.dark-mode .fn-kpi.b > i { background: #5f1d1d; color: #fecaca }
body.dark-mode .fn-kpi.c > i { background: #312e81; color: #ddd6fe } body.dark-mode .fn-kpi.d > i { background: #064e3b; color: #a7f3d0 }
.fn-fwrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px }
.fn-filtros { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0 }
.fn-busca { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 240px; max-width: 360px; background: var(--c-card); border: 1px solid var(--c-bd); border-radius: 20px; padding: 0 12px; color: var(--c-t3) }
.crm .fn-busca input { flex: 1; min-width: 0; border: 0 !important; outline: 0; box-shadow: none; background: transparent !important; color: var(--c-t1) !important; font: inherit; font-size: 13.5px !important; padding: 8px 0 !important } /* vence a regra global !important de input[type=search] */
.fn-busca:focus-within { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.2) }
.crm-chip i { font-size: 14px; vertical-align: -2px }

/* Quadro: as 6 etapas abertas dividem a largura; a rolagem lateral, se houver, fica dentro do quadro */
.fn-board { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)) 52px; overflow-x: auto; max-width: 100% }
.fn-board.com-perdidos { grid-template-columns: repeat(7, minmax(150px, 1fr)) }
.fn-board .crm-col { min-width: 0 }
.crm-col.fn-perd { font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px; color: var(--c-t2) }
.crm-col.fn-perd span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12.5px; font-weight: 700; white-space: nowrap }
.crm-col.fn-perd:hover, .fn-fecha-perd:hover { color: var(--c-t1) }
.fn-fecha-perd { border: 0; background: none; color: var(--c-t2); cursor: pointer; padding: 0; margin-right: -2px; font-size: 15px; display: inline-flex }
.fn .crm-cd { cursor: pointer; transition: border-color .12s, box-shadow .12s }
.fn .crm-cd:hover { box-shadow: 0 2px 8px rgba(15,23,42,.08) }
.fn .crm-cd:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px }
.fn .crm-cd.sel { box-shadow: 0 0 0 2px #2563eb }
.fn .crm-cd b { overflow-wrap: anywhere }
.fn .crm-cd .ult { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--c-t2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere }
.fn .crm-cd .qd { font-size: 11.5px; color: var(--c-t3); display: inline-flex; align-items: center; gap: 3px; margin-left: auto; white-space: nowrap }
.fn .crm-cd .qd.atr { color: #b91c1c; font-weight: 700 }
body.dark-mode .fn .crm-cd .qd.atr { color: #fca5a5 }
.fn .crm-cd .pend { margin-top: 8px; font-size: 11.5px; line-height: 1.3; font-weight: 600; color: #0c447c; background: #e6f1fb; border-radius: 8px; padding: 4px 7px; display: flex; align-items: center; gap: 5px }
body.dark-mode .fn .crm-cd .pend { background: #1e3a5f; color: #bfdbfe }
.fn-cel { display: none }

/* Painel do caso */
.fn-veu { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 900 }
.fn-painel { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); box-sizing: border-box; background: var(--c-card); border-left: 1px solid var(--c-bd); z-index: 901; display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(15,23,42,.18) }
.fn-painel .ph { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--c-bd) }
.fn-painel .ph > div { flex: 1; min-width: 0 }
.fn-painel h2 { margin: 0; font-size: 17px; color: var(--c-t1); overflow-wrap: anywhere }
.fn-painel .ph small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--c-t2) }
.fn-painel .rod { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px }
.fn-painel .fn-pc { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 16px }
.fn-sel { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--c-bd); background: var(--c-card); color: var(--c-t1); min-height: 42px }
.fn-ou { display: block; margin-top: 4px }
.fn-conv { display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow-y: auto; background: var(--c-soft); border: 1px solid var(--c-bd); border-radius: 10px; padding: 10px }
.fn-conv .bal { max-width: 86%; padding: 8px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--c-t1) }
.fn-conv .bal small { display: block; margin-top: 3px; font-size: 11px; color: var(--c-t3); white-space: normal }
.fn-conv .bal.cli { align-self: flex-start; background: var(--c-card); border: 1px solid var(--c-bd); border-bottom-left-radius: 4px }
.fn-conv .bal.esc { align-self: flex-end; background: #dcfce7; border: 1px solid #bbf7d0; border-bottom-right-radius: 4px }
body.dark-mode .fn-conv .bal.esc { background: #064e3b; border-color: #065f46 }
.fn-conv .bal.esc small { color: #166534 }
body.dark-mode .fn-conv .bal.esc small { color: #a7f3d0 }
.fn-painel textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; line-height: 1.55; padding: 10px 12px; border-radius: 10px; border: 2px solid #2563eb; background: var(--c-card); color: var(--c-t1); resize: vertical }
.fn-painel .nota { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 12.5px; color: var(--c-t2); line-height: 1.45 }
.fn-painel .nota i { font-size: 16px; color: #15803d; flex: none }
.fn-painel .nota.cinza i { color: var(--c-t3) }
.fn-painel .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px }
.fn-painel .pergunta { flex-basis: 100%; font-size: 13px; font-weight: 600; color: #a32d2d }
body.dark-mode .fn-painel .pergunta { color: #fecaca }

@media (max-width: 1100px) {
  .fn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 700px) {
  .fn-board { display: none }
  .fn-cel { display: block }
  .fn-colchips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px }
  .fn-colchips .crm-chip { flex: none; white-space: nowrap }
  .fn-dica { margin-top: 8px }
  .fn-busca { max-width: none; flex-basis: 100%; min-height: 44px; box-sizing: border-box }
  .fn-filtros { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px }
  .fn-filtros .crm-chip { flex: none; white-space: nowrap }
  .fn-kpi { padding: 8px 10px; gap: 8px }
  .fn-kpi > i { width: 28px; height: 28px; font-size: 16px }
  .fn-kpi b { font-size: 17px }
  .fn-kpi small { font-size: 12px }
  .fn-painel { width: 100vw; border-left: 0 }
  .fn-painel .acts .btn { flex: 1 1 auto; justify-content: center }
}
.fn-painel .btn-o { border-color: #94a3b8 }

/* Parâmetros — etapa 4: áreas à esquerda, editor à direita, aviso único de alterações não salvas */
.par-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; align-items: start; padding-bottom: 70px }
.par-lista { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 8px }
.par-it { font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--c-bd); background: var(--c-card); color: var(--c-t1) }
.par-it:hover { border-color: #94a3b8 }
.par-it.on { border-color: #0f172a; box-shadow: inset 3px 0 0 #0f172a }
body.dark-mode .par-it.on { border-color: #e5e7eb; box-shadow: inset 3px 0 0 #e5e7eb }
.par-it .nm { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px }
.par-it .st { font-size: 12.5px; color: var(--c-t2) }
.par-it .st.des { color: #a32d2d }
body.dark-mode .par-it .st.des { color: #fecaca }
.par-ponto { width: 8px; height: 8px; border-radius: 50%; background: #b45309; display: inline-block; flex: none }
.par-ed { background: var(--c-card); border: 1px solid var(--c-bd); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.par-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px }
.par-cab h2 { margin: 0; font-size: 18px; color: var(--c-t1) }
.par-exp { margin: -8px 0 0 }
.par-chave { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--c-t1); min-height: 40px; position: relative }
.par-chave input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer }
.par-chave .tr { width: 44px; height: 24px; border-radius: 12px; background: #94a3b8; position: relative; transition: background .12s; flex: none }
.par-chave .tr::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .12s }
.par-chave input:checked + .tr { background: #15803d }
.par-chave input:checked + .tr::after { left: 23px }
.par-chave input:focus-visible + .tr { outline: 2px solid #2563eb; outline-offset: 2px }
.par-dica { margin: 0 0 8px }
.par-qs { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px }
.par-q { display: flex; align-items: center; gap: 8px }
.par-q .n { width: 22px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--c-t2); flex: none }
.crm .par-q input { flex: 1; min-width: 0; box-sizing: border-box; font: inherit; font-size: 14px !important; padding: 8px 10px !important; border-radius: 8px !important; border: 1px solid var(--c-bd) !important; background: var(--c-card) !important; color: var(--c-t1) !important }
.par-rm { flex: none; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--c-bd); background: transparent; color: var(--c-t2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 16px }
.par-rm:hover { color: #b91c1c; border-color: #b91c1c }
.par-vazio { margin: 0 0 8px }
.par-ed textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; line-height: 1.5; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--c-bd); background: var(--c-card); color: var(--c-t1); resize: vertical }
.par-prev .par-conv { max-height: none; margin-bottom: 6px }
.par-prev p { margin: 0 }
.par-off { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--c-bd); color: var(--c-t2); font-size: 13px }
.par-barra { position: sticky; bottom: 10px; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #fef4e7; border: 1px solid #f59e0b; color: #633806; box-shadow: 0 6px 20px rgba(15,23,42,.15) }
.par-barra[hidden] { display: none }
.par-barra .tx { font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px }
.par-barra .bts { display: flex; gap: 8px; margin-left: auto }
.par-barra .btn-o { background: #fff; color: #633806; border-color: #b45309 }
.par-barra .crm-sub { color: #633806 }
body.dark-mode .par-barra { background: #4a3210; border-color: #b45309; color: #fde68a }
body.dark-mode .par-barra .btn-o { background: transparent; color: #fde68a; border-color: #fde68a }
body.dark-mode .par-barra .crm-sub { color: #fde68a }
@media (max-width: 900px) {
  .par-grid { grid-template-columns: 1fr }
  .par-lista { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 4px }
  .par-it { flex: none; min-width: 150px }
}
@media (max-width: 700px) {
  .par-ed { padding: 14px 12px }
  .par-rm { width: 44px; height: 44px }
  .crm .par-q input { min-height: 44px }
  .par-chave { min-height: 44px }
  .par-barra .bts { width: 100%; margin-left: 0 }
  .par-barra .btn { flex: 1 1 auto; justify-content: center }
}

/* Atendimento — etapa 5: abas Funil, Aprovação e Parâmetros (mesmo desenho das abas da Agenda) */
.crm-abas-wrap { margin-bottom: 14px }
.crm-abas { display: inline-flex; gap: 2px; padding: 3px; background: #e2e8f0; border-radius: 10px; max-width: 100%; overflow-x: auto }
.crm-abas button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; white-space: nowrap }
.crm-abas button:hover { color: #0f172a }
.crm-abas button.on { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(15,23,42,.12) }
.crm-abas button:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px }
.crm-abas button i { font-size: 15px }
.crm-aba-n { min-width: 18px; padding: 0 6px; height: 18px; line-height: 18px; border-radius: 9px; background: #b91c1c; color: #fff; font-size: 11px; font-weight: 700; text-align: center }
.crm-aba-n[hidden] { display: none }
body.dark-mode .crm-abas { background: #0f172a; border: 1px solid #334155 }
body.dark-mode .crm-abas button { color: #cbd5e1 }
body.dark-mode .crm-abas button:hover { color: #f1f5f9 }
body.dark-mode .crm-abas button.on { background: #334155; color: #f1f5f9 }
@media (max-width: 700px) {
  .crm-abas { display: flex; width: 100%; box-sizing: border-box }
  .crm-abas button { flex: 1 1 auto; justify-content: center; height: 44px; padding: 0 10px }
}