/* Paleta: barra superior preta, conteúdo claro, texto quase preto e azul de destaque.
   (--white é a cor do texto principal; o nome ficou do tema escuro original.) */
:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --line: #e7e9ee;
  --line-2: #d6dae1;
  --blue: #1f5fd6;
  --blue-soft: rgba(31, 95, 214, 0.09);
  --ice: #1a4fb3;
  --white: #0d1017;
  --muted: #5d6676;
  --dim: #8b93a2;
  --ok: #128a57;
  --warn: #b26b00;
  --bad: #c9364c;
  --preto: #0a0b0d;
  --display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
/* Áreas pretas (barra superior e tela de login) usam as cores do tema escuro. */
.topbar, .login {
  --bg: #111317;
  --surface: #0a0b0d;
  --surface-2: #1a1d23;
  --line: #1f232a;
  --line-2: #2c313a;
  --blue: #4a8cff;
  --blue-soft: rgba(74, 140, 255, 0.16);
  --ice: #9dbfff;
  --white: #f3f5f9;
  --muted: #a1a9b7;
  --dim: #6b7383;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--white); }
body { font-family: var(--body); font-size: 14px; -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: var(--ice); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Barra superior */
.topbar { border-bottom: 1px solid #000; background: #000; color: var(--white); position: sticky; top: 0; z-index: 10; box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 6px 24px rgba(10,11,13,.12); }
.topbar .in { max-width: 1240px; margin: 0 auto; padding: 0 16px; height: 60px; display: flex; align-items: center; gap: 20px; }
.topbar .linha1 { height: 58px; justify-content: space-between; }
.topbar .barra-abas { background: #000; border-top: 1px solid #1c1c1c; }
.topbar .linha2 { height: 50px; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1rem; text-decoration: none; color: var(--white); flex: none; }
.logo img { height: 24px; width: auto; display: block; }
.logo span { font-family: var(--body); font-weight: 500; font-size: .82rem; color: var(--muted); padding-left: 10px; border-left: 1px solid var(--line-2); }
.topbar .logo span { color: #8a8a8a; border-left-color: #333; }
.logo-login { flex-direction: column; gap: 12px; }
.logo-login img { height: 34px; }
.logo-login span { border-left: 0; padding-left: 0; }
/* Barra em preto e branco: aba aberta vira uma pílula branca. */
nav.menu { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; height: 100%; overflow-x: auto; scrollbar-width: none; }
nav.menu a { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; color: #8a8a8a; text-decoration: none;
  font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; }
nav.menu a:hover { color: #fff; background: #161616; }
nav.menu a.ativo { color: #000; background: #fff; }
.topbar .nova { display: flex; align-items: center; gap: 6px; flex: none; padding: 6px 14px; border-radius: 999px; border: 1px solid #fff;
  color: #fff; text-decoration: none; font-weight: 500; font-size: .86rem; transition: background .15s, color .15s; }
.topbar .nova:hover, .topbar .nova.ativo { background: #fff; color: #000; }
.topbar .ico { flex: none; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #1c1c1c; border: 1px solid #3a3a3a; color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: .78rem; font-weight: 600; flex: none; letter-spacing: .02em; }
.quem { display: flex; align-items: center; gap: 12px; font-size: .82rem; color: var(--muted); flex: none; }
.quem strong { color: var(--white); font-weight: 600; display: block; }
details.conta { position: relative; }
details.conta summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
details.conta summary::-webkit-details-marker { display: none; }
details.conta summary:hover, details.conta[open] summary { background: var(--surface-2); }
details.conta summary .ico { color: var(--muted); width: 16px; height: 16px; }
.conta-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; display: grid; padding: 6px; border-radius: 10px;
  background: var(--preto); border: 1px solid var(--line-2); box-shadow: 0 12px 32px rgba(0,0,0,.35); z-index: 20; }
.conta-menu a, .conta-menu button { color: var(--white); text-decoration: none; text-align: left; padding: 9px 12px; border-radius: 8px;
  font: inherit; font-size: .88rem; background: none; border: 0; cursor: pointer; }
.conta-menu a:hover, .conta-menu button:hover, .conta-menu a.ativo { background: var(--surface-2); }
.kpis2 strong.apagado { color: var(--muted); font-size: 1rem; }
@media (max-width: 760px) {
  .topbar .linha1 { height: 54px; gap: 10px; }
  .topbar .linha2 { height: 44px; padding-right: 8px; }
  nav.menu { gap: 2px; }
  nav.menu a { padding: 0 10px; }
  nav.menu a:not(.ativo) span { display: none; }
  .topbar .logo span { display: none; }
  .topbar .logo img { height: 20px; }
  .topbar .quem { min-width: 0; gap: 8px; flex: 0 1 auto; }
  .topbar .meta-topo { min-width: 0; flex-shrink: 1; overflow: hidden; }
  .topbar .mt-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  details.conta summary { padding: 4px; }
  details.conta summary .ico { display: none; }
  .topbar .nova span { display: none; }
  .topbar .nova { padding: 7px 9px; }
  .quem .nome { display: none; }
}

main { max-width: 1240px; margin: 0 auto; padding: 24px 16px 64px; display: grid; gap: 20px; }
.titulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.titulo h1 { font-family: var(--display); font-weight: 700; font-size: 1.4rem; margin: 0; letter-spacing: -0.01em; }
.titulo p { margin: 4px 0 0; color: var(--muted); font-size: .86rem; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; min-width: 0; box-shadow: 0 1px 2px rgba(13,16,23,.04), 0 8px 24px rgba(13,16,23,.04); }
.panel h2 { font-family: var(--display); font-size: 1rem; font-weight: 700; margin: 0 0 16px; }

/* Botões */
.btn { font: inherit; font-size: .86rem; font-weight: 500; color: var(--white); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 16px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.btn:hover { background: var(--surface-2); border-color: var(--dim); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* Botão principal preto que acende em azul; nas áreas pretas ele é azul. */
.btn.primary { background: var(--preto); border-color: var(--preto); color: #fff; }
.btn.primary:hover { background: var(--blue); border-color: var(--blue); }
.login .btn.primary { background: var(--blue); border-color: var(--blue); }
.login .btn.primary:hover { background: #3a7df5; border-color: #3a7df5; }
.btn.danger { color: var(--bad); }
.btn.sm { padding: 6px 10px; font-size: .8rem; }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; }

/* Formulários */
/* Grade fixa de 4 colunas: todo campo ocupa 1, 2, 3 ou 4 colunas, então as bordas se alinham entre as linhas. */
form.grid, .fgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 16px; align-items: start; }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; grid-column: span 1; }
.f.q2 { grid-column: span 2; } .f.q3 { grid-column: span 3; } .f.q4 { grid-column: 1 / -1; }
@media (max-width: 900px) {
  form.grid, .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f.q2, .f.q3, .f.q4 { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .f { grid-column: 1 / -1; } }
label { font-size: .76rem; font-weight: 500; color: var(--muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
label em { color: var(--blue); font-style: normal; }
/* Mesma altura para caixa de texto, lista, data e arquivo */
input, select, textarea { width: 100%; font: inherit; font-size: .9rem; line-height: 1.2; color: var(--white); background: var(--bg); border: 1px solid var(--line-2); padding: 0 12px; border-radius: 8px; }
input, select { height: 42px; }
textarea { padding: 10px 12px; }
select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a93a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
input[type=file] { padding: 0 6px 0 0; display: flex; align-items: center; color: var(--muted); font-size: .82rem; line-height: 40px; }
input[type=file]::file-selector-button { font: inherit; font-size: .8rem; height: 40px; margin-right: 10px; padding: 0 12px; border: 0; border-right: 1px solid var(--line-2); border-radius: 8px 0 0 8px; background: var(--surface-2); color: var(--white); cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--line-2); }
select option { background: var(--surface); }
textarea { resize: vertical; min-height: 80px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
input[readonly] { color: var(--muted); }
input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
input.invalido { border-color: var(--bad); }
.dica { font-size: .72rem; color: var(--dim); line-height: 1.3; }
.dica.ok { color: var(--ok); } .dica.err { color: var(--bad); }
.secao { grid-column: 1 / -1; font-family: var(--display); font-weight: 700; font-size: .92rem; padding-top: 18px; margin-top: 6px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.secao:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.secao small { font-family: var(--body); font-weight: 400; color: var(--muted); font-size: .78rem; }
.msg { font-size: .86rem; min-height: 1.2em; }
.msg.err { color: var(--bad); } .msg.ok { color: var(--ok); }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; color: var(--white);
  background: radial-gradient(1200px 600px at 50% -10%, rgba(31,95,214,.22), transparent 60%), var(--preto); }
.login .panel { width: 100%; max-width: 380px; display: grid; gap: 18px; background: var(--bg); border-color: var(--line-2); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.login .logo { justify-content: center; font-size: 1.1rem; }
.login p { color: var(--muted); margin: 0; text-align: center; font-size: .86rem; }
.login form { display: grid; gap: 14px; }
#codigo { text-transform: uppercase; letter-spacing: .3em; font-weight: 600; text-align: center; font-size: 1.1rem; }

/* Tabelas */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; }
th { font-weight: 500; font-size: .76rem; color: var(--muted); text-align: left; padding: 0 10px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 12px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; }
.vazio { text-align: center; color: var(--muted); padding: 32px 0; border: 1px dashed var(--line-2); border-radius: 10px; }

/* Filtros e chips */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filtros input { max-width: 300px; }
.filtros select { width: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chipbtn { font: inherit; font-size: .8rem; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); padding: 6px 12px; border-radius: 99px; cursor: pointer; }
.chipbtn b { color: var(--white); margin-left: 6px; font-weight: 600; }
.chipbtn.ativo { border-color: var(--blue); color: var(--white); background: var(--blue-soft); }
.st { display: inline-block; font-size: .74rem; font-weight: 500; padding: 3px 10px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.st.contrato_gerado, .st.contrato_assinado { color: var(--ice); background: var(--blue-soft); }
.st.em_formalizacao { color: var(--warn); background: rgba(178,107,0,.10); }
.st.aprovada { color: var(--ice); background: rgba(26,79,179,.09); }
.st.pagamento_liberado { color: var(--ok); background: rgba(18,138,87,.06); border: 1px dashed rgba(18,138,87,.45); }
.st.paga { color: var(--ok); background: rgba(18,138,87,.10); }
.st.cancelada { color: var(--bad); background: rgba(201,54,76,.08); }
.tag { font-size: .72rem; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--muted); }

/* Detalhe */
.cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cab h1 { font-family: var(--display); font-size: 1.35rem; margin: 6px 0 4px; }
.cab .meta { color: var(--muted); font-size: .84rem; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.etapas { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.etapa { display: grid; gap: 8px; font-size: .74rem; color: var(--dim); }
.etapa i { height: 4px; border-radius: 99px; background: var(--line-2); }
.etapa.feita { color: var(--muted); } .etapa.feita i { background: var(--blue); }
.etapa.atual { color: var(--white); font-weight: 600; } .etapa.atual i { background: var(--preto); }
@media (max-width: 640px) { .etapa span { display: none; } }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.abas button { font: inherit; background: none; border: 0; color: var(--muted); padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 500; }
.abas button:hover { color: var(--white); }
.abas button.ativo { color: var(--white); border-bottom-color: var(--blue); }
dl.dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 20px; margin: 0; }
dl.dados div { min-width: 0; }
dl.dados dt { font-size: .74rem; color: var(--muted); margin-bottom: 3px; }
dl.dados dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
dl.copiavel dd { display: flex; align-items: flex-start; gap: 6px; }
dl.copiavel .valor { cursor: copy; border-radius: 4px; }
dl.copiavel .valor:hover { background: var(--bg); }
button.copiar { flex: none; display: inline-flex; padding: 2px; border: 1px solid transparent; border-radius: 6px; background: none;
  color: var(--dim); cursor: pointer; }
button.copiar .ico { width: 15px; height: 15px; }
button.copiar:hover { color: var(--white); border-color: var(--line); background: var(--bg); }
button.copiar.feito { color: var(--ok); }
.btn .ico { width: 15px; height: 15px; vertical-align: -3px; }
.bloco { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
.bloco h3 { font-family: var(--display); font-size: .92rem; margin: 0 0 12px; color: var(--ice); }
.linkbox { display: flex; gap: 8px; align-items: center; background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 8px 8px 12px; }
.linkbox a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aviso { border: 1px solid rgba(240,180,76,.4); background: rgba(240,180,76,.06); border-radius: 10px; padding: 12px 14px; font-size: .86rem; color: var(--warn); }
.aviso.info { border-color: rgba(74,140,255,.4); background: var(--blue-soft); color: var(--ice); }
.aviso.ok { border-color: rgba(60,207,145,.4); background: rgba(60,207,145,.06); color: var(--ok); }
ol.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
ol.hist li { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
ol.hist li:last-child { border-bottom: 0; }
ol.hist time { color: var(--muted); font-size: .8rem; }
ol.hist small { color: var(--muted); display: block; overflow-wrap: anywhere; }

/* CRM: tempo desde a entrada / aprovação */
.tempo { font-variant-numeric: tabular-nums; font-weight: 500; }
.tempo.atencao { color: var(--warn); }
.tempo.alerta { color: var(--bad); font-weight: 600; }
tr.riscado td { color: var(--dim); }
tr.riscado td b { text-decoration: line-through; }
/* Financeiro do master: menu lateral + conteúdo */
.fin { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.fin-menu { display: grid; gap: 4px; position: sticky; top: 130px; }
.fin-titulo { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin: 2px 10px 12px; }
.fin-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 500; }
.fin-menu a:hover { background: var(--surface); color: var(--white); }
.fin-menu a.ativo { background: var(--preto); color: #fff; }
.fin-menu a.fin-baixar { margin-top: 10px; border: 1px dashed var(--line); font-size: .85rem; }
/* Painel de bancos e equipe (Financeiro do master) */
.pn-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.pn-kpi { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pn-kpi span { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pn-kpi b { font-family: var(--display); font-size: 1.45rem; line-height: 1.15; }
.pn-kpi small { font-size: .76rem; color: var(--muted); }
.pn-kpi.verde { background: #ecfdf5; border-color: #a7f3d0; } .pn-kpi.verde b, .pn-kpi.verde span { color: #065f46; }
.pn-kpi.escuro { background: var(--preto); border-color: var(--preto); } .pn-kpi.escuro b, .pn-kpi.escuro span, .pn-kpi.escuro small { color: #fff; }
.pn-titulo { font-family: var(--display); font-size: 1.05rem; margin: 22px 0 10px; }
.pn-bancos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pn-banco { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pn-banco.vazio { opacity: .55; }
.pn-banco-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pn-banco-topo b { font-family: var(--display); font-size: 1.1rem; }
.pn-barra { height: 6px; border-radius: 999px; background: var(--surface-2, #eee); overflow: hidden; }
.pn-barra i { display: block; height: 100%; border-radius: inherit; background: #10b981; }
.pn-barra.fina { height: 4px; margin-top: 4px; } .pn-barra.fina i { background: var(--preto); }
.pn-banco-linhas { display: grid; gap: 4px; }
.pn-banco-linhas > div { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; }
.pn-banco-linhas span { color: var(--muted); }
.pn-banco-linhas b { white-space: nowrap; font-weight: 600; }
.pn-rank td, .pn-rank th { white-space: nowrap; }
.pn-rank tr.top td { background: #fffbeb; }
.pn-pos { font-size: 1.1rem; text-align: center; width: 44px; }
.pn-sim { min-width: 90px; }
@media (max-width: 900px) { .pn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fin-corpo { display: grid; gap: 20px; min-width: 0; }
.fin-atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.fin-atalho { display: grid; gap: 6px; padding: 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--white); }
.fin-atalho:hover { border-color: var(--preto); }
.fin-atalho .ico { width: 22px; height: 22px; }
.fin-atalho b { font-family: var(--display); font-size: 1rem; }
.fin-atalho span { font-size: .8rem; color: var(--muted); }
.calc-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.calc-res > div { display: grid; gap: 4px; padding: 16px 18px; border-radius: 12px; }
.calc-res span { font-size: .78rem; }
.calc-res strong { font-family: var(--display); font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.calc-res small { font-size: .74rem; }
.calc-nota { background: var(--preto); color: #fff; }
.calc-nota span, .calc-nota small { color: #9a9a9a; }
.calc-nota .btn { justify-self: start; margin-top: 6px; background: #1c1c1c; color: #fff; border-color: #3a3a3a; }
.calc-ir { background: var(--bg); border: 1px solid var(--line); }
.calc-ir span, .calc-ir small { color: var(--muted); }
#nota_valor { max-width: 260px; font-size: 1.25rem; }
@media (max-width: 860px) {
  .fin { grid-template-columns: 1fr; gap: 14px; }
  .fin-menu { position: static; display: flex; overflow-x: auto; scrollbar-width: none; }
  .fin-titulo { display: none; }
  .fin-menu a { white-space: nowrap; flex: none; }
}
/* Alternância Quadro | WhatsApp na aba Leads */
.seg-abas { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); gap: 2px; }
.seg-abas a { padding: 7px 16px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 500; font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; }
.seg-abas a.ativo { background: var(--preto); color: #fff; }
.seg-abas .contador:empty { display: none; }
.seg-abas .contador, .wa-nao-lidas { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #1f9d55; color: #fff; font-size: .72rem;
  display: inline-flex; align-items: center; justify-content: center; }

/* Etiquetas do WhatsApp / etapas do acompanhamento */
.etq { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 600; white-space: nowrap; color: #fff; }
.etq-cinza { background: #6b7383; } .etq-roxo { background: #7c3aed; } .etq-azul { background: #1f5fd6; } .etq-preto { background: #0a0b0d; }
.etq-laranja { background: #ea7a17; } .etq-verde { background: #16a34a; } .etq-amarelo { background: #eab308; color: #1c1600; } .etq-vermelho { background: #dc2626; }
.etq-quente { background: #fff1e6; color: #c2410c; border: 1px solid #fdba74; }
/* Etiqueta do banco que recusou a ficha (Defesa do banco e Encerrados): cor de cada banco. */
.etq-banco { background: #475569; }
.etq-banco.b-PAN { background: #0b5ed7; } .etq-banco.b-C6 { background: #111111; } .etq-banco.b-SANTANDER { background: #d4111e; }
.etq-banco.b-BV { background: #1d3f8f; } .etq-banco.b-SAFRA { background: #0f2340; } .etq-banco.b-DAYCOVAL { background: #00706b; }
.etq-banco.b-OMNI { background: #e2580e; } .etq-banco.b-CREDITAS { background: #5b2bd4; }
.etq-banco.b-TODOS { background: #7f1d1d; } /* recusado em todos os bancos */
.k-meta:has(.b-TODOS) { flex-wrap: wrap; justify-content: flex-start; } /* no cartão a etiqueta longa desce para a linha de baixo */
.k-card.quente { border-color: #fdba74; box-shadow: inset 3px 0 0 #f97316; }
.btn.quente-on { border-color: #fdba74; color: #c2410c; }
.wa-tela.escuro .etq-quente { background: #3a1d0c; color: #fdba74; border-color: #7c2d12; }
.wa-etapa { height: 30px; font-size: .78rem; padding: 0 8px; border-radius: 8px; max-width: 210px; border-width: 2px; }
.etq-borda-cinza { border-color: #6b7383; } .etq-borda-roxo { border-color: #7c3aed; } .etq-borda-azul { border-color: #1f5fd6; } .etq-borda-preto { border-color: #0a0b0d; }
.etq-borda-laranja { border-color: #ea7a17; } .etq-borda-verde { border-color: #16a34a; } .etq-borda-amarelo { border-color: #eab308; } .etq-borda-vermelho { border-color: #dc2626; }
.quadro.acomp { grid-template-columns: repeat(17, minmax(230px, 1fr)); }
.quadro.acomp .k-col header .etq { margin-bottom: 4px; }
.k-col.alvo { outline: 2px dashed var(--preto); outline-offset: -4px; }
.k-card.arrastando { opacity: .4; }
.k-card.vencido { border-color: #dc2626; box-shadow: inset 3px 0 0 #dc2626; }
.k-sr { font-size: .74rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; display: grid; gap: 2px; }
.k-sr.alerta { color: #b42318; border-color: #f3b8b2; background: #fdf1f0; }
.k-sr.hoje { color: #8a5a00; border-color: #f2d48a; background: #fff8e6; }
.k-mover { height: 28px; font-size: .74rem; padding: 0 6px; border-radius: 7px; margin-top: 4px; }
.acomp-sem_resposta > header { background: #fff8f0; }
.acomp-encerrado > header { background: var(--bg); }

/* CRM do WhatsApp */
.wa-crm { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - 250px); min-height: 480px; border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; background: var(--surface); }
.wa-col-lista { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-height: 0; }
.wa-busca { display: grid; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
.wa-busca .chips { gap: 4px; }
.wa-busca .chipbtn { font-size: .74rem; padding: 4px 9px; }
.wa-lista { overflow-y: auto; flex: 1; }
.wa-item { display: flex; gap: 10px; align-items: center; padding: 11px 12px; text-decoration: none; color: var(--white); border-bottom: 1px solid var(--line); }
.wa-item:hover { background: var(--bg); }
.wa-item.ativo { background: var(--bg); box-shadow: inset 3px 0 0 var(--preto); }
.wa-av { width: 40px; height: 40px; border-radius: 50%; background: var(--preto); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; flex: none; }
.wa-item-meio { min-width: 0; flex: 1; display: grid; gap: 2px; }
.wa-item-topo { display: flex; justify-content: space-between; gap: 8px; }
.wa-item-topo b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .88rem; }
.wa-item-topo small { color: var(--dim); font-size: .72rem; flex: none; }
.wa-item-texto { color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-item-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.wa-item-tags .tag { font-size: .66rem; padding: 0 6px; }
.wa-chat { display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.wa-cab { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.wa-voltar { display: none; }
.wa-alerta { margin: 8px 14px 0; padding: 9px 12px; border-radius: 10px; font-size: .84rem; border: 1px solid rgba(220,38,38,.45); background: rgba(220,38,38,.08); color: #b91c1c; }
.wa-alerta.cinza { border-color: var(--line); background: var(--surface); color: var(--muted, inherit); }
.wa-cadeado { margin: auto; max-width: 420px; padding: 32px 20px; text-align: center; }
.wa-cadeado-icone { font-size: 2.6rem; line-height: 1; margin-bottom: 8px; }
.wa-cadeado h2 { margin: 0 0 10px; }
.wa-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.wa-msg { max-width: min(560px, 78%); padding: 8px 10px 4px; border-radius: 12px; font-size: .9rem; line-height: 1.4; box-shadow: 0 1px 0 rgba(0,0,0,.05); }
.wa-msg.ele { align-self: flex-start; background: var(--surface); border-top-left-radius: 4px; }
.wa-msg.eu { align-self: flex-end; background: #dff5e3; color: #0d1017; border-top-right-radius: 4px; }
.wa-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.wa-hora { font-size: .66rem; color: var(--dim); text-align: right; margin-top: 2px; }
.wa-msg.eu .wa-hora { color: #4f7a5a; }
.wa-img { display: block; max-width: 260px; max-height: 300px; border-radius: 8px; margin-bottom: 4px; background: var(--line); min-height: 60px; }
.wa-arquivo { display: inline-block; margin-bottom: 4px; font-weight: 500; }
.wa-escrever { display: flex; gap: 8px; align-items: flex-end; padding: 10px; background: var(--surface); border-top: 1px solid var(--line); }
.wa-escrever textarea { flex: 1; resize: none; min-height: 42px; max-height: 160px; padding: 10px 12px; border-radius: 10px; font: inherit; }
.wa-vazio { margin: auto; }

/* CRM do WhatsApp — Modelo Grafite (preto e branco), com versão clara e escura (botão no topo da tela).
   Os componentes comuns (botões, campos, chips) dentro do CRM seguem as cores do tema escolhido. */
.wa-tela {
  --wa-bg: #ffffff; --wa-painel: #fafafa; --wa-campo: #f0f0f0; --wa-txt: #0b0b0b; --wa-txt2: #5c5c5c; --wa-txt3: #9a9a9a;
  --wa-linha: #e8e8e8; --wa-ac: #0b0b0b; --wa-onac: #ffffff; --wa-sel: #f0f0f0; --wa-fundo: #f6f6f6;
  --wa-ele: #ffffff; --wa-eu: #0b0b0b; --wa-eut: #ffffff; --wa-eum: #a8a8a8; --wa-rb: #fdecec; --wa-rt: #b42318;
  --bg: var(--wa-campo); --surface: var(--wa-bg); --surface-2: var(--wa-campo); --line: var(--wa-linha); --line-2: #dcdcdc;
  --white: var(--wa-txt); --muted: var(--wa-txt2); --dim: var(--wa-txt3); --blue: var(--wa-ac); --blue-soft: var(--wa-campo); --preto: var(--wa-ac); --ice: var(--wa-txt);
  background: var(--wa-bg); color: var(--wa-txt);
}
.wa-tela.escuro {
  --wa-bg: #0b0b0b; --wa-painel: #121212; --wa-campo: #1c1c1c; --wa-txt: #f4f4f4; --wa-txt2: #a3a3a3; --wa-txt3: #6b6b6b;
  --wa-linha: #232323; --wa-ac: #f4f4f4; --wa-onac: #0b0b0b; --wa-sel: #1c1c1c; --wa-fundo: #0e0e0e;
  --wa-ele: #1c1c1c; --wa-eu: #f4f4f4; --wa-eut: #0b0b0b; --wa-eum: #6b6b6b; --wa-rb: #3a1414; --wa-rt: #ff8a80; --line-2: #2e2e2e;
  color-scheme: dark;
}
.wa-tela .btn.primary { color: var(--wa-onac); }
.wa-tela .btn.primary:hover { opacity: .88; }
/* Tela cheia: sem a margem do sistema; faixa das abas em cima e o WhatsApp até o fim da tela. */
main:has(.wa-tela) { max-width: none; padding: 0; gap: 0; display: block; }
.wa-tela { display: flex; flex-direction: column; height: calc(100dvh - var(--topo, 118px)); }
.wa-faixa { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--wa-painel); border-bottom: 1px solid var(--wa-linha); }
.wa-faixa h1 { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin: 0; letter-spacing: -0.01em; }
.wa-faixa .acoes { margin-left: auto; }
/* Botões dos assistentes de IA (ainda "Em breve"). */
.ia-botoes { display: flex; gap: 6px; margin-left: auto; }
.wa-faixa .ia-botoes + .acoes { margin-left: 0; }
.ia-btn { display: inline-flex; align-items: center; gap: 6px; border-style: dashed; white-space: nowrap; }
.ia-embreve { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: .64rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; background: #ede9fe; color: #6d28d9; }
.ia-embreve.grande { justify-self: start; font-size: .72rem; padding: 3px 10px; }
.wa-tela.escuro .ia-embreve { background: #2e1065; color: #c4b5fd; }
.wa-faixa .seg-abas { background: var(--wa-campo); border-color: transparent; }
.wa-faixa .seg-abas a { color: var(--wa-txt2); }
.wa-faixa .seg-abas a.ativo { background: var(--wa-ac); color: var(--wa-onac); }
.wa-tela > .aviso { margin: 8px 20px 0; }
.wa-tela .wa-crm { flex: 1; height: auto; min-height: 0; border: 0; border-radius: 0; }
@media (max-width: 760px) {
  .wa-faixa { padding: 8px 12px; gap: 10px; flex-wrap: wrap; }
  .wa-faixa h1 { display: none; }
}
.wa-col-lista { background: var(--wa-painel); border-right-color: var(--wa-linha); }
.wa-busca { border-bottom: 0; padding: 14px 14px 10px; }
.wa-busca input { background: var(--wa-campo); border-color: transparent; border-radius: 10px; height: 38px; }
.wa-busca .chipbtn { background: var(--wa-campo); border-color: transparent; color: var(--wa-txt2); }
.wa-busca .chipbtn.ativo { background: var(--wa-ac); color: var(--wa-onac); }
/* Filtros da lista: abas de atendimento lado a lado + lista de situações embaixo. */
.wa-filtros { display: grid; gap: 6px; }
.wa-seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--wa-campo); }
.wa-seg button { flex: 1 1 auto; font: inherit; font-size: .74rem; font-weight: 500; border: 0; background: transparent; color: var(--wa-txt2); padding: 6px 6px;
  border-radius: 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-seg button:hover { color: var(--wa-txt, inherit); }
.wa-seg button.ativo { background: var(--wa-ac); color: var(--wa-onac); font-weight: 600; }
.wa-situacao { height: 34px; font-size: .8rem; background-color: var(--wa-campo); border-color: transparent; border-radius: 10px; color: var(--wa-txt2); }
.wa-situacao.ativo { background-color: var(--wa-ac); color: var(--wa-onac); font-weight: 600; }
.wa-situacao option { background: var(--wa-painel); color: inherit; }
.wa-item { color: var(--wa-txt); border-bottom: 0; border-left: 3px solid transparent; padding: 11px 14px 11px 11px; }
.wa-item:hover { background: var(--wa-sel); }
.wa-item.ativo { background: var(--wa-sel); box-shadow: none; border-left-color: var(--wa-ac); }
.wa-av { background: var(--wa-ac); color: var(--wa-onac); letter-spacing: .02em; }
.wa-av { position: relative; }
.wa-av .ico { width: 20px; height: 20px; }
.wa-av-cadeado { background: #6b7280; color: #fff; }
.wa-av-carro { background: #1f5fd6; color: #fff; }
.wa-av-camera { background: #ea7a17; color: #fff; }
.wa-av-propostas { background: #7c3aed; color: #fff; }
.wa-av-dinheiro { background: #16a34a; color: #fff; }
.wa-av-cifrao { position: absolute; right: -2px; bottom: -2px; width: 17px; height: 17px; border-radius: 50%; background: #16a34a; color: #fff;
  font-size: .68rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--wa-painel, #fff); }
.wa-item-tags .tag { border-radius: 999px; background: var(--wa-campo); color: var(--wa-txt2); }
.wa-tela .wa-nao-lidas { background: var(--wa-ac); color: var(--wa-onac); }
.wa-chat { background: var(--wa-fundo); }
.wa-cab { background: var(--wa-painel); border-bottom-color: var(--wa-linha); padding: 12px 16px; }
.wa-cab .wa-av { width: 38px; height: 38px; }
.wa-msgs { padding: 18px 20px; gap: 8px; }
.wa-msg { box-shadow: none; border-radius: 16px; padding: 8px 12px 5px; }
.wa-msg.ele { background: var(--wa-ele); color: var(--wa-txt); border: 1px solid var(--wa-linha); border-top-left-radius: 5px; }
.wa-msg.eu { background: var(--wa-eu); color: var(--wa-eut); border-top-right-radius: 5px; }
.wa-msg.eu .wa-hora { color: var(--wa-eum); }
.wa-msg.eu a { color: var(--wa-eut); }
.wa-escrever { background: var(--wa-painel); border-top-color: var(--wa-linha); padding: 12px 16px; align-items: center; }
.wa-escrever textarea { background: var(--wa-campo); border-color: transparent; border-radius: 12px; min-height: 42px; }
.wa-alerta { background: var(--wa-rb); color: var(--wa-rt); border-color: transparent; margin: 10px 16px 0; }
.wa-alerta.cinza { background: var(--wa-campo); color: var(--wa-txt2); }
.wa-tela .vazio { border-color: var(--wa-linha); color: var(--wa-txt2); }
.wa-tema { white-space: nowrap; }
.wa-anexar { width: 42px; height: 42px; padding: 0; border-radius: 12px; border-color: transparent; background: var(--wa-campo); color: var(--wa-txt2); flex: none; }
.wa-anexar:hover { color: var(--wa-txt); background: var(--wa-sel); }
.wa-anexar .ico { width: 20px; height: 20px; }
.wa-msg b { font-weight: 700; }
/* Comentários internos (só a equipe vê): amarelo, no meio da conversa */
.wa-tela { --wa-nota-bg: #fff6d6; --wa-nota-borda: #f0d77a; --wa-nota-txt: #5c4500; }
.wa-tela.escuro { --wa-nota-bg: #2b2410; --wa-nota-borda: #5c4a12; --wa-nota-txt: #f3dc8f; }
.wa-nota { align-self: center; width: min(560px, 86%); background: var(--wa-nota-bg); border: 1px dashed var(--wa-nota-borda); color: var(--wa-nota-txt); border-radius: 12px; padding: 8px 12px; font-size: .88rem; line-height: 1.4; }
.wa-nota-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .72rem; opacity: .9; margin-bottom: 3px; }
.wa-nota-apagar { border: 0; background: none; color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.wa-oferta { --wa-nota-bg: #ecfdf3; --wa-nota-borda: #86efac; --wa-nota-txt: #14532d; border-style: solid; }
.wa-tela.escuro .wa-oferta { --wa-nota-bg: #0f2a1b; --wa-nota-borda: #1f5c3a; --wa-nota-txt: #bbf7d0; }
.wa-oferta .wa-texto { white-space: pre-wrap; }
.wa-oferta-acoes { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.wa-oferta-acoes .btn { background: var(--wa-bg); }
.wa-oferta-acoes .btn.primary { background: var(--wa-ac); color: var(--wa-onac); }
.wa-caixa { background: var(--wa-painel); border-top: 1px solid var(--wa-linha); }
.wa-caixa .wa-escrever { border-top: 0; padding-top: 6px; }
.wa-modo { display: flex; gap: 4px; padding: 10px 16px 0; }
.wa-modo button { font: inherit; font-size: .76rem; font-weight: 500; border: 0; background: none; color: var(--wa-txt3); padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.wa-modo button.ativo { background: var(--wa-campo); color: var(--wa-txt); }
.wa-caixa.modo-nota { background: var(--wa-nota-bg); }
.wa-caixa.modo-nota .wa-saudacao { display: none; }
.wa-saudacao { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 16px 0; padding: 7px 12px; border-radius: 10px; background: var(--wa-campo); color: var(--wa-txt2); font-size: .8rem; }
.wa-saudacao b { color: var(--wa-txt); }
.wa-caixa.modo-saudacao textarea { min-height: 120px; color: var(--wa-txt); cursor: default; border: 1px solid var(--wa-ac); }
.assin-previa .wa-texto { white-space: pre-wrap; }
.wa-caixa.modo-nota .wa-escrever { background: transparent; }
.wa-caixa.modo-nota textarea { background: var(--wa-bg); border: 1px dashed var(--wa-nota-borda); }
.wa-caixa.modo-nota .wa-modo button.ativo { background: var(--wa-nota-borda); color: var(--wa-nota-txt); }
/* Prévia da assinatura no cadastro de usuário */
.assin-previa { display: grid; gap: 6px; margin-top: 8px; justify-items: start; }
.assin-previa small { color: var(--muted); font-size: .74rem; }
.assin-previa .wa-msg.eu { background: #0b0b0b; color: #fff; border-radius: 16px; border-top-right-radius: 5px; padding: 8px 12px; max-width: 420px; }
/* Impressão da conversa do WhatsApp: só a folha aparece no papel */
.impressao { display: none; }
@media print {
  body.imprimindo > *:not(.impressao) { display: none !important; }
  body.imprimindo { background: #fff; color: #000; }
  body.imprimindo .impressao { display: block; font-family: var(--body); font-size: 11pt; color: #000; }
  .imp-cab { display: flex; gap: 16px; align-items: center; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 14px; }
  .imp-logo { height: 36px; background: #000; padding: 6px 10px; border-radius: 6px; }
  .imp-cab h1 { font-size: 15pt; margin: 0 0 4px; }
  .imp-cab p { margin: 0; font-size: 9pt; color: #444; }
  .imp-msg { border: 1px solid #ccc; border-radius: 8px; padding: 6px 10px; margin: 0 0 6px; max-width: 80%; break-inside: avoid; }
  .imp-msg.eu { margin-left: auto; background: #f2f2f2; }
  .imp-msg.nota { max-width: 100%; border-style: dashed; background: #fff8dc; }
  .imp-quem { font-size: 8pt; color: #555; margin-bottom: 2px; }
  .imp-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
  .imp-midia { font-style: italic; color: #555; }
  .imp-img { display: block; max-width: 240px; max-height: 240px; margin: 4px 0; }
}
/* Chamado técnico */
.chamados { display: grid; gap: 10px; }
.chamado { border: 1px solid var(--line); border-left: 4px solid var(--line-2); border-radius: 0; padding: 12px 14px; display: grid; gap: 8px; background: var(--surface); }
.chamado.av-valido { border-left-color: #16a34a; } .chamado.av-realizado { border-left-color: #1f5fd6; }
.av-btn.av-realizado.ativo { background: #1f5fd6; border-color: #1f5fd6; color: #fff; } .chamado.av-nem_tanto { border-left-color: #eab308; } .chamado.av-impossivel { border-left-color: #9ca3af; }
.chamado-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chamado-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.chamado-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.tag.tipo-erro { background: #fdecec; color: #b42318; } .tag.tipo-melhoria { background: #e8f1fd; color: #1a4fb3; } .tag.tipo-ideia { background: #f3ecfd; color: #6d28d9; }
.av-btn.av-valido.ativo { background: #16a34a; border-color: #16a34a; color: #fff; }
.av-btn.av-nem_tanto.ativo { background: #eab308; border-color: #eab308; color: #1c1600; }
.av-btn.av-impossivel.ativo { background: #6b7280; border-color: #6b7280; color: #fff; }
/* Biblioteca de modelos de mensagem */
/* Modelos de mensagem: cartões clicáveis em grade, busca no topo, editar/apagar como ícones no canto. */
.modal .panel.modelos-painel { max-width: 760px; width: min(760px, 100%); }
.modelos-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modelos-topo h2 { margin: 0; }
.modelos-busca { width: 100%; height: 40px; border-radius: 12px; }
.modelos-corpo { display: grid; gap: 14px; max-height: 60vh; overflow-y: auto; padding: 2px 2px 4px; margin: 0 -2px; }
.modelos-grupo { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.modelos-qtd { font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); letter-spacing: 0; }
.modelos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.modelo-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 10px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s, transform .15s; min-height: 130px; }
.modelo-card:hover, .modelo-card:focus-visible { border-color: var(--preto); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); transform: translateY(-1px); outline: none; }
.modelo-card-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.modelo-card-topo b { font-size: .92rem; line-height: 1.25; }
.modelo-icos { display: flex; gap: 2px; flex: none; opacity: .55; transition: opacity .15s; }
.modelo-card:hover .modelo-icos, .modelo-card:focus-within .modelo-icos { opacity: 1; }
.modelo-ico { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-size: .9rem; color: var(--muted); display: grid; place-items: center; }
.modelo-ico:hover { background: var(--surface-2); color: var(--white); }
.modelo-ico.perigo:hover { background: #fee2e2; color: #b91c1c; }
.modelo-card-texto { flex: 1; font-size: .8rem; line-height: 1.45; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.modelo-card-usar { align-self: flex-end; font-size: .72rem; font-weight: 600; color: var(--muted); opacity: 0; transition: opacity .15s; }
.modelo-card:hover .modelo-card-usar, .modelo-card:focus-visible .modelo-card-usar { opacity: 1; color: var(--white); }
.modelos-vazio { width: 100%; display: grid; gap: 4px; place-items: center; padding: 22px 16px; border: 1.5px dashed var(--line-2, var(--line)); border-radius: 14px;
  background: transparent; cursor: pointer; font: inherit; color: var(--muted); }
.modelos-vazio b { color: var(--white); }
.modelos-vazio:hover { border-color: var(--preto); }
@media (max-width: 760px) { .modelos-grade { grid-template-columns: 1fr; } .modelo-card { min-height: 0; } .modelo-icos { opacity: 1; } .modelo-card-usar { display: none; } }
label.check { display: flex; align-items: center; gap: 8px; white-space: normal; color: var(--white); font-size: .86rem; }
label.check input { width: auto; height: auto; }
@media (max-width: 860px) {
  .wa-crm { grid-template-columns: 1fr; height: calc(100vh - 200px); }
  .wa-crm.com-chat .wa-col-lista { display: none; }
  .wa-crm:not(.com-chat) .wa-chat { display: none; }
  .wa-voltar { display: inline-flex; }
}

/* Link para o cliente informar a conta */
.link-conta { margin-top: 14px; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; background: var(--bg); }
.link-url { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.link-url code { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; font-size: .78rem; padding: 6px 8px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
/* Custos */
.custos-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.barras-h { display: grid; gap: 12px; }
.bh-rot { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; }
.bh-trilho { height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; margin: 5px 0 2px; }
.bh-trilho i { display: block; height: 100%; background: var(--preto); border-radius: 99px; }
.barras-h small { font-size: .72rem; color: var(--muted); }
.barras-v { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 190px; }
.barras-v > div { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; height: 100%; text-align: center; }
.barras-v small { font-size: .7rem; color: var(--muted); }
.barras-v span { font-size: .74rem; color: var(--muted); text-transform: capitalize; }
.bv-trilho { position: relative; background: var(--bg); border-radius: 8px; overflow: hidden; }
.bv-trilho i { position: absolute; left: 0; right: 0; bottom: 0; background: #b9bec8; border-radius: 8px 8px 0 0; }
.barras-v .atual .bv-trilho i { background: var(--preto); }
.barras-v .atual span { color: var(--white); font-weight: 600; }
/* Quadro (kanban) de leads */
.k-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.k-espera { flex: none; font-size: .72rem; color: var(--muted); padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
main:has(.quadro) { max-width: 1720px; padding-bottom: 0; }
/* Quadro numa linha só (qualquer número de colunas), do tamanho da tela: cada coluna rola sozinha e a barra
   de rolagem para o lado fica sempre à vista, embaixo do quadro. */
.quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(225px, 1fr); gap: 14px; overflow-x: auto; overflow-y: hidden;
  padding-bottom: 8px; align-items: stretch; height: calc(100dvh - var(--quadro-topo, 230px)); min-height: 420px;
  scroll-behavior: smooth; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.quadro > .k-col { scroll-snap-align: start; min-height: 0; }
.quadro > .k-col > .k-lista { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; scrollbar-width: thin; }
.quadro::-webkit-scrollbar { height: 10px; } .quadro::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 999px; }
.k-col.destaque { outline: 2px solid var(--preto); outline-offset: -2px; transition: outline-color .6s; }
.k-col { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; min-width: 0; }
.k-col > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 14px 14px 10px; border-bottom: 1px solid var(--line); }
.k-col h2 { font-family: var(--display); font-size: .95rem; margin: 0 0 2px; }
.k-col header .dica { font-size: .72rem; }
.k-total { font-family: var(--display); font-size: .85rem; padding: 2px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.k-analise > header { border-bottom: 2px solid var(--preto); }
/* Faixa acima do quadro de leads: total pré-aprovado (verde) + Pré-aprovados e Em negociação (clicáveis, levam à coluna). */
.k-resumo { display: flex; align-items: stretch; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.k-resumo-total, .k-resumo-parte { display: grid; align-content: center; gap: 1px; padding: 8px 14px; border-radius: 12px; text-align: left; }
.k-resumo-total { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; min-width: 220px; }
.k-resumo-parte { font: inherit; background: var(--surface); border: 1px solid var(--line); color: inherit; cursor: pointer; min-width: 160px; }
.k-resumo-parte:hover { border-color: var(--dim); }
.k-resumo span { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.k-resumo-total b { font-family: var(--display); font-size: 1.3rem; line-height: 1.15; }
.k-resumo-parte b { font-family: var(--display); font-size: 1rem; line-height: 1.2; }
.k-resumo small { font-size: .72rem; opacity: .75; }
@media (max-width: 760px) { .k-resumo { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .k-resumo > * { flex: none; } }
.k-lista { display: grid; gap: 6px; padding: 8px; align-content: start; }
.k-card { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 3px; cursor: pointer; }
.k-card:hover { border-color: var(--dim); }
.k-card.meu { border-color: var(--preto); box-shadow: inset 3px 0 0 var(--preto); }
/* Motor de crédito: lead de outro operador (só o master vê) fica apagado, com cadeado. */
.k-card.travado { opacity: .72; border-style: dashed; }
.k-card.travado:hover { opacity: 1; }
.k-nome { font-weight: 600; font-size: .88rem; }
.k-sub, .k-motivo { font-size: .78rem; color: var(--muted); }
.k-motivo { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Cartão da Defesa do banco: banco que recusou numa linha e o argumento da defesa numa caixinha à parte. */
.k-defesa-banco { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--muted); }
.k-defesa-motivo { display: grid; gap: 2px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); font-size: .78rem; line-height: 1.35; }
.k-defesa-motivo b { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.k-defesa-motivo span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.k-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .76rem; color: var(--muted); }
.k-op { font-weight: 600; color: var(--white); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.k-op.meu { background: var(--preto); color: #fff; border-color: var(--preto); }
.k-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
/* Celular: o título rola para cima e o quadro ocupa quase a tela inteira (uma coluna por vez, encaixando). */
@media (max-width: 760px) { .quadro { grid-auto-columns: 84vw; scroll-snap-type: x mandatory; height: calc(100dvh - 76px); min-height: 360px; } }
.instrucoes { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.instrucoes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.instrucoes-grid textarea { width: 100%; resize: vertical; }
.instrucoes-grid .btn.sm { margin-top: 6px; }
table.condicoes td { padding: 4px 6px 4px 0; border: 0; }
table.condicoes select, table.condicoes input { min-width: 90px; }
.conds { display: grid; gap: 6px; }
.conds > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; white-space: nowrap; }
td b { font-weight: 600; }

/* Documentos anexados na proposta */
.docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.doc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--white); text-decoration: none; min-width: 0; }
a.doc:hover { border-color: var(--blue); background: var(--blue-soft); }
.doc span:last-child { display: grid; gap: 2px; min-width: 0; }
.doc b { font-size: .86rem; font-weight: 600; }
.doc small { font-size: .74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-ico { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; background: var(--preto); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .04em; flex: none; }
.vazio-doc .doc-ico { background: var(--surface-2); color: var(--dim); }
.vazio-doc { border-style: dashed; color: var(--dim); }
.vazio-doc b { color: var(--muted); }
@media (max-width: 760px) { .docs { grid-template-columns: 1fr; } }

.links-cliente { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 8px; }

/* WhatsApp de avisos */
.wa { display: grid; gap: 18px; }
.wa-status { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: .9rem; }
.wa-qr { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.wa-qr img { border-radius: 12px; border: 1px solid var(--line-2); background: #fff; padding: 8px; }
.wa-qr ol { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--muted); max-width: 360px; }
.wa-teste { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 16px; border-top: 1px solid var(--line); }
.wa-teste input { max-width: 220px; }
.wa-teste label { white-space: nowrap; }

/* Meta do mês no topo */
.meta-topo { display: grid; gap: 3px; min-width: 190px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 10px; text-decoration: none; color: var(--muted); background: var(--bg); }
.meta-topo:empty { display: none; }
.meta-topo:hover { border-color: var(--blue); }
.topbar .meta-topo { background: #000; border-color: #2a2a2a; }
.topbar .meta-topo:hover { border-color: #8a8a8a; }
.topbar .mt-val em { color: #fff; }
.topbar .mt-barra { background: #262626; }
.topbar .mt-barra i { background: #fff; }
.mt-rot { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.mt-val { font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mt-val b { color: var(--white); font-weight: 600; }
.mt-val em { font-style: normal; color: var(--ice); margin-left: 8px; font-weight: 600; }
.mt-barra { height: 4px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.mt-barra i { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
@media (max-width: 1100px) { .meta-topo { min-width: 0; } .mt-rot { display: none; } }
@media (max-width: 760px) { .meta-topo { order: -1; } }

/* Filtros: seletor de mês e canceladas */
.filtros select.sel-mes { width: auto; min-width: 190px; }
.chipbtn.oculto { border-style: dashed; }

/* Painel de metas */
.mes-nav { display: flex; align-items: center; gap: 10px; }
.mes-nav strong { min-width: 170px; text-align: center; font-family: var(--display); }
.kpis2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 18px; }
.kpis2 > div { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.kpis2 span { font-size: .76rem; color: var(--muted); }
.kpis2 strong { font-family: var(--display); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.kpis2 strong.azul { color: var(--blue); }
.kpis2 small { font-size: .74rem; color: var(--dim); }
.meta-barra { position: relative; height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.meta-barra i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 99px; }
.meta-barra i.ap { background: rgba(74,140,255,.28); }
.meta-barra i.pg { background: var(--blue); }
.meta-linha { display: grid; grid-template-columns: 140px minmax(0, 1fr) 220px; gap: 16px; align-items: center; }
.meta-linha .nome { font-weight: 600; font-size: .88rem; }
.meta-linha .num { text-align: right; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.meta-linha .num b { color: var(--white); }
.meta-linha .num em { font-style: normal; margin-left: 8px; color: var(--ice); }
@media (max-width: 640px) {
  .meta-linha { grid-template-columns: 1fr; gap: 6px; }
  .meta-linha .num { text-align: left; }
}

/* Modal e toast */
/* Janela (sub tela): se for mais alta que a tela, o fundo rola e a janela aparece inteira, do título ao botão de salvar.
   Os botões do fim ficam presos embaixo enquanto se rola, para "Salvar" estar sempre à mão. */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; align-items: start; justify-items: center; padding: 16px;
  z-index: 50; overflow-y: auto; overscroll-behavior: contain; }
.modal .panel { max-width: 420px; width: 100%; display: grid; gap: 14px; margin-block: auto; }
.modal .panel.largo { max-width: 620px; }
/* Ligar a conversa do WhatsApp a um lead: lista de leads com o botão Ligar. */
.ll-lista { display: grid; gap: 6px; max-height: min(52vh, 460px); overflow-y: auto; overscroll-behavior: contain; }
.ll-item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.ll-item.atual { border-color: var(--preto); background: var(--surface-2); }
.btn.ligado { border-color: #16a34a; color: #15803d; }
@media (max-width: 760px) { .ll-item { grid-template-columns: 1fr auto; } .ll-item .st { grid-column: 1; justify-self: start; } }
/* (a classe é posta pelo modal() no app.js, no bloco que contém os últimos botões) */
.modal .barra-fixa { position: sticky; bottom: -16px; z-index: 1; background: var(--surface); padding: 10px 0 16px; margin-bottom: -16px;
  box-shadow: 0 -12px 12px -12px rgba(0,0,0,.18); }
.codigo-grande { font-family: var(--display); font-size: 2rem; font-weight: 800; letter-spacing: .25em; text-align: center; padding: 16px; border-radius: 10px; background: var(--bg); border: 1px dashed var(--blue); color: var(--white); }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); }
#toast div { background: var(--preto); color: #f3f5f9; border: 1px solid #000; border-radius: 10px; padding: 12px 16px; font-size: .86rem; box-shadow: 0 12px 32px rgba(10,11,13,.25); }
#toast div.err { border-color: rgba(240,106,122,.5); }
#toast div.ok { border-color: rgba(60,207,145,.5); }

/* ---------- WhatsApp e CRM Aprovados no celular ----------
   O computador fica como está; abaixo de 760px a tela vira um app: nada passa da largura (a página não "escorrega"),
   campos com 16px (o iPhone não dá zoom ao tocar), conversa aberta em tela cheia e botões guardados no "⋯". */
.wa-mais { display: none; }
@media (max-width: 760px) {
  .wa-tela { overflow: hidden; }
  .wa-tela input, .wa-tela textarea, .wa-tela select { font-size: 16px; }
  /* Faixa de abas: rola para o lado dentro dela, sem alargar a página. */
  .wa-faixa { flex-wrap: nowrap; gap: 8px; padding: 8px 10px; min-width: 0; }
  .wa-faixa .seg-abas { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .wa-faixa .seg-abas::-webkit-scrollbar { display: none; }
  .wa-faixa .seg-abas a { white-space: nowrap; padding: 7px 12px; font-size: .82rem; flex: none; }
  .wa-faixa .acoes { flex: none; margin: 0; }
  /* Celular: os botões de IA descem para uma linha própria, rolando para o lado. */
  .wa-faixa:has(.ia-botoes) { flex-wrap: wrap; }
  .wa-faixa:has(.ia-botoes) .seg-abas { flex-basis: 0; }
  .wa-faixa .ia-botoes { order: 3; flex: 1 0 100%; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .wa-faixa .ia-botoes::-webkit-scrollbar { display: none; }
  .ia-btn { flex: none; font-size: .78rem; }
  .wa-tema { padding: 6px 10px; }
  .wa-tema-txt { display: none; }
  .wa-aviso-topo .aviso { margin: 6px 10px 0; padding: 8px 10px; font-size: .78rem; }
  /* Lista: busca e filtros numa linha que rola para o lado. */
  .wa-busca { padding: 10px; gap: 8px; }
  .wa-busca .btn { white-space: nowrap; }
  .wa-busca .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .wa-busca .chips::-webkit-scrollbar { display: none; }
  .wa-busca .chipbtn { flex: none; white-space: nowrap; }
  .wa-item { padding: 10px 12px 10px 9px; }
  /* Conversa aberta: tela cheia (sem abas nem aviso), como no app do WhatsApp. */
  .wa-tela.com-chat .wa-faixa, .wa-tela.com-chat .wa-aviso-topo { display: none; }
  .wa-cab { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .wa-cab .wa-av { width: 34px; height: 34px; }
  .wa-cab-nome { flex: 1 1 0; }
  .wa-cab-nome > b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wa-cab-nome .dica { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .72rem; }
  .wa-cab-nome .etq { display: none; }
  .wa-mais { display: inline-flex; font-size: 1.2rem; line-height: 1; padding: 4px 12px; margin-left: auto; }
  .wa-cab > .acoes { display: none; }
  .wa-cab.aberto > .acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex-basis: 100%; margin: 2px 0 0 !important; }
  .wa-cab.aberto > .acoes > * { width: 100%; justify-content: center; }
  .wa-cab.aberto > .acoes .wa-etapa { grid-column: 1 / -1; max-width: none; height: 38px; }
  .wa-alerta { margin: 6px 10px 0; font-size: .78rem; }
  .wa-msgs { padding: 12px 10px; }
  .wa-msg { max-width: 86%; }
  .wa-nota { width: 100%; }
  .wa-img { max-width: 200px; }
  /* Caixa de escrever compacta. */
  .wa-modo { padding: 6px 10px 0; }
  .wa-saudacao { margin: 6px 10px 0; padding: 6px 10px; font-size: .74rem; }
  .wa-escrever { padding: 8px 10px; gap: 6px; }
  .wa-escrever textarea { min-height: 40px; }
  .wa-caixa.modo-saudacao textarea { min-height: 72px; max-height: 120px; }
  .wa-anexar { width: 38px; height: 38px; }
  .wa-escrever .btn.primary { padding: 9px 12px; }
}

/* ---------- WhatsApp: tracinhos, áudio, separador de dia e gravação ---------- */
.wa-recibo { margin-left: 4px; font-size: .72rem; letter-spacing: -.12em; font-weight: 700; }
.wa-recibo.lida { color: #34b7f1; }
.wa-recibo.enviando { letter-spacing: 0; font-weight: 400; }
.wa-msg.eu .wa-recibo:not(.lida) { color: var(--wa-eum); }
.wa-audio { display: block; width: 260px; max-width: 100%; height: 40px; margin: 2px 0; }
.wa-dia { align-self: center; margin: 8px 0 2px; }
.wa-dia span { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--wa-campo); color: var(--wa-txt2); font-size: .72rem; font-weight: 600; }
.wa-dia span::first-letter { text-transform: uppercase; }
.wa-gravando { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--wa-painel); border-top: 1px solid var(--wa-linha); }
.wa-gravando .btn.primary { margin-left: auto; }
.wa-rec-ponto { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: rec-pisca 1s infinite; flex: none; }
.wa-rec-tempo { font-variant-numeric: tabular-nums; min-width: 38px; }
@keyframes rec-pisca { 50% { opacity: .25; } }

/* ---------- IA Pré-aprovados (Zoe) ---------- */
.ia-embreve.ligada { background: #dcfce7; color: #166534; }
.wa-tela.escuro .ia-embreve.ligada { background: #14532d; color: #bbf7d0; }
.f.ia-liga { display: flex; flex-direction: row; align-items: center; gap: 10px; cursor: pointer; font-size: .86rem; align-self: center; }
.f.ia-liga span, .f.ia-liga b { white-space: normal; line-height: 1.3; }
.ia-liga input { width: 18px; height: 18px; flex: none; margin: 0; }
.ia-liga.destaque { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.ia-teste { display: grid; gap: 8px; padding: 12px; border: 1px dashed #c4b5fd; border-radius: 12px; background: #f5f3ff; }
.ia-teste-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ia-teste-linha input { width: 180px; }
.ia-teste-linha span { flex: 1 1 220px; font-size: .84rem; }
.ia-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ia-numeros > div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.ia-numeros b { font-family: var(--display); font-size: 1.4rem; line-height: 1.1; }
.ia-numeros span { font-size: .72rem; color: var(--muted); }
.ia-lista { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; }
.ia-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: inherit; }
.ia-item:hover { background: var(--bg); }
.ia-item small { grid-column: 1 / -1; color: var(--muted); font-size: .74rem; }
.ia-est { font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--bg); align-self: center; }
.ia-est.ativa { background: #ede9fe; color: #5b21b6; }
.ia-est.transferida { background: #dcfce7; color: #166534; }
.ia-est.sem_resposta { background: #fef3c7; color: #92400e; }
.tag.tag-zoe { background: #ede9fe; color: #5b21b6; }
.wa-alerta.zoe { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #ede9fe; color: #5b21b6; }
.wa-tela.escuro .wa-alerta.zoe { background: #2e1065; color: #ddd6fe; }
@media (max-width: 760px) { .ia-numeros { grid-template-columns: repeat(2, 1fr); } }

/* ---------- CRM Aprovados: modelos de tela em teste (Ficha ao lado, Barra de venda, Fila de vendas) ---------- */
.wa-tela { --venda-bg: #ecfdf5; --venda-borda: #a7f3d0; --venda-txt: #065f46; --venda-valor: #047857; }
.wa-tela.escuro { --venda-bg: #0f2a1b; --venda-borda: #1f5c3a; --venda-txt: #bbf7d0; --venda-valor: #6ee7b7; }
.wa-modelo { width: auto; height: 32px; font-size: .78rem; font-weight: 600; border-radius: 10px; background-color: var(--wa-campo); border-color: transparent; color: var(--wa-txt); }
.wa-modelo option { background: var(--wa-painel); }
.wa-faixa > .ia-botoes { min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; }
.wa-faixa > .acoes { flex: none; }
/* Lista: valor aprovado e tempo de espera */
/* CRM Aprovados: etiquetas dos bancos ao lado do nome e linha de filtros (situação + banco) */
.wa-item-meio { grid-template-columns: minmax(0, 1fr); }
.wa-item-nome { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.wa-item-nome > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wa-item-bancos { display: inline-flex; gap: 3px; flex: none; }
.etq.chip-banco { font-size: .6rem; padding: 1px 6px; line-height: 1.4; }
.wa-filtros-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wa-filtros-linha select { min-width: 0; }
.wa-item-valor { display: flex; align-items: baseline; gap: 6px; font-size: .76rem; color: var(--wa-txt2); min-width: 0; }
.wa-item-valor b { color: var(--venda-valor); font-size: .86rem; }
.wa-espera { margin-left: auto; flex: none; font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--wa-campo); color: var(--wa-txt2); }
.wa-espera.atencao { background: #fef3c7; color: #92400e; }
.wa-espera.alerta { background: #fee2e2; color: #b91c1c; }
.wa-secao { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 6px; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--wa-txt3); position: sticky; top: 0; background: var(--wa-painel); z-index: 1; }
.wa-secao b { font-size: .72rem; color: var(--wa-txt2); }
/* Topo da conversa: menu "Mais ações" */
.wa-acoes-menu { position: relative; }
.wa-acoes-menu > summary { list-style: none; cursor: pointer; }
.wa-acoes-menu > summary::-webkit-details-marker { display: none; }
.wa-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; gap: 2px; min-width: 220px; padding: 6px;
  background: var(--wa-bg); border: 1px solid var(--wa-linha); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .16); }
.wa-menu > .btn { justify-content: flex-start; width: 100%; border-color: transparent; background: transparent; color: var(--wa-txt); text-align: left; }
.wa-menu > .btn:hover { background: var(--wa-sel); }
.wa-menu > .wa-menu-perigo { color: #b91c1c; }
.wa-tela.escuro .wa-menu > .wa-menu-perigo { color: #ff8a80; }
/* Modelo 1: ficha de venda na coluna da direita */
.wa-crm.m-ficha.com-chat { grid-template-columns: 320px minmax(0, 1fr) 320px; }
.m-ficha .wa-barra-venda { display: none; }
.wa-ficha { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; padding: 16px; background: var(--wa-painel); border-left: 1px solid var(--wa-linha); }
.wa-ficha-rotulo { display: block; margin-bottom: 6px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--wa-txt3); }
.wa-ficha-sit b { font-size: .95rem; }
.wa-ficha-valor { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--venda-bg); border: 1px solid var(--venda-borda); color: var(--venda-txt); }
.wa-ficha-valor span { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.wa-ficha-valor b { font-family: var(--display); font-size: 1.7rem; line-height: 1.1; }
.wa-ficha-valor small { font-size: .78rem; opacity: .85; }
.wa-ficha-passo .btn { width: 100%; justify-content: center; height: 42px; font-size: .9rem; }
.wa-cond { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--wa-linha); border-radius: 12px; background: var(--wa-bg); color: var(--wa-txt); }
.wa-cond-topo { display: flex; justify-content: space-between; gap: 8px; font-size: .86rem; }
.wa-cond-topo span { font-weight: 700; color: var(--venda-valor); }
.wa-cond-texto { margin-top: 4px; max-height: 120px; overflow-y: auto; font-size: .78rem; line-height: 1.4; color: var(--wa-txt2); white-space: pre-wrap; }
.wa-cond .wa-oferta-acoes { margin-top: 8px; }
.wa-ficha-dados > div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: .82rem; border-bottom: 1px dashed var(--wa-linha); }
.wa-ficha-dados > div span { color: var(--wa-txt2); }
.wa-ficha-dados > div b { font-weight: 600; text-align: right; }
/* Modelos 2 e 3: barra de venda acima das mensagens */
.wa-barra-venda { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 16px; background: var(--venda-bg); border-bottom: 1px solid var(--venda-borda); color: var(--venda-txt); }
.wa-bv-valor { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.wa-bv-valor span { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.wa-bv-valor b { font-family: var(--display); font-size: 1.3rem; line-height: 1.1; }
.wa-bv-valor small { font-size: .78rem; opacity: .85; }
.wa-bv-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.wa-bv-acoes .btn:not(.primary) { background: var(--wa-bg); }
.wa-bv-lista { display: none; flex-basis: 100%; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; max-height: 280px; overflow-y: auto; }
.wa-barra-venda.aberta .wa-bv-lista { display: grid; }
.wa-bv-lista .wa-cond { margin: 0; }
@media (max-width: 1240px) { .wa-crm.m-ficha.com-chat { grid-template-columns: 280px minmax(0, 1fr) 280px; } }
@media (max-width: 760px) {
  .wa-crm.m-ficha.com-chat { grid-template-columns: 1fr; }
  .wa-ficha { display: none; }
  .m-ficha .wa-barra-venda { display: flex; }
  .wa-barra-venda { padding: 8px 10px; }
  .wa-bv-acoes { margin-left: 0; }
  .wa-menu { position: fixed; left: 10px; right: 10px; top: auto; bottom: 10px; }
}

/* ---------- Painel da Zoe e Funil de conversão ---------- */
.fin-corpo > div { min-width: 0; }
.fn-lista { display: grid; gap: 8px; }
.fn-linha { display: grid; grid-template-columns: minmax(170px, 260px) 1fr 44px 44px; align-items: center; gap: 12px; font-size: .88rem; }
.fn-linha b { text-align: right; } .fn-linha small { color: var(--muted); text-align: right; }
.fn-funil { display: grid; gap: 10px; }
.fn-etapa { display: grid; grid-template-columns: minmax(180px, 260px) 1fr 52px; align-items: center; gap: 12px; }
.fn-etapa-rotulo { display: grid; } .fn-etapa-rotulo small { color: var(--muted); font-size: .74rem; }
.fn-etapa-barra { height: 30px; border-radius: 8px; background: var(--surface-2, #f3f4f6); overflow: hidden; }
.fn-etapa-barra i { display: flex; align-items: center; height: 100%; min-width: 28px; background: linear-gradient(90deg, #10b981, #059669); border-radius: 8px; }
.fn-etapa-barra i span { color: #fff; font-weight: 700; font-size: .82rem; padding: 0 10px; }
.fn-etapa:last-child .fn-etapa-barra i { background: var(--preto); }
.fn-etapa-pct { font-weight: 700; text-align: right; }
.fn-meses { display: flex; gap: 14px; align-items: flex-end; height: 140px; padding: 8px 0; }
.fn-mes { flex: 1; display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; gap: 4px; }
.fn-mes-barras { display: flex; gap: 3px; align-items: flex-end; justify-content: center; height: 100%; }
.fn-mes-barras i { width: 14px; border-radius: 4px 4px 0 0; min-height: 2px; }
.fn-mes small { color: var(--muted); font-size: .72rem; text-transform: capitalize; }
.fn-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: .76rem; color: var(--muted); margin-top: 6px; }
.fn-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.fn-selo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.fn-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fn-erros td { white-space: normal; } .fn-erros tr.grave td { background: #fef2f2; }
@media (max-width: 760px) {
  .fn-linha, .fn-etapa { grid-template-columns: 1fr 52px; }
  .fn-linha .pn-barra, .fn-etapa-barra { grid-column: 1 / -1; grid-row: 2; }
  .fn-linha small { display: none; }
}

/* ---------- Bruna (IA Leads) ---------- */
.ia-est.br-ativa { background: #ede9fe; color: #5b21b6; }
.ia-est.br-analise { background: #e0f2fe; color: #075985; }
.ia-est.br-humano { background: #dcfce7; color: #166534; }
.ia-est.br-sem_resposta, .ia-est.br-nao_elegivel { background: #fef3c7; color: #92400e; }




/* ---------- Integrações ---------- */
.in-grade { display: grid; gap: 16px; }
.in-bloco { display: grid; gap: 14px; }
.in-bloco h2 { margin: 0; font-size: 1.05rem; }
.in-ia { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.in-escopos { display: grid; gap: 6px; }
.in-escopos label.check { white-space: normal; }
.in-linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.in-token { flex: 1; min-width: 240px; font-family: ui-monospace, monospace; font-size: .85rem; }
.in-novo { display: grid; gap: 8px; }
.in-revogado td { opacity: .55; }
.in-segredo code { padding: 6px 10px; border-radius: 8px; background: var(--surface-2, #f3f4f6); word-break: break-all; }
@media (max-width: 760px) { .in-ia { flex-direction: column; align-items: stretch; } }

/* ---------- Celular (≤ 760px): ajustes gerais de 11/2026. O computador não muda. ---------- */
@media (max-width: 760px) {
  /* iPhone não dá zoom ao tocar no campo (precisa de 16px) e toques maiores */
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
  .btn, button.btn, a.btn { min-height: 40px; }
  .btn.sm { min-height: 36px; }
  main { padding-left: 12px !important; padding-right: 12px !important; min-width: 0; max-width: 100vw; }
  main > *, .titulo, .titulo > * { min-width: 0; max-width: 100%; }
  .seg-abas { max-width: 100%; }
  .titulo h1 { font-size: 1.45rem; }
  .panel { padding: 16px; }

  /* Linhas de botões/abas/filtros que estouravam a largura: rolam para o lado */
  .seg-abas, .chips, .fin-menu { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .seg-abas::-webkit-scrollbar, .chips::-webkit-scrollbar, .fin-menu::-webkit-scrollbar { display: none; }
  .seg-abas > *, .chips > * { flex: none; white-space: nowrap; }
  .filtros { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filtros > * { width: 100% !important; min-width: 0 !important; max-width: none !important; }
  .filtros > input { grid-column: 1 / -1; order: -1; }
  .filtros > :only-child { grid-column: 1 / -1; }

  /* Meta no topo: só o valor e a barra */
  .topbar .meta-topo { max-width: 46vw; padding: 6px 10px; }

  /* Tabelas viram cartões (rótulo de cada coluna vem do cabeçalho) */
  table[data-rotulada] thead { display: none; }
  table[data-rotulada], table[data-rotulada] tbody { display: block; width: 100%; }
  table[data-rotulada] tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface, #fff); }
  table[data-rotulada] td { display: block; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; min-width: 0; text-align: left !important; font-size: .9rem; }
  table[data-rotulada] td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 2px; }
  table[data-rotulada] td:first-child { grid-column: 1 / -1; font-weight: 700; font-size: 1rem; }
  table[data-rotulada] td:first-child::before { display: none; }
  table[data-rotulada] td[colspan] { grid-column: 1 / -1; }
  table[data-rotulada] td input, table[data-rotulada] td select { max-width: none !important; width: 100%; }
  table[data-rotulada] td:empty { display: none; }
  table[data-rotulada] td:has(> button, > .btn, > .acoes) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 4px; }
  table[data-rotulada] td:has(> button, > .btn, > .acoes)::before { flex-basis: 100%; }
  table[data-rotulada] td > .acoes { display: flex; flex-wrap: wrap; gap: 8px; }
  .scroll:has(> table[data-rotulada]) { overflow: visible; }

  /* Dados da proposta e do lead em duas colunas (mais compacto) */
  dl.dados { grid-template-columns: 1fr 1fr; gap: 12px 14px; }

  /* Painéis do financeiro e gráficos */
  .fn-meses { height: 120px; gap: 6px; }
  .fn-mes-barras i { width: 9px; }
  .pn-kpi b { font-size: 1.2rem; }
  .pn-kpis { gap: 8px; }

  /* Quadro de leads e acompanhamento: colunas ocupam quase a tela toda e rolam para o lado.
     O dedo em cima de um cartão rola a coluna e, no fim dela, continua rolando a página (antes "travava"). */
  .k-resumo { margin-bottom: 4px; }
  .quadro > .k-col > .k-lista, .ll-lista { overscroll-behavior: auto; }
  .quadro { height: calc(100dvh - 120px); }

  /* WhatsApp: com a lista aberta a página rola normal (a lista ficava numa caixinha de 260px);
     com uma conversa aberta continua em tela cheia, como no app. */
  .wa-tela:not(.com-chat) { height: auto; overflow: visible; }
  .wa-tela:not(.com-chat) .wa-crm, .wa-tela:not(.com-chat) .wa-col-lista { height: auto; min-height: 0; overflow: visible; }
  .wa-tela:not(.com-chat) .wa-lista { overflow: visible; flex: none; }

  /* Modais ocupam a tela toda */
  .modal { padding: 0; }
  .modal .panel, .modal .panel.largo, .modal .panel.modelos-painel { max-width: none; width: 100%; min-height: 100dvh; margin: 0; border-radius: 0; border: 0; padding: 18px 16px; }
  .modal .barra-fixa { bottom: -18px; margin-bottom: -18px; }
}

/* ---------- Tela de login (uso interno, fundo preto, 11/2026) ---------- */
.lg { position: relative; min-height: 100vh; display: flex; flex-direction: column; background: #050608; color: #f3f4f6; font-family: var(--display, "Manrope"), "Inter", system-ui, sans-serif; overflow: hidden; isolation: isolate; }
.lg-fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 70% at 60% 45%, #000 30%, transparent 80%); }
.lg-fundo i { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .45; }
.lg-fundo .f1 { width: 520px; height: 520px; background: #1d4ed8; top: -180px; right: 8%; animation: lgFlutuaFundo 18s ease-in-out infinite; }
.lg-fundo .f2 { width: 420px; height: 420px; background: #047857; bottom: -200px; left: 30%; opacity: .3; animation: lgFlutuaFundo 22s 3s ease-in-out infinite reverse; }
.lg-fundo .f3 { width: 360px; height: 360px; background: #6d28d9; top: 30%; left: -160px; opacity: .25; animation: lgFlutuaFundo 26s ease-in-out infinite; }
.lg-topo { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(5,6,8,.6); backdrop-filter: blur(10px); }
.lg-marca { display: flex; align-items: center; gap: 14px; }
.lg-marca img { height: 24px; }
.lg-interno { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #93c5fd; background: rgba(59,130,246,.12); border: 1px solid rgba(147,197,253,.22); padding: 5px 10px; border-radius: 999px; }
.lg-relogio { font-size: 13px; font-weight: 600; color: #9ca3af; font-variant-numeric: tabular-nums; }
.lg-main { flex: 1; display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 64px; max-width: 1200px; width: 100%; margin: 0 auto; padding: 48px; align-items: center; }
.lg-card { background: linear-gradient(180deg, rgba(23,26,33,.92), rgba(13,15,20,.92)); border-radius: 24px; padding: 38px; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(16px); animation: lgSobe .6s ease both; }
.lg-abas { display: grid; grid-template-columns: 1fr 1fr; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 4px; margin-bottom: 28px; }
.lg-aba { border: 0; background: transparent; padding: 10px; border-radius: 9px; font-family: inherit; font-size: 13px; font-weight: 700; color: #8b93a3; cursor: pointer; transition: .2s; }
.lg-aba:hover { color: #e5e7eb; }
.lg-aba.ativo { background: #f3f4f6; color: #0a0b0d; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.lg-card h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: #fff; }
.lg-sub { color: #8b93a3; font-size: 14px; margin: 6px 0 26px; min-height: 20px; }
.lg-form { display: grid; gap: 16px; }
.lg-campo { position: relative; }
.lg .lg-campo input { width: 100%; height: 58px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.1); padding: 24px 16px 4px; font-size: 16px; line-height: 1.2; font-family: inherit; outline: none; background: rgba(255,255,255,.03); color: #fff; transition: border-color .15s, box-shadow .15s, background .15s; }
.lg .lg-campo label { position: absolute; left: 17px; top: 19px; font-size: 15px; font-weight: 500; line-height: 1.2; color: #8b93a3; pointer-events: none; transition: .15s; overflow: visible; }
.lg .lg-campo input:focus + label, .lg .lg-campo input:not(:placeholder-shown) + label { top: 9px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #93c5fd; }
.lg .lg-campo input:focus { border-color: #3b82f6; background: rgba(59,130,246,.06); box-shadow: 0 0 0 4px rgba(59,130,246,.15); }
.lg .lg-campo input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #12151c inset; -webkit-text-fill-color: #fff; }
.lg #codigo { letter-spacing: .25em; font-weight: 700; text-transform: uppercase; padding-right: 90px; text-align: left; font-size: 16px; }
.lg-olho { position: absolute; right: 10px; top: 13px; border: 0; background: transparent; font-family: inherit; font-size: 13px; font-weight: 700; color: #9ca3af; padding: 8px; cursor: pointer; border-radius: 8px; }
.lg-olho:hover { background: rgba(255,255,255,.06); color: #fff; }
.lg-linha { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #8b93a3; }
.lg .lg-check { font-size: 13px; color: #b6bcc8; overflow: visible; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.lg .lg-check input { width: 18px; height: 18px; padding: 0; accent-color: #3b82f6; }
.lg .msg.err { color: #fca5a5; }
.lg .msg.err:empty { display: none; }
.lg-entrar { position: relative; overflow: hidden; height: 56px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff; font-size: 16px; font-weight: 800; font-family: inherit; cursor: pointer; margin-top: 8px; box-shadow: 0 12px 30px rgba(29,78,216,.35); transition: transform .15s, box-shadow .15s; }
.lg-entrar::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); transform: skewX(-20deg); animation: lgReflexo 4s ease-in-out infinite; }
.lg-entrar:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(29,78,216,.5); }
.lg-entrar:disabled { opacity: .7; cursor: wait; transform: none; }
.lg-selos { display: flex; gap: 8px; margin-top: 24px; }
.lg-selos span { flex: 1; text-align: center; font-size: 11px; font-weight: 700; color: #9ca3af; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 10px 4px; }
.lg-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #93c5fd; animation: lgSobe .6s ease both; }
.lg-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 12px #34d399; animation: lgPisca 2s ease-in-out infinite; }
.lg-vitrine h2 { font-size: 46px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 14px 0 0; max-width: 560px; color: #fff; animation: lgSobe .7s .1s ease both; }
.lg-vitrine h2 em { font-style: normal; background: linear-gradient(90deg, #60a5fa, #34d399, #60a5fa); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lgBrilhoTexto 6s linear infinite; }
.lg-vitrine > p { color: #9ca3af; font-size: 16px; line-height: 1.6; margin: 14px 0 10px; max-width: 520px; animation: lgSobe .7s .2s ease both; }
.lg-palco { position: relative; max-width: 600px; aspect-ratio: 600 / 360; }
.lg-cena { position: relative; width: 100%; height: 100%; overflow: visible; transform: translate(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -12px)); transition: transform .25s ease-out; }
.lg-palco .lg-chip { translate: calc(var(--px, 0) * 26px) calc(var(--py, 0) * 18px); transition: translate .25s ease-out; }
.lg-anel { transform-origin: 300px 175px; }
.lg-anel.a1 { animation: lgGira 40s linear infinite; }
.lg-anel.a2 { animation: lgGira 28s linear infinite reverse; }
.lg-anel.a3 { animation: lgGira 16s linear infinite; }
.lg-onda { transform-origin: 300px 170px; opacity: 0; animation: lgOnda 3.2s ease-out infinite; }
.lg-onda.o2 { animation-delay: 1.6s; }
.lg-escudo { transform-origin: 300px 170px; animation: lgFlutua 5s ease-in-out infinite; filter: drop-shadow(0 16px 30px rgba(37,99,235,.45)); }
.lg-check-svg { stroke-dasharray: 80; stroke-dashoffset: 80; animation: lgDesenha 1s .6s ease forwards; }
.lg-doc { transform-origin: 476px 208px; animation: lgDoc 6s ease-in-out infinite; }
.lg-assina { stroke-dasharray: 90; stroke-dashoffset: 90; animation: lgAssina 4s ease-in-out infinite; }
.lg-moeda { animation: lgMoeda 4.5s ease-in-out infinite; }
.lg-moeda.m2 { animation-delay: .8s; } .lg-moeda.m3 { animation-delay: 1.6s; }
.lg-particulas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lg-particulas i { position: absolute; bottom: -10px; border-radius: 50%; background: linear-gradient(135deg, #60a5fa, #34d399); opacity: .5; box-shadow: 0 0 8px rgba(96,165,250,.6); animation: lgParticula linear infinite; }
.lg-chip { position: absolute; display: flex; gap: 8px; align-items: center; background: rgba(20,23,30,.85); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 8px 14px 8px 8px; font-size: 13px; font-weight: 700; color: #e5e7eb; box-shadow: 0 14px 30px rgba(0,0,0,.45); backdrop-filter: blur(8px); white-space: nowrap; }
.lg-chip-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: rgba(59,130,246,.18); }
.lg-chip.c1 { top: 6%; left: 2%; animation: lgFlutua 6s ease-in-out infinite; }
.lg-chip.c2 { top: 2%; right: 4%; animation: lgFlutua 7s 1s ease-in-out infinite; }
.lg-chip.c2 .lg-chip-ico { background: rgba(167,139,250,.2); }
.lg-chip.c3 { top: 26%; left: -2%; animation: lgFlutua 6.5s .5s ease-in-out infinite; }
.lg-chip.c3 .lg-chip-ico { background: rgba(52,211,153,.18); }
.lg-chip.c4 { top: 76%; right: 0; animation: lgFlutua 7.5s 1.5s ease-in-out infinite; }
.lg-chip.c4 .lg-chip-ico { background: rgba(251,191,36,.18); }
.lg-status { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.lg-status-item { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #9ca3af; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); padding: 8px 12px; border-radius: 10px; }
.lg-status-item i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; animation: lgPisca 2s ease-in-out infinite; }
.lg-status-item:nth-child(2) i { animation-delay: .6s; } .lg-status-item:nth-child(3) i { animation-delay: 1.2s; }
.lg-rodape { text-align: center; font-size: 12px; color: #6b7280; padding: 18px; border-top: 1px solid rgba(255,255,255,.06); }
@keyframes lgSobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lgFlutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes lgFlutuaFundo { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, 40px); } }
@keyframes lgGira { to { transform: rotate(360deg); } }
@keyframes lgDesenha { to { stroke-dashoffset: 0; } }
@keyframes lgOnda { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes lgDoc { 0%, 100% { transform: translateY(0) rotate(4deg); } 50% { transform: translateY(-12px) rotate(-2deg); } }
@keyframes lgAssina { 0%, 15% { stroke-dashoffset: 90; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 90; } }
@keyframes lgMoeda { 0% { transform: translateY(20px); opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }
@keyframes lgParticula { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .6; } 85% { opacity: .6; } 100% { transform: translateY(-380px); opacity: 0; } }
@keyframes lgPisca { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes lgReflexo { 0%, 60% { left: -60%; } 100% { left: 130%; } }
@keyframes lgBrilhoTexto { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .lg *, .lg *::before, .lg *::after { animation: none !important; } .lg-check-svg { stroke-dashoffset: 0; } .lg-assina { stroke-dashoffset: 0; } }
@media (max-width: 980px) {
  .lg-main { grid-template-columns: 1fr; padding: 24px 16px; }
  .lg-vitrine { display: none; }
  .lg-topo { padding: 0 16px; }
  .lg-relogio { display: none; }
  .lg-card { padding: 28px 22px; }
}

/* Links dentro das mensagens do WhatsApp (CRM): clicáveis, abrem em outra aba */
.wa-link { color: #1a6fd6; text-decoration: underline; word-break: break-all; cursor: pointer; }

/* Balão vermelho: dado do cliente incorreto ou inconsistente (05b-alertas-dados.js) */
.balao-erro { display: inline-block; margin-top: 3px; padding: 0 6px; border-radius: 999px; background: #d92d20; color: #fff; font-size: .62rem; font-weight: 600; line-height: 1.6; white-space: normal; max-width: 100%; }
dl.dados dd .balao-erro { display: table; }
dl.dados.copiavel dd { flex-wrap: wrap; }
.balao-linha { flex-basis: 100%; }
.balao-linha .balao-erro { margin-top: 2px; }
.wa-audio-caixa { display: grid; gap: 2px; }
.wa-audio-baixar { font-size: .72rem; color: inherit; opacity: .7; }
/* Usuário bloqueado por errar o código (Usuários, menu da conta do master) */
.cadeado-bloq { color: #d92d20; margin-right: 6px; vertical-align: -3px; }
.bloq-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: #d92d20; color: #fff; font-size: .72rem; font-weight: 700; }
.bloq-badge .ico { width: 13px; height: 13px; }
details.conta summary.tem-bloq .avatar { box-shadow: 0 0 0 2px #d92d20; }
/* Visualizador de documento (Motor de risco): tela por cima com "← Voltar" */
.vis { position: fixed; inset: 0; z-index: 1000; background: #0b0d12; display: flex; flex-direction: column; }
.vis-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); background: #111318; color: #fff; }
.vis-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.vis-voltar { font-weight: 700; }
.vis-corpo { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: flex-start; justify-content: center; -webkit-overflow-scrolling: touch; }
.vis-img { max-width: 100%; height: auto; margin: auto; background: #fff; }
.vis-frame { width: 100%; height: 100%; border: 0; background: #fff; }
body.vis-aberto { overflow: hidden; }
/* O valor (ex.: R$ 30.000,00) não quebra letra por letra quando a coluna aperta: só quebra entre palavras */
dl.copiavel .valor { overflow-wrap: break-word; word-break: normal; min-width: 0; }
dl.dados dd { overflow-wrap: break-word; }
.quadro.quadro-prop { grid-auto-columns: minmax(240px, 1fr); }

/* IA de validação (Motor de risco): robozinho animado e selos */
.ia-robo { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin-right: 4px; }
.ia-antena { width: 2px; height: 4px; background: currentColor; position: relative; }
.ia-antena::before { content: ''; position: absolute; top: -3px; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: iaPisca 1s infinite; }
.ia-cabeca { width: 16px; height: 12px; border: 2px solid currentColor; border-radius: 4px; display: flex; justify-content: space-around; align-items: center; padding: 0 1px; }
.ia-olho { width: 3px; height: 3px; border-radius: 50%; background: currentColor; animation: iaOlha 2.4s infinite; }
.ia-robo.grande .ia-cabeca { width: 30px; height: 22px; border-radius: 7px; }
.ia-robo.grande .ia-olho { width: 5px; height: 5px; }
.ia-robo.grande .ia-antena { height: 7px; }
.ia-analisando .ia-robo, .ia-painel.analisando .ia-robo, .ia-conv .ia-robo { animation: iaBalanca 1.2s ease-in-out infinite; }
@keyframes iaPisca { 50% { opacity: .2; } }
@keyframes iaOlha { 0%, 40%, 100% { transform: translateX(0); } 50%, 70% { transform: translateX(2px); } 80% { transform: scaleY(.1); } }
@keyframes iaBalanca { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-2px) rotate(4deg); } }
.ia-selo { display: inline-flex; align-items: center; gap: 2px; }
.tag.ia-analisando { background: #ede9fe; color: #5b21b6; }
.tag.ia-ok { background: #dcfce7; color: #166534; }
.tag.ia-bad { background: #fee2e2; color: #991b1b; }
.tag.ia-pend { background: #fef3c7; color: #92400e; }
.ia-painel { display: grid; gap: 12px; border-left: 4px solid #7c3aed; }
.ia-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ia-titulo { display: flex; align-items: center; gap: 10px; color: #6d28d9; }
.ia-titulo .dica { color: var(--muted, #6b7280); }
.ia-andamento { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ia-pontos { display: inline-flex; gap: 3px; }
.ia-pontos i { width: 6px; height: 6px; border-radius: 50%; background: #7c3aed; animation: iaPisca 1s infinite; }
.ia-pontos i:nth-child(2) { animation-delay: .2s; } .ia-pontos i:nth-child(3) { animation-delay: .4s; }
.ia-checks td { vertical-align: top; }
.ia-checks tr.linha-bad td { background: #fef2f2; }
.ia-checks tr.linha-pend td { background: #fffbeb; }
.wa-alerta.ia-conv { background: #f5f3ff; border-color: #c4b5fd; color: #4c1d95; display: flex; align-items: center; gap: 8px; }
.ia-checks td:last-child { white-space: nowrap; }

/* ---------- Programa de parceiros (painel do parceiro e administração) ---------- */
.pc-st { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pc-azul { background: #e8f1fd; color: #1a4fb3; } .pc-amarelo { background: #fef3c7; color: #92400e; } .pc-verde { background: #dcfce7; color: #166534; }
.pc-roxo { background: #ede9fe; color: #5b21b6; } .pc-preto { background: #0a0b0d; color: #fff; } .pc-vermelho { background: #fee2e2; color: #991b1b; } .pc-cinza { background: var(--surface-2); color: var(--muted); }
.pc-mes { display: inline-flex; align-items: center; gap: 8px; } .pc-mes b { min-width: 120px; text-align: center; font-family: var(--display); }
.pc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.pc-kpi { display: grid; gap: 2px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: inherit; text-decoration: none; }
.pc-kpi span { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pc-kpi b { font-family: var(--display); font-size: 1.45rem; line-height: 1.2; }
.pc-kpi small { color: var(--muted); font-size: .76rem; }
.pc-kpi.destaque { background: linear-gradient(135deg, #0a0b0d, #1f2937); border-color: #0a0b0d; color: #fff; }
.pc-kpi.destaque span, .pc-kpi.destaque small { color: #cbd5e1; }
a.pc-kpi:hover { border-color: var(--dim); }
.pc-prods { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.pc-prod { display: grid; gap: 12px; align-content: start; }
.pc-prod-topo { display: flex; align-items: center; gap: 10px; } .pc-prod-topo > div { flex: 1; min-width: 0; display: grid; }
.pc-prod-topo h3 { margin: 0; font-family: var(--display); font-size: 1rem; }
.pc-prod-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: none; }
.pc-prod-valor { font-family: var(--display); font-size: 1.6rem; font-weight: 700; }
.pc-meta { display: grid; gap: 6px; }
.pc-meta-txt { display: flex; gap: 8px; align-items: baseline; font-size: .82rem; } .pc-meta-txt span { color: var(--muted); } .pc-meta-txt em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--ok); }
.pc-barra { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .pc-barra i { display: block; height: 100%; background: linear-gradient(90deg, #16a34a, #22c55e); border-radius: 99px; }
.pc-barra.fina { height: 5px; margin-top: 4px; max-width: 160px; }
.pc-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.pc-nums div { display: grid; } .pc-nums b { font-family: var(--display); font-size: 1.15rem; } .pc-nums span { font-size: .72rem; color: var(--muted); }
.pc-comissao { font-size: .84rem; background: #ecfdf5; color: #065f46; border-radius: 8px; padding: 6px 10px; }
.pc-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.pc-funil { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pc-funil-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: inherit; text-decoration: none; }
.pc-funil-item:hover { border-color: var(--dim); } .pc-funil-item b { font-family: var(--display); }
.pc-hist { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding-top: 10px; }
.pc-hist-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.pc-hist-col i { width: 100%; max-width: 46px; background: #cbd5e1; border-radius: 6px 6px 0 0; }
.pc-hist-col.atual i { background: #0a0b0d; }
.pc-hist-v { font-size: .7rem; color: var(--muted); } .pc-hist-m { font-size: .74rem; color: var(--muted); text-transform: capitalize; }
.pc-gerente { display: flex; gap: 14px; align-items: center; }
.pc-gerente > div:last-child { display: grid; gap: 2px; }
.pc-gerente-av { width: 52px; height: 52px; border-radius: 50%; background: #0a0b0d; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.pc-filtros { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.pc-tabela tr.clicavel, tr.clicavel { cursor: pointer; } tr.clicavel:hover td { background: var(--surface-2); }
tr.inativo td { opacity: .55; }
.pc-escolha { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pc-op { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; text-decoration: none; }
.pc-op:hover { border-color: var(--dim); } .pc-op.ativo { border-color: #0a0b0d; box-shadow: inset 0 0 0 1px #0a0b0d; }
.pc-op-ico { font-size: 1.5rem; } .pc-op span:last-child { color: var(--muted); font-size: .82rem; }
.pc-sub { margin: 6px 0 -6px; font-family: var(--display); font-size: .95rem; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.pc-ok { text-align: center; display: grid; gap: 6px; justify-items: center; }
.pc-ok-ico { width: 56px; height: 56px; border-radius: 50%; background: #dcfce7; color: #166534; font-size: 1.8rem; display: flex; align-items: center; justify-content: center; }
.pc-dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 16px; }
.pc-dado { display: grid; gap: 2px; } .pc-dado span { font-size: .72rem; color: var(--muted); }
.pc-pend { border-color: #f59e0b; background: #fffbeb; } .pc-pend h2 { color: #92400e; }
.pc-cond { border-color: #86efac; background: #f0fdf4; }
.pc-cond-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pc-cond-item { display: grid; gap: 2px; background: #fff; border: 1px solid #bbf7d0; border-radius: 10px; padding: 10px 12px; }
.pc-cond-item b { font-family: var(--display); font-size: 1.15rem; color: #166534; } .pc-cond-item small { color: var(--muted); }
.pc-resp { border-color: #93c5fd; background: #eff6ff; }
.pc-tempo { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; }
.pc-ev { border-left: 3px solid var(--line-2); padding: 4px 10px; }
.pc-ev.recado_z3 { border-left-color: #1f5fd6; background: #f5f9ff; border-radius: 0 8px 8px 0; }
.pc-ev.recado_parceiro { border-left-color: #16a34a; background: #f3fbf5; border-radius: 0 8px 8px 0; }
.pc-ev-topo { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; } .pc-ev-topo span { color: var(--muted); }
.pc-ev-txt { font-size: .88rem; white-space: pre-wrap; }
.pc-recado { display: grid; gap: 8px; } .pc-recado textarea { width: 100%; resize: vertical; }
.pc-recado .btn { justify-self: end; }
.pc-com { display: flex; gap: 10px; flex-wrap: wrap; } .pc-com label { display: flex; align-items: center; gap: 4px; font-size: .82rem; } .pc-com input { width: 64px; }
.pc-com em { font-style: normal; color: var(--muted); }
.pc-neg { display: grid; gap: 12px; }
.pc-neg-topo { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.pc-neg-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pc-neg-grade > div { display: grid; gap: 2px; font-size: .86rem; }
.pc-neg-det { margin: 0; white-space: pre-wrap; background: var(--surface-2); border-radius: 8px; padding: 10px 12px; font-size: .86rem; }
.pc-neg-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pc-neg-form label { display: grid; gap: 4px; font-size: .78rem; color: var(--muted); } .pc-neg-form .larga { grid-column: 1 / -1; }
.pc-neg-hist summary { cursor: pointer; color: var(--muted); font-size: .84rem; }
.pc-lead { display: grid; gap: 10px; border-left: 4px solid #16a34a; }
.k-parceiro { font-size: .74rem; font-weight: 600; color: #166534; background: #ecfdf5; border-radius: 6px; padding: 2px 6px; justify-self: start; }
.pc-badge { position: static; margin-left: 6px; }
@media (max-width: 760px) { .pc-neg-form { grid-template-columns: 1fr; } .pc-duas { grid-template-columns: 1fr; } }
.pc-voltar { display: none; }
@media (max-width: 900px) { .pc-voltar { display: inline-flex; } }

/* ---------- Chamados (protocolo, prioridade, conversa) ---------- */
.ch-prazos { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.ch-lista { display: grid; gap: 8px; }
.ch-item { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; }
.ch-item:hover { border-color: var(--dim); }
.ch-item.atrasado { border-left: 4px solid #dc2626; }
.ch-item-topo { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.ch-item-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: .8rem; }
.ch-prot { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }
.ch-atraso { color: #b42318; font-weight: 600; }
.ch-grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .ch-grade { grid-template-columns: 1fr; } }
.ch-lado { display: grid; gap: 14px; }
.ch-conversa { display: grid; gap: 10px; }
.ch-msg { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.ch-msg.autor { background: var(--surface-2); }
.ch-msg.eu { border-color: #bfdbfe; background: #f5f9ff; }
.ch-msg-topo { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; margin-bottom: 4px; } .ch-msg-topo span { color: var(--muted); }
.ch-msg-txt { white-space: pre-wrap; font-size: .9rem; }
.ch-sis { font-size: .76rem; color: var(--muted); text-align: center; }
.ch-responder { display: grid; gap: 8px; } .ch-responder textarea { width: 100%; }
.ch-part { display: grid; gap: 6px; }
.ch-part-item { display: flex; justify-content: space-between; align-items: center; font-size: .86rem; }
.ch-tirar { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; }
.ch-pessoas { display: grid; gap: 8px; }
.ch-pessoas-lista { display: grid; gap: 2px; }
.ch-pessoa { text-align: left; font: inherit; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.ch-pessoa:hover { border-color: var(--dim); }
.chipbtn.ch-p-imediato.ativo { border-color: #dc2626; background: #fee2e2; color: #991b1b; }
.chipbtn.ch-p-urgente.ativo { border-color: #d97706; background: #fef3c7; color: #92400e; }
.tag.tipo-suporte { background: #ecfdf5; color: #065f46; } .tag.tipo-acesso { background: #fef3c7; color: #92400e; }
.pc-com-tab { width: 100%; } .pc-com-tab th, .pc-com-tab td { padding: 4px 6px; text-align: left; }
.pc-regra { display: flex; gap: 6px; } .pc-regra select { width: 140px; } .pc-regra input { width: 110px; }
.pc-regras { display: flex; gap: 12px; flex-wrap: wrap; } .pc-regras > div { display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: .82rem; }
.pc-regras span { color: var(--muted); }
.modal .panel.pc-modal-largo { width: min(820px, 96vw); max-width: min(820px, 96vw); }
.pc-regra select { width: auto; flex: 1; min-width: 0; } .pc-regra input { width: 90px; flex: none; }
@media (max-width: 640px) { .pc-regra { flex-direction: column; } .pc-regra input { width: 100%; } }
.ch-abas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.ch-aba { display: grid; gap: 2px; text-align: left; font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; cursor: pointer; }
.ch-aba:hover { border-color: var(--dim); } .ch-aba.ativo { border-color: #0a0b0d; box-shadow: inset 0 0 0 1px #0a0b0d; }
.ch-aba b { display: flex; align-items: center; gap: 6px; } .ch-aba > span { color: var(--muted); font-size: .8rem; }
.ch-aba-n { margin-left: auto; background: #0a0b0d; color: #fff; border-radius: 99px; padding: 0 8px; font-size: .74rem; }
.tag.tipo-solicitacao, .tag.tipo-demanda { background: #e8f1fd; color: #1a4fb3; } .tag.tipo-documentos { background: #f3ecfd; color: #6d28d9; }
.tag.tipo-financeiro { background: #ecfdf5; color: #065f46; } .tag.tipo-duvida, .tag.tipo-outro { background: var(--surface-2); color: var(--muted); }
/* Chamados: duas telas separadas (técnico / Z3), barra de busca e lista limpa */
.ch-seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 12px; justify-self: start; }
.ch-seg a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 9px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .9rem; }
.ch-seg a.ativo { background: var(--surface); color: var(--white); box-shadow: 0 1px 3px rgba(13,16,23,.12); }
.ch-seg-n { background: #0a0b0d; color: #fff; border-radius: 99px; padding: 0 7px; font-size: .72rem; }
.ch-painel { display: grid; gap: 14px; }
.ch-barra { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ch-busca { flex: 1 1 320px; } .ch-busca input { width: 100%; }
.ch-barra select { width: auto; }
.ch-item { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.ch-item-esq { display: grid; gap: 6px; min-width: 0; }
.ch-item-dir { display: grid; justify-items: end; gap: 4px; flex: none; }
.ch-item-topo { justify-content: flex-start; } .ch-item-topo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-prazos { border-top: 1px solid var(--line); padding-top: 10px; align-items: center; }
/* Carteira pré-aprovada (Financeiro) */
.pa-kpi { font: inherit; text-align: left; cursor: pointer; color: inherit; }
.pa-kpi.sel { outline: 2px solid var(--preto); outline-offset: 2px; }
.pa-bancos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pa-bancos > div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.pa-bancos span { font-size: .78rem; color: var(--muted); } .pa-bancos small { font-size: .74rem; color: var(--muted); }
/* Motor de Crédito: topo enxuto */
.mc-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.mc-titulo h1 { font-family: var(--display); font-weight: 700; font-size: 1.4rem; margin: 0; }
.mc-titulo p { margin: 2px 0 0; color: var(--muted); font-size: .84rem; }
.mc-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mc-busca { width: min(340px, 100%); } .mc-busca input { width: 100%; }
@media (max-width: 700px) { .mc-acoes { width: 100%; } .mc-busca { width: 100%; } }
.mc-acoes { flex: 1 1 640px; justify-content: flex-end; flex-wrap: nowrap; }
.mc-busca { flex: 0 1 340px; width: auto; min-width: 180px; }
@media (max-width: 900px) { .mc-acoes { flex-wrap: wrap; justify-content: flex-start; } .mc-busca { flex: 1 1 100%; } }

/* ---------- Motor de Crédito (quadro .mc): cartões grafite com degradê, iguais no claro e no escuro ---------- */
.mc-pilulas { display: flex; gap: 6px; flex-wrap: wrap; margin-right: auto; }
.mc-pilulas span { font-size: .78rem; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); background: var(--surface); }
.mc-pilulas b { color: var(--white); }
.mc-n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 99px; background: var(--white); color: var(--surface); font-size: .72rem; font-weight: 700; }
.quadro.mc > .k-col { background: #ececee; border-color: #e1e1e5; }
.quadro.mc > .k-col > header { border-bottom: 0; padding-bottom: 6px; }
.quadro.mc .k-total { background: #0b0b0c; color: #fff; border-color: #0b0b0c; font-size: .76rem; min-width: 26px; text-align: center; }
.quadro.mc .k-lista { gap: 10px; padding: 6px 10px 12px; grid-template-columns: minmax(0, 1fr); }
.quadro.mc .k-lista > .vazio { background: transparent; border-color: #d4d4d8; }
/* Claro: cartão branco com sombra. Escuro: grafite com degradê (o cartão redefine as cores por dentro). */
.quadro.mc .k-card { min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 10px 10px 9px; border-radius: 11px;
  background: #fff; border: 1px solid #e6e6e9; box-shadow: 0 1px 2px rgba(16,16,20,.06), 0 6px 16px rgba(16,16,20,.06); transition: box-shadow .15s, transform .15s, border-color .15s; }
.quadro.mc .k-card:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(16,16,20,.08), 0 10px 22px rgba(16,16,20,.10); border-color: #d6d6db; }
.quadro.mc .k-card.meu { border-color: #0b0b0c; box-shadow: inset 3px 0 0 #0b0b0c, 0 6px 16px rgba(16,16,20,.08); }
html.escuro .quadro.mc .k-card {
  --white: #f2f2f2; --muted: #a3a3a3; --dim: #6b6b6b; --line: #2f2f2f; --line-2: #383838; --surface: #1f1f1f; --surface-2: #262626; --bg: #161616;
  --preto: #f2f2f2; --ok: #4ade80; --warn: #fbbf24; --bad: #f87171; --ice: #e5e5e5; --blue: #f2f2f2; --blue-soft: rgba(255,255,255,.08);
  color: var(--white); border-color: #2f2f2f;
  background: radial-gradient(120% 90% at 0% 0%, #2a2a2a 0%, rgba(42,42,42,0) 55%), linear-gradient(145deg, #1d1d1d 0%, #141414 60%, #101010 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.25); }
html.escuro .quadro.mc .k-card:hover { border-color: #4a4a4a; }
html.escuro .quadro.mc .k-card.meu { border-color: #8a8a8a; box-shadow: inset 3px 0 0 #f2f2f2; }
/* Textos menores e organizados */
.quadro.mc .k-topo { align-items: center; }
.quadro.mc .k-nome { font-weight: 600; font-size: .8rem; line-height: 1.25; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.quadro.mc .k-espera { font-size: .64rem; padding: 1px 6px; background: var(--surface-2); border-color: transparent; color: var(--muted); }
.quadro.mc .k-espera.atencao { color: var(--warn); } .quadro.mc .k-espera.alerta { color: var(--bad); background: rgba(239,68,68,.10); }
.quadro.mc .k-valor { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; margin-top: 2px; }
.quadro.mc .k-sub, .quadro.mc .k-meta { font-size: .7rem; color: var(--muted); }
.quadro.mc .k-sub[style] { font-size: .7rem; font-weight: 500 !important; line-height: 1.3; }
.quadro.mc .k-parceiro { background: transparent; color: var(--muted); padding: 0; font-weight: 500; font-size: .7rem; }
.quadro.mc .k-defesa-banco { font-size: .7rem; }
.quadro.mc .k-defesa-motivo { font-size: .7rem; padding: 5px 7px; }
.quadro.mc .k-defesa-motivo b { font-size: .6rem; }
/* Botões: ação principal ocupando a linha + menu "⋯" com as outras */
.quadro.mc .k-acoes { display: flex; gap: 6px; align-items: stretch; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 6px; }
.quadro.mc .k-acoes > .btn { flex: 1; justify-content: center; padding: 6px 8px; font-size: .72rem; line-height: 1.2; border-radius: 8px; white-space: nowrap; }
.quadro.mc .k-acoes > .btn.danger { color: var(--bad); }
.k-mais { position: static; }
.k-mais > summary { list-style: none; width: 32px; height: 100%; min-height: 28px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 8px;
  cursor: pointer; font-weight: 700; color: var(--white); background: var(--surface); user-select: none; }
.k-mais > summary::-webkit-details-marker { display: none; }
.k-mais[open] > summary { background: var(--surface-2); }
.k-mais-menu { position: fixed; z-index: 70; width: 170px; display: grid; gap: 4px; padding: 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.k-mais-menu .btn { width: 100%; justify-content: flex-start; padding: 7px 10px; font-size: .78rem; border: 0; background: transparent; }
.k-mais-menu .btn:hover { background: var(--surface-2); }
.k-mais-menu .btn.danger { color: var(--bad); }
html.escuro .quadro.mc .k-acoes > .btn { background: rgba(255,255,255,.04); border-color: #333; color: #d4d4d4; }
html.escuro .quadro.mc .k-acoes > .btn:hover { background: rgba(255,255,255,.1); }
html.escuro .quadro.mc .k-acoes > .btn.primary { background: #f2f2f2; border-color: #f2f2f2; color: #0a0a0a; }
html.escuro .quadro.mc .k-acoes > .btn.danger { color: #fca5a5; }
html.escuro .k-mais-menu { background: #1c1c1c; border-color: #333; box-shadow: 0 12px 28px rgba(0,0,0,.5); }
html.escuro .quadro.mc .k-op.meu { color: #0a0a0a; }
html.escuro .quadro.mc > .k-col { background: #111113; border-color: #1d1d20; }
html.escuro .quadro.mc .k-total { background: #f2f2f2; color: #0a0a0a; border-color: #f2f2f2; }
html.escuro .quadro.mc .k-lista > .vazio { border-color: #2a2a2a; }

/* Gaveta lateral (Encerrados) */
.gaveta-fundo { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 60; display: flex; justify-content: flex-end; animation: gavFundo .15s ease; }
.gaveta { width: min(440px, 100vw); height: 100%; background: var(--surface); border-left: 1px solid var(--line); padding: 18px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: -20px 0 40px rgba(0,0,0,.18); animation: gavEntra .2s ease; overflow: hidden; }
.gav-topo { display: flex; align-items: center; gap: 8px; } .gav-topo h2 { margin: 0; font-family: var(--display); font-size: 1.1rem; }
.gav-x { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.gaveta .chips { gap: 6px; flex-wrap: wrap; } .gaveta .chipbtn { font-size: .76rem; padding: 4px 10px; }
.gav-lista { flex: 1; overflow-y: auto; display: grid; gap: 8px; align-content: start; padding-right: 2px; }
.gav-item { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; }
.gav-item:hover { border-color: var(--dim); }
.gav-i { flex: 1; min-width: 0; display: grid; gap: 2px; } .gav-i b { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gav-i small { font-size: .74rem; color: var(--muted); }
.gav-st { flex: none; font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.gav-st.s-recusado { color: #dc2626; background: rgba(220,38,38,.1); } .gav-st.s-virou_proposta { color: var(--ok); background: rgba(18,138,87,.1); }
@keyframes gavEntra { from { transform: translateX(30px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes gavFundo { from { opacity: 0; } to { opacity: 1; } }

/* Formalização › Propostas (kanban): fluxo das etapas com gargalo, travadas e seletor Quadro | Lista */
.fp-visao { flex: none; } .fp-visao a { padding: 6px 12px; font-size: .82rem; }
.mc-pilulas .fp-pil-alerta { border-color: rgba(239,68,68,.35); color: var(--bad); background: rgba(239,68,68,.06); }
.mc-pilulas .fp-pil-alerta b { color: var(--bad); }
.fp-fluxo { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); gap: 6px; overflow-x: auto; padding: 2px 0 4px; margin-top: 12px; }
.fp-etapa { position: relative; display: grid; gap: 3px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  color: var(--white); cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s; }
.fp-etapa:hover { border-color: var(--muted); }
.fp-etapa:not(:last-child)::after { content: '›'; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); color: var(--dim); font-size: .9rem; z-index: 1; }
.fp-i { font-size: .62rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.fp-t { font-size: .74rem; font-weight: 600; line-height: 1.2; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fp-t em { font-style: normal; font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 99px; background: var(--bad); color: #fff; }
.fp-n { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.fp-n b { font-size: 1.05rem; font-weight: 700; }
.fp-n small { font-size: .66rem; color: var(--muted); }
.fp-n small.fp-tr { color: var(--bad); font-weight: 600; }
.fp-etapa.tem-travada { border-color: rgba(239,68,68,.35); }
.fp-etapa.gargalo { border-color: var(--bad); box-shadow: 0 0 0 2px rgba(239,68,68,.12); }
.quadro.mc.quadro-prop { grid-auto-columns: minmax(236px, 1fr); }
.quadro.mc .fp-col-info { font-size: .7rem; color: var(--muted); font-weight: 600; margin-top: 2px; }
.quadro.mc .fp-col-info b { color: var(--bad); font-weight: 600; }
.quadro.mc > .k-col.fp-col-gargalo { box-shadow: inset 0 3px 0 var(--bad); }
.quadro.mc .k-selos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.quadro.mc .k-selos .tag { font-size: .62rem; padding: 1px 6px; }
.quadro.mc .tag.fp-falta { color: var(--warn); background: rgba(245,158,11,.10); border-color: transparent; }
.quadro.mc .tag.fp-ok { color: var(--ok); background: rgba(34,197,94,.10); border-color: transparent; }
.quadro.mc .k-card.fp-alerta { box-shadow: inset 3px 0 0 var(--bad), 0 1px 2px rgba(16,16,20,.06), 0 6px 16px rgba(16,16,20,.06); }
.quadro.mc .k-card.fp-atencao { box-shadow: inset 3px 0 0 var(--warn), 0 1px 2px rgba(16,16,20,.06), 0 6px 16px rgba(16,16,20,.06); }
html.escuro .fp-etapa { background: #161616; border-color: #262626; color: #f2f2f2; }
html.escuro .fp-etapa:hover { border-color: #4a4a4a; }
html.escuro .fp-etapa.tem-travada { border-color: rgba(248,113,113,.35); }
html.escuro .fp-etapa.gargalo { border-color: #f87171; box-shadow: 0 0 0 2px rgba(248,113,113,.15); }
html.escuro .quadro.mc .k-card.fp-alerta { box-shadow: inset 3px 0 0 #f87171, 0 8px 20px rgba(0,0,0,.25); }
html.escuro .quadro.mc .k-card.fp-atencao { box-shadow: inset 3px 0 0 #fbbf24, 0 8px 20px rgba(0,0,0,.25); }
@media (max-width: 700px) { .fp-fluxo { grid-auto-columns: 112px; } }
.mc-acoes select.fp-banco { flex: 0 0 auto; width: auto; min-width: 170px; max-width: 220px; }
/* Coluna Cancelada (2 dias; depois só na busca) */
.quadro.mc > .k-col.k-cancelada { background: #f4f4f5; border-style: dashed; }
.quadro.mc .k-card.fp-cancelada { opacity: .78; }
.quadro.mc .k-card.fp-cancelada:hover { opacity: 1; }
.quadro.mc .k-card.fp-cancelada .k-valor { text-decoration: line-through; text-decoration-color: var(--muted); }
.quadro.mc .tag.fp-cancel { color: var(--bad); background: rgba(239,68,68,.10); border-color: transparent; }
.quadro.mc .fp-motivo { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html.escuro .quadro.mc > .k-col.k-cancelada { background: #0d0d0e; border-color: #2a2a2a; }
/* Formalização: abas no topo (Propostas · Motor de risco · iDoc) no lugar do menu lateral */
.fz { display: grid; gap: 16px; min-width: 0; }
.fz-nav { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.fz-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 11px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .92rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.fz-tab:hover { color: var(--white); }
.fz-tab.ativo { color: var(--white); border-bottom-color: var(--white); }
.fz-nova { margin-left: auto; flex: none; white-space: nowrap; padding: 7px 14px; margin-bottom: 6px; }
.fz-sub { justify-self: start; }
.fp-topo { gap: 10px 16px; }
.fp-topo .mc-pilulas { margin-right: auto; }
.fp-fluxo { margin-top: 0; }
.fp-etapa { padding: 7px 10px; gap: 2px; }
.fp-t .fp-i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: .6rem; }
.fz > .fin-corpo { gap: 14px; }
html.escuro .fp-t .fp-i { background: #262626; color: #a3a3a3; }
/* Modo claro/escuro: sol ou lua no canto da barra, ao lado do usuário */
.tema-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 99px; border: 1px solid rgba(255,255,255,.16);
  background: transparent; color: #e5e5e5; cursor: pointer; flex: none; transition: background .15s, border-color .15s; }
.tema-ico:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }
.tema-ico .ico { width: 17px; height: 17px; }
/* Coluna Reprovada no risco (fora do fluxo: parada até corrigir) */
.quadro.mc > .k-col.k-reprovada { border-style: dashed; border-color: rgba(239,68,68,.35); }
html.escuro .quadro.mc > .k-col.k-reprovada { border-color: rgba(248,113,113,.3); }
/* Formalização: Propostas, Motor de risco e iDoc com a mesma largura (trocar de aba não redimensiona a página);
   espaço da barra de rolagem sempre reservado, para a página não "pular" entre telas com e sem rolagem. */
main:has(.fz) { max-width: 1720px; }
html { scrollbar-gutter: stable; }
/* Chamados: cliente vinculado */
.ch-cliente { text-decoration: none; color: var(--white); }
.ch-cliente:hover b { text-decoration: underline; }
.ch-cli-tag { font-size: .74rem; color: var(--white); background: var(--surface-2); padding: 1px 8px; border-radius: 99px; }

/* iDocs: itens que conferem ficam recolhidos quando há divergência/pendência */
.ia-certos > summary { cursor: pointer; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-weight: 600; color: #14804a; list-style: none; }
.ia-certos > summary::-webkit-details-marker { display: none; }
.ia-certos[open] > summary { margin-bottom: 10px; }