/* hana-disparo — painel. Classes prefixadas por componente:
   ui- genérico · lg- login · sh- casca/menu · pn- painel · cv- conversas · ld- leads
   dp- disparo · fx- fluxos · ag- agente · md- modal */
:root {
  --bg:#f0f2f5; --sf:#ffffff; --sf2:#f0f2f5; --ln:#e1e5e8; --tx:#111b21; --mu:#667781;
  --ac:#008069; --ac2:#d9fdd3; --wa-chat:#efeae2; --wa-out:#d9fdd3; --wa-top:#008069; --wr:#b7791f; --wr2:#fbf1df; --er:#c0392b; --er2:#fbe7e4;
  --in:#2b6cb0; --in2:#e5eef9; --rd:10px; --bar:58px;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; height:100%; }
body { background:var(--bg); color:var(--tx); font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
button, input, select, textarea { font:inherit; color:inherit; }
a { color:var(--ac); }

/* ---------- genéricos ---------- */
.ui-btn { border:1px solid var(--ln); background:var(--sf); border-radius:8px; padding:8px 12px; cursor:pointer; white-space:nowrap; }
.ui-btn:hover { background:var(--sf2); }
.ui-btn--pri { background:var(--ac); border-color:var(--ac); color:#fff; }
.ui-btn--pri:hover { background:#18744c; }
.ui-btn--er { color:var(--er); }
.ui-btn--sm { padding:4px 9px; font-size:13px; }
.ui-btn:disabled { opacity:.5; cursor:default; }
.ui-card { background:var(--sf); border:1px solid var(--ln); border-radius:var(--rd); padding:14px; min-width:0; }
.ui-h { font-size:17px; margin:0 0 10px; }
.ui-h2 { font-size:15px; margin:0 0 8px; }
.ui-mu { color:var(--mu); font-size:13px; }
.ui-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-width:0; }
.ui-grow { flex:1 1 auto; min-width:0; }
.ui-stack > * + * { margin-top:12px; }
.ui-in, .ui-sel, .ui-ta { width:100%; border:1px solid var(--ln); background:var(--sf); border-radius:8px; padding:8px 10px; min-width:0; }
.ui-ta { min-height:80px; resize:vertical; }
.ui-lbl { display:block; font-size:13px; color:var(--mu); margin:0 0 4px; }
.ui-fld + .ui-fld { margin-top:10px; }
.ui-chk { display:inline-flex; gap:4px; align-items:center; margin:0 10px 6px 0; font-size:14px; }
.ui-pill { display:inline-block; font-size:12px; padding:2px 8px; border-radius:99px; background:var(--sf2); color:var(--mu); white-space:nowrap; }
.ui-pill--ok { background:var(--ac2); color:var(--ac); }
.ui-pill--wr { background:var(--wr2); color:var(--wr); }
.ui-pill--er { background:var(--er2); color:var(--er); }
.ui-pill--in { background:var(--in2); color:var(--in); }
.ui-tbl-wrap { overflow-x:auto; max-width:100%; }
.ui-tbl { border-collapse:collapse; width:100%; min-width:560px; font-size:14px; }
.ui-tbl th, .ui-tbl td { text-align:left; padding:8px; border-bottom:1px solid var(--ln); vertical-align:top; }
.ui-tbl th { font-size:12px; color:var(--mu); font-weight:600; }
.ui-tbl tr.is-click { cursor:pointer; }
.ui-tbl tr.is-click:hover td { background:var(--sf2); }
.ui-vazio { text-align:center; color:var(--mu); padding:28px 8px; }
.ui-bar { height:8px; background:var(--sf2); border-radius:99px; overflow:hidden; }
.ui-bar > i { display:block; height:100%; background:var(--ac); }
.ui-toast { position:fixed; left:50%; bottom:calc(var(--bar) + 14px); transform:translateX(-50%); background:#1c2320; color:#fff;
  padding:9px 14px; border-radius:8px; z-index:60; max-width:calc(100% - 32px); font-size:14px; }
.ui-toast--er { background:var(--er); }

/* ---------- login ---------- */
.lg-tela { min-height:100dvh; display:grid; place-items:center; padding:16px; }
.lg-box { width:100%; max-width:360px; }
.lg-tit { font-size:20px; margin:0 0 4px; }
.lg-erro { color:var(--er); font-size:14px; min-height:20px; margin:8px 0 0; }

/* ---------- casca ---------- */
.sh-app { display:flex; min-height:100dvh; }
.sh-menu { width:78px; flex:0 0 78px; background:var(--sf2); border-right:1px solid var(--ln); padding:10px 6px; display:flex; flex-direction:column; gap:2px;
  position:sticky; top:0; height:100dvh; overflow-y:auto; }
.sh-marca { width:40px; height:40px; border-radius:50%; background:var(--ac); color:#fff; display:grid; place-items:center; font-weight:700; margin:0 auto 10px; }
.sh-item { display:flex; flex-direction:column; gap:2px; align-items:center; border:0; background:none; padding:7px 2px; border-radius:10px; cursor:pointer;
  color:#54656f; font-size:11px; }
.sh-item:hover { background:#e2e6e9; }
.sh-item.is-on { background:#d9dde0; color:var(--tx); font-weight:600; }
.sh-ico { font-size:20px; line-height:1; }
.sh-rodape { margin-top:auto; padding:8px; }
.sh-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.sh-topo { display:flex; gap:10px; align-items:center; padding:10px 16px; background:var(--sf2); border-bottom:1px solid var(--ln); min-width:0; min-height:56px; }
.sh-titulo { font-weight:600; font-size:16px; margin:0; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sh-cli { max-width:220px; }
.sh-conteudo { flex:1 1 auto; padding:16px; min-width:0; }
.sh-conteudo > * { flex:0 0 auto; }
.sh-demo { background:var(--wr2); color:var(--wr); font-size:13px; padding:6px 16px; }

/* ---------- painel ---------- */
.pn-kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.pn-kpi .ui-mu { display:block; }
.pn-kpi b { font-size:24px; font-weight:650; }
.pn-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.pn-funil-l { display:grid; grid-template-columns:110px minmax(0,1fr) 48px; gap:8px; align-items:center; font-size:14px; }
.pn-funil-l + .pn-funil-l { margin-top:6px; }
.pn-graf { width:100%; height:170px; display:block; }
.pn-leg { display:flex; gap:14px; font-size:12px; color:var(--mu); margin-top:6px; }
.pn-leg i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:-1px; }

/* ---------- conversas ---------- */
.cv-wrap { display:grid; grid-template-columns:minmax(280px,380px) minmax(0,1fr); gap:0; background:var(--sf); border:1px solid var(--ln);
  border-radius:var(--rd); height:calc(100dvh - 90px); overflow:hidden; }
/* conversas ocupa exatamente o que sobra da tela (com ou sem faixa de aviso) */
.sh-main:has(.is-cheio) { height:100dvh; }
.sh-conteudo.is-cheio { padding:0; display:flex; flex-direction:column; min-height:0; }
.sh-conteudo.is-cheio .cv-wrap { border:0; border-radius:0; height:auto; flex:1 1 auto; min-height:0; }
.cv-lista { border-right:1px solid var(--ln); overflow-y:auto; min-width:0; }
.cv-busca { padding:10px; border-bottom:1px solid var(--ln); position:sticky; top:0; background:var(--sf); z-index:1; }
.cv-it { display:block; width:100%; border:0; background:none; text-align:left; padding:10px 12px; border-bottom:1px solid var(--ln); cursor:pointer; min-width:0; }
.cv-it:hover, .cv-it.is-on { background:var(--sf2); }
.cv-it-top { display:flex; gap:6px; align-items:center; min-width:0; }
.cv-it-nome { font-weight:600; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-it-hora { font-size:12px; color:var(--mu); flex:0 0 auto; }
.cv-it-ult { font-size:13px; color:var(--mu); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.cv-chat { display:flex; flex-direction:column; min-width:0; min-height:0; }
.cv-cab { display:flex; gap:8px; align-items:center; padding:8px 12px; background:var(--sf2); border-bottom:1px solid var(--ln); min-height:58px; flex:0 0 auto; min-width:0; }
.cv-cab .ui-grow { overflow:hidden; }
.cv-cab .ui-grow b, .cv-cab .ui-grow .ui-mu { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-aviso, .cv-anexo, .cv-envio { flex:0 0 auto; }
.cv-voltar { display:none; }
.cv-msgs { flex:1 1 auto; overflow-y:auto; padding:14px 6%; background:var(--wa-chat); min-height:0; }
.cv-linha { display:flex; margin:4px 0; }
.cv-linha--out { justify-content:flex-end; }
.cv-bal { max-width:78%; background:#fff; border-radius:10px; padding:7px 10px; box-shadow:0 1px 0 rgba(0,0,0,.05); overflow-wrap:break-word; white-space:pre-wrap; }
.cv-linha--out .cv-bal { background:var(--wa-out); }
.cv-bal--tpl { background:#e8eefb !important; }
.cv-meta { display:block; font-size:11px; color:var(--mu); text-align:right; margin-top:2px; }
.cv-envio { display:flex; gap:6px; padding:8px 10px; background:var(--sf2); align-items:flex-end; }
.cv-envio .ui-ta { border:0; border-radius:8px; }
.cv-ic { border:0; background:none; font-size:20px; width:40px; height:40px; border-radius:50%; cursor:pointer; color:#54656f; flex:0 0 40px; }
.cv-ic:hover { background:#e2e6e9; }
.cv-ic.is-rec { color:#fff; background:var(--er); }
.cv-av { width:40px; height:40px; border-radius:50%; background:#dfe5e7; color:#54656f; display:grid; place-items:center; font-weight:600; flex:0 0 40px; }
.cv-it { display:flex !important; gap:10px; align-items:center; }
.cv-it-txt { flex:1 1 auto; min-width:0; }
.cv-midia img, .cv-midia video { max-width:260px; width:100%; border-radius:6px; display:block; }
.cv-midia audio { width:240px; max-width:100%; }
.cv-anexo { font-size:13px; padding:6px 10px; background:var(--sf); border-top:1px solid var(--ln); display:flex; gap:8px; align-items:center; }
.cv-envio .ui-ta { min-height:42px; height:42px; }
.cv-aviso { font-size:13px; color:var(--wr); background:var(--wr2); padding:8px 12px; }

/* ---------- leads ---------- */
.ld-filtros { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.ld-filtros > * { flex:1 1 150px; min-width:0; }
.ld-kanban { display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; }
.ld-col { flex:0 0 250px; background:var(--sf2); border-radius:var(--rd); padding:8px; max-height:calc(100dvh - 240px); overflow-y:auto; }
.ld-col-h { display:flex; justify-content:space-between; font-weight:600; font-size:14px; padding:4px 4px 8px; }
.ld-card { background:var(--sf); border:1px solid var(--ln); border-radius:8px; padding:8px 10px; margin-bottom:6px; cursor:pointer; font-size:14px; }
.ld-card b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ld-pag { display:flex; gap:8px; justify-content:flex-end; align-items:center; margin-top:10px; }
.ld-prev { font-size:13px; }

/* ---------- disparo ---------- */
.dp-lista { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.dp-nums { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:10px 0; text-align:center; }
.dp-nums b { display:block; font-size:18px; }
.dp-nums span { font-size:12px; color:var(--mu); }

/* ---------- fluxos ---------- */
.fx-passo { border-left:3px solid var(--ac); padding:4px 0 4px 12px; margin:10px 0; }
.fx-var { background:var(--sf2); border-radius:8px; padding:8px 10px; margin-top:6px; font-size:14px; }
.fx-var p { margin:4px 0 0; white-space:pre-wrap; overflow-wrap:break-word; }

/* ---------- agente ---------- */
.ag-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.ag-mod { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto; gap:6px; margin-bottom:6px; }
.ag-sim { display:flex; flex-direction:column; gap:6px; max-height:360px; overflow-y:auto; background:#eef2ef; border-radius:8px; padding:10px; }

/* ---------- modal ---------- */
.md-fundo { position:fixed; inset:0; background:rgba(20,25,22,.45); z-index:50; display:flex; align-items:center; justify-content:center; padding:16px; }
.md-box { background:var(--sf); border-radius:12px; width:100%; max-width:560px; max-height:calc(100dvh - 32px); display:flex; flex-direction:column; min-width:0; }
.md-box--lg { max-width:760px; }
.md-cab { display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid var(--ln); }
.md-cab h3 { margin:0; font-size:16px; flex:1 1 auto; min-width:0; }
.md-corpo { padding:16px; overflow-y:auto; min-height:0; }
.md-pe { display:flex; gap:8px; justify-content:flex-end; padding:12px 16px; border-top:1px solid var(--ln); flex-wrap:wrap; }

/* ---------- celular ---------- */
@media (max-width: 820px) {
  .sh-app { display:block; }
  .sh-menu { position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; height:var(--bar); flex-direction:row; padding:4px; gap:0;
    border-right:0; border-top:1px solid var(--ln); z-index:40; overflow-x:auto; overflow-y:hidden; background:var(--sf); }
  .sh-marca, .sh-rodape { display:none; }
  .sh-item { flex:1 0 62px; gap:1px; padding:5px 2px; font-size:11px; justify-content:center; }
  .sh-ico { font-size:18px; }
  .sh-main { min-height:100dvh; padding-bottom:var(--bar); }
  .sh-conteudo { padding:12px; }
  .pn-grid { grid-template-columns:minmax(0,1fr); }
  .cv-wrap { grid-template-columns:minmax(0,1fr); height:calc(100dvh - var(--bar) - 84px); }
  .sh-main:has(.is-cheio) { height:100dvh; }
  .cv-msgs { padding:12px 10px; }
  .cv-wrap.is-chat .cv-lista { display:none; }
  .cv-wrap:not(.is-chat) .cv-chat { display:none; }
  .cv-voltar { display:inline-block; }
  .cv-bal { max-width:88%; }
  .cv-cab .ui-pill { display:none; }
  .cv-cab .cv-av { display:none; }
  #cv-modo { padding:5px 8px; font-size:12px; }
  .md-fundo { align-items:flex-end; padding:0; }
  .md-box { max-height:92dvh; border-radius:12px 12px 0 0; }
  .ag-mod { grid-template-columns:minmax(0,1fr); }
  .dp-lista { grid-template-columns:minmax(0,1fr); }
  .ui-toast { bottom:calc(var(--bar) + 10px); }
}