/* Melhorias de layout (2026-10). Carregado depois de index.html e ext.css. */

/* ---------- Conversas (WhatsApp e Instagram) em tela cheia ---------- */
#content[data-view="whatsapp"],#content[data-view="instagram"]{display:flex;flex-direction:column;padding:16px 20px}
#content[data-view="whatsapp"] .wa-status-bar{max-width:none;padding:8px 14px;margin-bottom:10px;flex-shrink:0}
#content[data-view="whatsapp"] .wa-conv-wrap,#content[data-view="instagram"] .wa-conv-wrap{max-width:none;flex:1;height:auto;min-height:0}
.wa-conv-list{width:340px;background:#fff;display:flex;flex-direction:column}
.wa-conv-list-header{z-index:2}
.wa-conv-item{border-bottom:1px solid var(--mf-cinza-100);padding:11px 14px}
.wa-conv-item.active{background:var(--mf-petroleo-50);box-shadow:inset 3px 0 0 var(--mf-petroleo-500)}
.wa-conv-avatar{font-size:13px;letter-spacing:.3px}
.wa-conv-avatar .icon{width:18px;height:18px}
.wa-conv-name{font-size:13.5px}
.wa-conv-preview{font-size:12.5px}
.wa-conv-item:has(.wa-conv-badge) .wa-conv-name{font-weight:700;color:var(--mf-grafite-900)}
.wa-conv-item:has(.wa-conv-badge) .wa-conv-preview{color:var(--mf-grafite-700);font-weight:500}
.wa-conv-item:has(.wa-conv-badge) .wa-conv-time{color:var(--mf-sucesso);font-weight:700}
.wa-conv-chat-head{min-height:62px;flex-wrap:wrap;row-gap:6px}
.wa-conv-chat-head .wa-conv-name{font-size:15px}
.wa-conv-chat-body{padding:18px 6%;background:#EFEAE2 radial-gradient(rgba(7,31,33,.035) 1px,transparent 1px) 0 0/18px 18px}
.wa-bubble{max-width:65%;box-shadow:0 1px .5px rgba(7,31,33,.13);font-size:13.5px}
.wa-bubble.in{border:none}
.wa-conv-chat-input{align-items:flex-end;padding:10px 14px}
.wa-conv-chat-input textarea{min-height:42px;max-height:140px;border-radius:20px;padding:11px 16px}
.wa-conv-chat-empty{flex-direction:column;gap:10px}
.ci-toggle{margin-left:auto}
.wa-conv-chat-head .ci-toggle{order:99}

/* Painel lateral com os dados do contato */
.conv-info{width:290px;flex-shrink:0;border-left:1px solid var(--border);background:#fff;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:14px}
.wa-conv-wrap.info-fechado .conv-info{display:none}
.ci-topo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-bottom:4px}
.ci-avatar{width:64px;height:64px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px}
.ci-avatar .icon{width:26px;height:26px}
.ci-nome{font-size:15px;font-weight:700;color:var(--title);word-break:break-word}
.ci-sub{font-size:12px;color:var(--text-muted)}
.ci-bloco{border-top:1px solid var(--mf-cinza-100);padding-top:12px}
.ci-titulo{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:8px}
.ci-linha{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:3px 0}
.ci-linha span{color:var(--text-muted);flex-shrink:0}
.ci-linha b{font-weight:600;color:var(--mf-grafite-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.ci-deal{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;width:100%;padding:8px 10px;border:1px solid var(--mf-cinza-100);border-radius:var(--radius-md);margin-bottom:6px;cursor:pointer}
.ci-deal:hover{border-color:var(--mf-petroleo-300);background:var(--mf-petroleo-50)}
.ci-deal:focus-visible{outline:2px solid var(--mf-turquesa-400)}
.ci-deal-titulo{font-size:13px;font-weight:600;color:var(--mf-grafite-900)}
.ci-deal-sub{font-size:11.5px;color:var(--text-muted);display:flex;align-items:center;gap:5px}
.ci-deal-sub i{width:8px;height:8px;border-radius:50%;display:inline-block}
.ci-notas{font-size:12.5px;white-space:pre-wrap;color:var(--text)}
.ci-editar{align-self:flex-start}
.ci-vazio,.ci-carregando{font-size:13px;color:var(--text-muted);text-align:center;padding:30px 6px;display:flex;flex-direction:column;align-items:center;gap:12px}
@media (max-width:1180px){ .conv-info{display:none} .ci-toggle{display:none} .wa-conv-list{width:300px} }
.wa-conv-holder{margin-top:4px;flex:1;min-height:0;display:flex;flex-direction:column}
.wa-conv-holder .wa-conv-wrap{flex:1}
#content[data-view="whatsapp"] .wa-conv-wrap,#content[data-view="instagram"] .wa-conv-wrap{min-height:440px}
.conv-dia{display:flex;justify-content:center;margin:12px 0 8px}
.conv-dia span{background:#fff;color:var(--mf-grafite-700);font-size:11.5px;font-weight:600;padding:4px 12px;border-radius:8px;box-shadow:0 1px .5px rgba(7,31,33,.13);text-transform:capitalize}
.wa-bubble .meta{font-size:10.5px;margin-top:2px}
/* Compositor: o texto ocupa a linha toda quando falta espaco */
.wa-conv-chat-input{flex-wrap:wrap;row-gap:8px;align-items:center}
.wa-conv-chat-input textarea{order:-1;flex:1 1 100%;min-width:0}
.wa-conv-chat-input .btn-primary{margin-left:auto}
.wa-conv-chat-input .btn-note{padding:8px 11px;font-size:12px}

/* ---------- Pipeline ocupando a tela ---------- */
#content[data-view="pipeline"]{display:flex;flex-direction:column;padding:16px 20px 10px}
#content[data-view="pipeline"] .pipe-toolbar{flex-shrink:0;margin-bottom:12px}
#content[data-view="pipeline"] #pipeBody{flex:1;min-height:0;display:flex;flex-direction:column}
#content[data-view="pipeline"] #kanban{flex:1;min-height:0;height:auto;padding-bottom:8px}
.kcol{flex:1 0 240px;min-width:240px;max-width:330px;max-height:100%;background:var(--mf-petroleo-50);border-top-width:4px}
.kcol-head{padding:12px 12px 8px;border-bottom:1px solid rgba(7,31,33,.06);margin-bottom:8px}
.kcol-total{font-size:13px;font-weight:700;color:var(--mf-petroleo-700)}
.kcol-body{overflow-y:auto;padding:0 8px 8px;min-height:80px}
.kcol-vazia{border:2px dashed var(--mf-petroleo-100);border-radius:var(--radius-md);color:var(--mf-petroleo-300);font-size:12px;text-align:center;padding:18px 10px;margin-top:2px}
.kcol-body.sortable-ghost-parent .kcol-vazia,.kcol-body:has(.kcard) .kcol-vazia{display:none}
.kcard{padding:11px 12px;border-radius:var(--radius-md)}
.kcard-title{font-size:13.5px;line-height:1.3}
.kcard-tarefa{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:11.5px;color:var(--mf-petroleo-600);background:var(--mf-petroleo-50);border-radius:var(--radius-sm);padding:4px 7px}
.kcard-tarefa svg{width:13px;height:13px;flex-shrink:0}
.kcard-tarefa span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kcard-tarefa.hoje{background:var(--mf-turquesa-100);color:var(--mf-turquesa-700);font-weight:600}
.kcard-tarefa.atrasada{background:var(--mf-tijolo-100);color:var(--mf-erro);font-weight:600}
.kcard-value{font-size:13px}
#kanban::-webkit-scrollbar{height:10px}
#kanban::-webkit-scrollbar-thumb{background:var(--mf-cinza-300);border-radius:5px}
.kcol.kcol-fim{flex:0 0 220px;min-width:220px;background:#F3F5F5}
.kcard-sem-valor{font-size:11.5px;font-weight:500;color:var(--mf-cinza-500)}

/* ---------- Contatos ---------- */
.ct-count{margin-left:auto;font-size:12.5px;color:var(--text-muted);font-weight:600}
.ct-pessoa{display:flex;align-items:center;gap:10px}
.ct-avatar{width:32px;height:32px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex-shrink:0}
.ct-avatar .icon{width:15px;height:15px}
.ct-nome{font-weight:600;color:var(--mf-grafite-900)}
.ct-sub{font-size:11.5px;color:var(--text-muted)}
.ct-tel{display:flex;align-items:center;gap:6px}
.ct-tel span{font-variant-numeric:tabular-nums}
.ct-acao{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--mf-cinza-100);background:#fff;color:var(--mf-petroleo-500);padding:0;cursor:pointer;opacity:.75}
.ct-acao .icon{width:13px;height:13px}
.ct-acao:hover{opacity:1;border-color:var(--mf-petroleo-300);background:var(--mf-petroleo-50)}
.ct-acao.ct-wa{color:#1da851}
tr:hover .ct-acao{opacity:1}
.ct-vazio{color:var(--mf-cinza-300)}
.ct-resp{font-size:12.5px}
.ct-tags{white-space:normal;max-width:240px}
#content[data-view="contacts"] td{vertical-align:middle;padding-top:9px;padding-bottom:9px}
#content[data-view="contacts"] #contactsSearch{min-width:280px}

/* ---------- Painel ---------- */
.dash-grid-hero{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.stat-card{border-radius:var(--radius-lg)}
.stat-card.hero .stat-value{font-size:30px;letter-spacing:-.5px}
.stat-card.dash-vendas{border-left-color:var(--mf-turquesa-400);background:linear-gradient(135deg,#fff 60%,var(--mf-turquesa-100))}
.var-sobe{color:var(--mf-sucesso);font-weight:700}
.var-desce{color:var(--mf-erro);font-weight:700}
.var-neutra,.var-ref{color:var(--text-muted)}
.dash-panel,.dash-chart{border-radius:var(--radius-lg)}
.dash-vendas-mes{grid-column:1/-1}
.vm-grafico{display:flex;gap:10px;align-items:stretch;height:200px;padding-top:6px;border-bottom:1px solid var(--mf-cinza-100)}
.vm-col{flex:1;display:flex;flex-direction:column;min-width:0;outline:none;border-radius:6px}
.vm-col:hover .vm-barra,.vm-col:focus-visible .vm-barra{filter:brightness(.88)}
.vm-col:focus-visible{box-shadow:0 0 0 2px var(--mf-turquesa-400)}
.vm-area{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;min-height:0}
.vm-barra{width:min(46px,70%);background:#86D3D5;border-radius:4px 4px 0 0;transition:height .4s ease}
.vm-col.atual .vm-barra{background:#0FA3A8}
.vm-valor{font-size:11.5px;font-weight:600;color:var(--mf-grafite-700);white-space:nowrap}
.vm-col.atual .vm-valor{color:var(--mf-petroleo-700);font-weight:700}
.vm-mes{text-align:center;font-size:11.5px;color:var(--text-muted);padding:6px 0 0;text-transform:capitalize;margin-bottom:-26px}
.vm-col.atual .vm-mes{color:var(--mf-petroleo-700);font-weight:700}
.dash-vendas-mes{padding-bottom:34px}

/* ---------- Contraste e tamanho mínimo de letra ---------- */
:root{--text-muted:#5A6265}
.rail-group-label{color:rgba(255,255,255,.55)}
.rail-btn{color:rgba(255,255,255,.75)}
th{font-size:11.5px;color:#5A6265}
.stat-card .stat-label{font-size:11.5px}
.stat-card.mini .stat-label{font-size:11px}
.stat-card .stat-sub,.kcard-meta,.wa-conv-time,.dash-list-sub{font-size:12px}
.chan-badge,.kcard-cooling{font-size:10.5px}
.field-help{font-size:12px}

/* ---------- Telas vazias ---------- */
.estado-vazio{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;color:var(--text-muted);padding:32px 20px;flex:1}
.estado-vazio svg{width:44px;height:44px;stroke:var(--mf-petroleo-300);opacity:.9}
.estado-vazio b{color:var(--mf-petroleo-700);font-size:14.5px}
.estado-vazio span{font-size:13px;max-width:320px;line-height:1.5}

/* ---------- Celular ---------- */
@media (max-width:768px){
  #btnNew{white-space:nowrap;padding:8px 12px;margin-left:6px}
  .topbar-search{min-width:0}
  #content[data-view="whatsapp"],#content[data-view="instagram"]{padding:10px 10px calc(76px + env(safe-area-inset-bottom))}
  #content[data-view="whatsapp"] .wa-status-bar{flex-wrap:wrap;gap:4px 10px;font-size:12px}
  #content[data-view="whatsapp"] .wa-conv-wrap,#content[data-view="instagram"] .wa-conv-wrap{flex:none;height:calc(100dvh - 200px);min-height:380px}
  #content[data-view="instagram"] .wa-conv-wrap{height:calc(100dvh - 150px)}
  .wa-conv-list{width:100%}
  .wa-conv-chat-body{padding:12px 10px}
  .wa-bubble{max-width:86%}
  .wa-conv-chat-input{padding:8px}
  .wa-conv-chat-input .btn-note{padding:6px 9px;font-size:11.5px}
  /* Pipeline: uma coluna por vez, deslizando para o lado */
  #content[data-view="pipeline"]{padding:10px 10px calc(70px + env(safe-area-inset-bottom))}
  #content[data-view="pipeline"] #kanban{scroll-snap-type:x mandatory;height:calc(100dvh - 300px)}
  .kcol,.kcol.kcol-fim{flex:0 0 84vw;min-width:84vw;max-width:84vw;scroll-snap-align:start}
  /* Contatos: só nome e telefone (o resto abre no cadastro) */
  #content[data-view="contacts"] th:nth-child(4),#content[data-view="contacts"] td:nth-child(4),
  #content[data-view="contacts"] th:nth-child(5),#content[data-view="contacts"] td:nth-child(5),
  #content[data-view="contacts"] th:nth-child(6),#content[data-view="contacts"] td:nth-child(6),
  #content[data-view="contacts"] th:nth-child(7),#content[data-view="contacts"] td:nth-child(7){display:none}
  #content[data-view="contacts"] .ct-tel span{white-space:nowrap}
  #content[data-view="contacts"] .ct-tel{flex-wrap:wrap}
  #content[data-view="contacts"] #contactsSearch{min-width:0;flex:1 1 100%}
  #content[data-view="contacts"] td{white-space:normal}
  .ct-acao{opacity:1;width:32px;height:32px}
  .vm-grafico{gap:4px;height:170px}
  .vm-valor{font-size:10px}
}

/* ---------- Tema escuro: ajustes que o gerador nao cobre ---------- */
[data-tema="escuro"] body{background:var(--bg)}
[data-tema="escuro"] input,[data-tema="escuro"] select,[data-tema="escuro"] textarea{color:var(--text);background-color:var(--surface-2)}
[data-tema="escuro"] .field input,[data-tema="escuro"] .field select,[data-tema="escuro"] .field textarea{border-color:var(--border)}
[data-tema="escuro"] .field label,[data-tema="escuro"] .dash-head-title,[data-tema="escuro"] .dash-chart-title,[data-tema="escuro"] .kcol-total,
[data-tema="escuro"] .kcard-value,[data-tema="escuro"] .empty-state-title,[data-tema="escuro"] .estado-vazio b,[data-tema="escuro"] .vm-col.atual .vm-valor,
[data-tema="escuro"] .vm-col.atual .vm-mes,[data-tema="escuro"] .dash-chart-value,[data-tema="escuro"] .kcol-count,[data-tema="escuro"] .cfg-card h3{color:var(--title)}
[data-tema="escuro"] .kcol-count{background:var(--surface-2)}
[data-tema="escuro"] .kcol.kcol-fim{background:#101E20}
[data-tema="escuro"] .stat-card.dash-vendas{background:linear-gradient(135deg,var(--surface) 60%,#0F3A3D)}
[data-tema="escuro"] .wa-conv-chat-body{background:#0C1718 radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/18px 18px}
[data-tema="escuro"] .wa-bubble.in{background:var(--surface-2);color:var(--text)}
[data-tema="escuro"] .wa-bubble.out{background:#1E4A3A;color:#E4F0EA}
[data-tema="escuro"] .conv-dia span{background:var(--surface-2);color:var(--text)}
[data-tema="escuro"] .conv-note{background:#33290F;border-color:#7A6220;color:var(--text)}
[data-tema="escuro"] .vm-barra{background:#2A6D70}
[data-tema="escuro"] .vm-col.atual .vm-barra{background:#2FC2C7}
[data-tema="escuro"] .seg button{background:var(--surface);color:var(--text-muted)}
[data-tema="escuro"] .seg button.active{background:var(--mf-petroleo-500);color:#fff}
[data-tema="escuro"] .btn-ghost:hover{background:var(--surface-2)}
[data-tema="escuro"] .tag-chip{background:#0F3A3D;color:#7FD8DB}
[data-tema="escuro"] a{color:#F2A091}
[data-tema="escuro"] .wa-conv-badge{background:#2E9D6E}
[data-tema="escuro"] .kcard-tarefa{background:var(--surface-2)}
[data-tema="escuro"] .ct-acao{background:var(--surface-2);border-color:var(--border)}
[data-tema="escuro"] .mkt-phone{background:var(--surface)}
[data-tema="escuro"] .wa-status.connected{background:var(--surface-2)}
[data-tema="escuro"] .kcard-tarefa{color:#8FD3CF}
[data-tema="escuro"] .kcard-tarefa.hoje{background:#0F3A3D;color:#7FD8DB}
[data-tema="escuro"] .kcard-tarefa.atrasada{background:#3A1D1A;color:#F4A3A3}
[data-tema="escuro"] #rail{border-right:1px solid var(--border)}
[data-tema="escuro"] #topbar{border-bottom-color:var(--border)}

/* ---------- Tarefas ---------- */
.tf-tela{max-width:1100px}
.tf-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.tf-topo select,.tf-topo input[type=search]{padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;font-size:13px}
.tf-topo input[type=search]{min-width:260px}
.tf-rapida{display:flex;align-items:center;gap:8px;background:#fff;border:1px dashed var(--mf-petroleo-300);border-radius:var(--radius-md);padding:6px 8px 6px 14px;margin-bottom:14px}
.tf-rapida:focus-within{border-style:solid;border-color:var(--mf-turquesa-400);box-shadow:0 0 0 3px rgba(15,163,168,.12)}
.tf-rapida-mais{color:var(--mf-petroleo-300);font-size:20px;line-height:1}
.tf-rapida input{flex:1;border:none;padding:8px 4px;font-size:14px;background:transparent;box-shadow:none!important}
.tf-rapida select{border:1px solid var(--mf-cinza-100);border-radius:var(--radius-sm);padding:6px 8px;font-size:12.5px;background:#fff}
.tf-abas{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:14px;overflow-x:auto}
.tf-abas button{background:none;border:none;border-bottom:2px solid transparent;padding:9px 12px;font-size:13px;font-weight:600;color:var(--text-muted);white-space:nowrap}
.tf-abas button span{display:inline-block;min-width:20px;padding:1px 6px;border-radius:9px;background:var(--mf-cinza-100);color:var(--mf-grafite-700);font-size:11px;margin-left:3px}
.tf-abas button.on{color:var(--title);border-bottom-color:var(--action)}
.tf-abas button.alerta span{background:var(--mf-tijolo-100);color:var(--mf-erro)}
.tf-grupo{margin-bottom:16px}
.tf-grupo-titulo{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mf-petroleo-600);margin:0 0 6px 4px}
.tf-grupo-titulo span{color:var(--text-muted);font-weight:600}
.tf-grupo-titulo.alerta{color:var(--mf-erro)}
.tf-lista{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.tf-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--mf-cinza-100);cursor:pointer;transition:background .12s ease,opacity .25s ease,transform .25s ease}
.tf-item:last-child{border-bottom:none}
.tf-item:hover{background:var(--mf-off-white)}
.tf-item.saindo{opacity:0;transform:translateX(16px)}
.tf-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--mf-cinza-300);background:#fff;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;color:transparent}
.tf-check svg{width:12px;height:12px}
.tf-check:hover{border-color:var(--mf-sucesso);color:var(--mf-sucesso)}
.tf-item.feita .tf-check{background:var(--mf-sucesso);border-color:var(--mf-sucesso);color:#fff}
.tf-s-atrasada .tf-check{border-color:var(--mf-tijolo-600)}
.tf-tipo{width:30px;height:30px;border-radius:8px;background:var(--mf-petroleo-50);color:var(--mf-petroleo-500);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tf-tipo svg{width:16px;height:16px}
.tf-corpo{flex:1;min-width:0}
.tf-titulo{font-size:14px;font-weight:600;color:var(--mf-grafite-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-item.feita .tf-titulo{text-decoration:line-through;color:var(--text-muted);font-weight:500}
.tf-sub{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:12px;color:var(--text-muted);margin-top:3px}
.tf-sub i{font-style:normal;color:var(--mf-cinza-300)}
.tf-prazo{font-weight:600}
.tf-prazo.tf-atrasada{color:var(--mf-erro)}
.tf-prazo.tf-hoje{color:var(--mf-turquesa-700)}
.tf-link{all:unset;cursor:pointer;color:var(--mf-petroleo-600);text-decoration:underline;text-decoration-color:var(--mf-petroleo-100);text-underline-offset:2px}
.tf-link:hover{text-decoration-color:currentColor}
.tf-link:focus-visible{outline:2px solid var(--mf-turquesa-400)}
.tf-contato{display:inline-flex;align-items:center;gap:4px}
.tf-mini-av{width:16px;height:16px;border-radius:50%;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:700}
.tf-mini-av .icon{width:9px;height:9px}
.tf-av{width:26px;height:26px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.tf-av .icon{width:12px;height:12px}
.tf-resp{flex-shrink:0}
.tf-vazio{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:48px 20px}
.tf-toast{display:flex;align-items:center;gap:14px}
.tf-toast button{background:none;border:none;color:#7FD8DB;font-weight:700;font-size:13px;padding:0;text-decoration:underline}
/* janela */
.modal.tf-modal{width:560px}
.tf-tipos{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;margin-bottom:14px}
.tf-tipos button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:1px solid var(--mf-cinza-100);border-radius:var(--radius-md);background:#fff;font-size:11px;color:var(--text);line-height:1.2}
.tf-tipos button svg{width:18px;height:18px;color:var(--mf-petroleo-500)}
.tf-tipos button.on{border-color:var(--mf-petroleo-500);background:var(--mf-petroleo-50);box-shadow:inset 0 0 0 1px var(--mf-petroleo-500);font-weight:600}
.tf-atalhos{display:flex;gap:6px;flex-wrap:wrap;margin:-6px 0 14px}
.tf-atalhos button{border:1px solid var(--mf-cinza-100);background:#fff;border-radius:999px;padding:4px 10px;font-size:12px;color:var(--text)}
.tf-atalhos button:hover{border-color:var(--mf-petroleo-300);background:var(--mf-petroleo-50)}
.tf-busca-contato{position:relative}
.tf-sugestoes{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:5;max-height:220px;overflow:auto}
.tf-sugestoes:empty{display:none}
.tf-sugestoes button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;padding:8px 10px;font-size:13px;color:var(--text)}
.tf-sugestoes button:hover{background:var(--mf-petroleo-50)}
.tf-sugestoes small{color:var(--text-muted)}
.tf-sug-vazio{padding:8px 10px;font-size:12px;color:var(--text-muted)}
.tf-acoes{flex-wrap:wrap}
/* calendario */
.tf-cal-topo{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tf-cal-topo strong{min-width:170px;text-align:center;color:var(--title);text-transform:capitalize}
.tf-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.tf-cal-dow{background:var(--mf-petroleo-50);font-size:11px;font-weight:600;text-transform:uppercase;color:var(--text-muted);padding:6px 8px}
.tf-cal-dia{background:#fff;min-height:100px;padding:4px 5px;display:flex;flex-direction:column;gap:3px;cursor:pointer;min-width:0}
.tf-cal-dia:hover{background:var(--mf-off-white)}
.tf-cal-dia.fora{background:#FAFBFB}
.tf-cal-dia.fora .tf-cal-num{color:var(--mf-cinza-300)}
.tf-cal-dia.hoje .tf-cal-num{background:var(--mf-petroleo-500);color:#fff;border-radius:10px;padding:0 7px}
.tf-cal-dia.atraso{box-shadow:inset 3px 0 0 var(--mf-tijolo-600)}
.tf-cal-num{font-size:12px;font-weight:600;align-self:flex-start}
.tf-cal-item{display:flex;align-items:center;gap:4px;border:none;background:var(--mf-turquesa-100);color:var(--mf-turquesa-700);border-radius:4px;padding:2px 5px;font-size:11px;text-align:left;min-width:0;overflow:hidden}
.tf-cal-item svg{width:11px;height:11px;flex-shrink:0}
.tf-cal-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-cal-item.feita{background:var(--mf-cinza-100);color:var(--text-muted);text-decoration:line-through}
.tf-cal-mais{font-size:11px;color:var(--text-muted);padding-left:4px}
/* equipe */
.tf-equipe-intro{font-size:13px;color:var(--text-muted);margin-bottom:10px}
.tf-equipe td{vertical-align:middle}
.tf-num-alerta{color:var(--mf-erro);font-weight:700}
.tf-barra{display:inline-block;width:90px;height:8px;border-radius:4px;background:var(--mf-cinza-100);overflow:hidden;vertical-align:middle;margin-right:8px}
.tf-barra i{display:block;height:100%;border-radius:4px}
.tf-barra i.ok{background:#2E8B57}.tf-barra i.medio{background:#D9A23A}.tf-barra i.baixo{background:var(--mf-tijolo-600)}
.tf-pct{font-weight:600;font-size:12.5px}
/* negociacao e painel */
.tf-lead-topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.drawer .tf-lista,.conv-info .tf-lista{box-shadow:none;border:1px solid var(--mf-cinza-100);border-radius:var(--radius-md)}
.drawer .tf-item,.conv-info .tf-item{padding:9px 10px;gap:9px}
.drawer .tf-titulo,.conv-info .tf-titulo{white-space:normal;font-size:13px}
.drawer .tf-tipo,.conv-info .tf-tipo{width:26px;height:26px}
.tf-feitas{margin-top:12px}
.tf-feitas summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--text-muted);margin-bottom:6px}
.tf-compacta .tf-tipo{display:none}
.ci-titulo-acao{display:flex;justify-content:space-between;align-items:center}
.ci-titulo-acao .link-btn{font-size:12px;text-transform:none;letter-spacing:0}
/* configuracao */
.tfa-funil{font-weight:700;color:var(--title);margin:12px 0 4px}
.tfa-etapa{border-top:1px solid var(--mf-cinza-100);padding:10px 0}
.tfa-etapa-nome{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13px;margin-bottom:6px}
.tfa-etapa-nome i{width:9px;height:9px;border-radius:50%}
.tfa-regra{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.tfa-regra input,.tfa-regra select{padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12.5px;background:#fff}
.tfa-dias{width:64px}.tfa-hora{width:96px}.tfa-titulo{flex:1;min-width:180px}
.tfa-txt{font-size:12.5px;color:var(--text-muted)}
.tfa-rem{width:28px;height:28px;font-size:18px;color:var(--mf-erro)}
@media (max-width:768px){
  .tf-topo input[type=search]{min-width:0;flex:1 1 100%}
  .tf-rapida select{max-width:104px}
  .tf-item{padding:12px 10px;gap:10px}
  .tf-tipo{display:none}
  .tf-titulo{white-space:normal}
  .tf-cal-dia{min-height:64px}
  .tf-cal-item span{display:none}
  .modal.tf-modal{width:96vw}
}
[data-tema="escuro"] .tf-check{background:var(--surface-2)}
[data-tema="escuro"] .tf-cal-dia.fora{background:#101E20}
[data-tema="escuro"] .tf-link{color:#8FD3CF}
[data-tema="escuro"] .tf-grupo-titulo{color:#8FD3CF}
[data-tema="escuro"] .tf-tipo,[data-tema="escuro"] .tf-tipos button svg{color:#8FD3CF}

/* Botao de tema (claro/escuro) no topo */
.tema-btn{background:none;border:0;cursor:pointer;padding:6px;color:var(--mf-petroleo-700);border-radius:var(--radius-sm);display:inline-flex}
.tema-btn svg{width:20px;height:20px}
.tema-btn:hover{background:var(--mf-petroleo-50)}
[data-tema="escuro"] .tema-btn{color:#F2C94C}
[data-tema="escuro"] .bell-btn{color:var(--title)}

/* ---------- Tela de login ---------- */
#loginScreen{position:relative;flex-direction:column;gap:18px;padding:24px 16px;background:var(--mf-petroleo-900);overflow:hidden}
.login-fundo{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1200px 600px at 85% -10%,rgba(15,163,168,.28),transparent 60%),
    radial-gradient(900px 500px at -10% 110%,rgba(178,58,46,.22),transparent 60%),
    linear-gradient(160deg,#0A2C2E 0%,#071F21 55%,#06181A 100%)}
.login-fundo::before{content:"";position:absolute;inset:0;opacity:.18;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 0%,transparent 65%);mask-image:radial-gradient(ellipse at 70% 30%,#000 0%,transparent 65%)}
.login-fundo::after{content:"";position:absolute;right:-120px;top:-120px;width:520px;height:520px;border-radius:50%;
  border:1px dashed rgba(255,255,255,.12);box-shadow:0 0 0 60px rgba(255,255,255,.015),0 0 0 140px rgba(255,255,255,.012)}
.login-box{position:relative;z-index:1;width:400px;padding:36px 36px 28px;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-marca{display:flex;align-items:center;gap:12px;margin-bottom:22px;color:var(--mf-petroleo-700)}
.login-logo{width:42px;height:42px;color:var(--mf-tijolo-600)}
.login-marca-nome{font-size:18px;font-weight:800;letter-spacing:-.2px;color:var(--title);line-height:1.1}
.login-marca-sub{font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--mf-turquesa-700)}
.login-box h1{font-size:21px;margin:0 0 4px}
.login-box p{margin:0 0 20px;font-size:13px}
.login-box .field input{padding:11px 12px;font-size:15px;border-color:var(--border)}
.login-senha{position:relative}
.login-senha input{padding-right:44px!important}
.login-olho{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:none;color:var(--text-muted);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;padding:0}
.login-olho svg{width:18px;height:18px}
.login-olho:hover{color:var(--title);background:var(--mf-petroleo-50)}
.login-caps{margin-top:6px;font-size:12px;font-weight:600;color:var(--mf-atencao);background:var(--mf-atencao-100);border-radius:var(--radius-sm);padding:4px 8px;display:inline-block}
.login-caps[hidden]{display:none}
#loginBtn{padding:12px 16px;font-size:14px;margin-top:4px}
#loginBtn.carregando{opacity:.85;cursor:progress}
#loginBtn.carregando::before{content:"";width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.login-aviso{background:var(--mf-turquesa-100);color:var(--mf-turquesa-700);border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;margin-bottom:14px;font-weight:500}
.login-aviso[hidden]{display:none}
.login-error{font-size:13px;margin-top:10px;font-weight:500}
.login-ajuda{margin-top:14px;padding-top:14px;border-top:1px solid var(--mf-cinza-100);font-size:12.5px;color:var(--text-muted);text-align:center}
.login-rodape{position:relative;z-index:1;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;font-size:12px;color:rgba(255,255,255,.6)}
.login-rodape a{color:rgba(255,255,255,.75)}
.login-rodape a:hover{color:#fff}
.login-tema{position:absolute;top:14px;right:14px;z-index:2;color:rgba(255,255,255,.8)}
.login-tema:hover{background:rgba(255,255,255,.1)}
@media (max-width:480px){
  #loginScreen{justify-content:flex-start;padding-top:64px}
  .login-box{width:100%;max-width:none;padding:28px 22px 22px;border-radius:14px}
  .login-box .field input{font-size:16px;padding:13px 12px}
  #loginBtn{padding:14px 16px;font-size:15px}
  .login-olho{width:44px;height:44px}
}
[data-tema="escuro"] .login-marca{color:var(--title)}
[data-tema="escuro"] .login-logo{color:#F08A7E}
[data-tema="escuro"] .login-marca-sub{color:#7FD8DB}
[data-tema="escuro"] .login-box{box-shadow:0 20px 60px rgba(0,0,0,.6);border:1px solid var(--border)}
[data-tema="escuro"] .login-tema{color:#F2C94C}