/* ===== Apolo Tarefas v2 — estilos ===== */
/* v109 — Passo 3 do design: cores, fontes, tokens (:root e modo escuro), ícones e componentes da marca ficam no bloco
 * IDENTIDADE VISUAL no FIM deste arquivo, que vence o que está aqui em cima; tela nova usa os tokens de lá. Este trecho de
 * cima é layout/estrutura das versões antigas (vários testes o recortam pelos comentários). */

/* ===== Modo escuro ===== */

html[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.08); }

html[data-theme="dark"] .error { background: #2d1a1a; border-color: #5c2b2b; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
.grow { flex: 1; }
.spacer { flex: 1; }
.hint { font-size: 12px; color: var(--text-soft); margin: 6px 0; }

/* ===== Login ===== */
.auth-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.auth-card {
  background: var(--surface);
  width: 100%; text-align: center;
}
.auth-logo {
  margin: 0 auto 14px;
  color: #fff; font-size: 34px; font-weight: 700;
  align-items: center;
}
.auth-card h1 { margin-bottom: 4px; }
.auth-subtitle { color: var(--text-soft); margin-bottom: 22px; }
.auth-card form { text-align: left; }

/* ===== Campos ===== */
.field { margin-bottom: 13px; flex: 1; }
.field label { display: block; margin-bottom: 5px; }
.field label small { color: var(--text-soft); }
.field input, .field select, .field textarea, .input-title {
  width: 100%; padding: 10px 12px;
  font-family: inherit; background: var(--input-bg); color: var(--text);
}
.input-title { font-weight: 600; }

.field-row { display: flex; gap: 12px; }

.error {
  font-size: 13px; margin-bottom: 12px;
  border: 1px solid #fecaca; padding: 8px 12px; border-radius: 8px;
}

/* ===== Botões ===== */
.btn {
  cursor: pointer; font-family: inherit;
  transition: background .15s, transform .05s;
  white-space: nowrap; flex-shrink: 0; /* v65: "Adicionar"/"Enviar" quebravam em 2 linhas dentro das linhas flex do modal */
}
.btn:active { transform: scale(.98); }

.btn-block { width: 100%; }

/* ===== Barra superior ===== */
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 10px 18px;
  position: sticky; top: 0; z-index: 50;
  padding-top: calc(10px + env(safe-area-inset-top)); flex-wrap: wrap;
}
.topbar-brand { display: flex; align-items: center; font-weight: 700; font-size: 16px; }

.brand-icon {
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.tabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; min-width: 0; }
.tab {
  border: none; background: transparent; padding: 8px 13px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--text-soft);
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.tab:hover { background: var(--bg); color: var(--text); }
.tab.active { background: var(--accent-soft); color: var(--primary); }
.topbar-user { display: flex; align-items: center; gap: 8px; }
.user-name { color: var(--text-soft); }

/* Sino de notificações */
.bell {
  position: relative; border: none; background: transparent;
  font-size: 19px; cursor: pointer; padding: 5px 8px; border-radius: 8px;
}
.bell:hover { background: var(--bg); }
.bell-badge {
  position: absolute; top: 0; right: 0;
  font-size: 10px; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.notif-panel {
  position: fixed; top: 58px; right: 14px; z-index: 90;
  width: 360px; max-width: calc(100vw - 28px); max-height: 70vh; overflow-y: auto;
}
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.notif-item { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.notif-item.unread { background: var(--accent-soft); }
.notif-item .notif-time { font-size: 11.5px; color: var(--text-soft); margin-top: 3px; }
.notif-item .notif-actions { margin-top: 7px; display: flex; gap: 8px; }

/* ===== Layout ===== */
main { padding: 16px 18px calc(30px + env(safe-area-inset-bottom)); max-width: 1400px; margin: 0 auto; }
.view-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.select-sm {
  padding: 8px 10px;
  background: var(--input-bg);
}
.board-select { font-weight: 700; font-size: 15px; }

.boardbar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
}

/* ===== Kanban ===== */
.board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 10px; }
.column {
  padding: 10px;
  min-height: 220px; min-width: 270px; flex: 1;
}
.column-header {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 6px 10px;
}
.count { margin-left: auto; border-radius: 20px; padding: 1px 9px; font-size: 12px; }
.column-body { display: flex; flex-direction: column; gap: 9px; min-height: 60px; }
.column.drag-over { outline: 2.5px dashed var(--primary); outline-offset: -3px; }

.card {
  cursor: grab; border-left: 4px solid transparent;
}

.card.prio-alta { border-left-color: var(--red); }
.card.prio-media { border-left-color: var(--amber); }
.card.prio-baixa { border-left-color: #94a3b8; }
.card.dragging { opacity: .5; }
.card-title { margin-bottom: 6px; }

.card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.avatars { display: flex; margin-left: auto; }
.avatar {
  width: 22px; height: 22px; border-radius: 50%;
  color: #fff; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: -5px; border: 1.5px solid #fff;
}
.empty-hint { color: var(--text-soft); font-size: 13px; text-align: center; padding: 18px 6px; }

/* Cores de pessoas (chat e avatares) */

.uc3 { background: #db2777; } .uc4 { background: #2563eb; }
.uc7 { background: #dc2626; } .uc8 { background: #475569; }

/* ===== Grade ===== */
.panel {
  padding: 18px;
}
.panel-flush { padding: 6px 12px; overflow-x: auto; }
/* v73: estas duas valiam só no celular (max-width:760px), medindo a JANELA. Com o menu lateral
   do v70 o CONTEÚDO fica ~208px mais estreito que a janela, então entre 761px e ~965px a área
   útil é menor que 760px sem que a proteção do celular entrasse — a tabela da Equipe empurrava
   a página inteira e criava rolagem lateral. Rolar de lado DENTRO do painel é inofensivo em
   tela grande (só age quando há transbordo), então agora valem sempre. */
.panel { overflow-x: auto; }
#team-table { min-width: 760px; }
.panel h3 { margin-bottom: 14px; }
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; text-transform: uppercase;
  white-space: nowrap;
}
.table td { border-bottom: 1px solid var(--border); }
.table-orderable th[data-sort] { cursor: pointer; user-select: none; } /* v67 */
.table-orderable th[data-sort]:hover { color: var(--text); }
.table-orderable th[data-sort] .th-sort { font-size: 10px; opacity: .7; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; } /* v67 */

/* v68 (lote 4): navegação de pastas na aba Arquivos */
.arq-breadcrumb { font-size: 14px; }
.arq-breadcrumb a { text-decoration: none; }
.arq-breadcrumb a:hover { text-decoration: underline; }
.arq-pastas-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.arq-pasta-card {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg);
}
.arq-pasta-abrir { cursor: pointer; font-size: 14px; }
.arq-pasta-abrir:hover { color: var(--primary); }
.arq-pasta-acoes { display: flex; gap: 2px; }
.btn-icon {
  background: none; border: 0; cursor: pointer; font-size: 13px; padding: 2px 4px; color: var(--text-soft);
}
.btn-icon:hover { background: var(--border); color: var(--text); }
/* v67: pré-visualização de PDF/imagem */
.preview-body { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.preview-body img { max-width: 100%; max-height: 74vh; border-radius: 8px; object-fit: contain; }
.preview-body iframe { width: 100%; height: 74vh; border: 0; border-radius: 8px; background: #fff; }
.preview-body .hint { padding: 30px; text-align: center; }
.table tbody tr { cursor: pointer; }
.table tbody tr:hover { background: var(--hover); }
.table tr:last-child td { border-bottom: none; }
.table .done-title { text-decoration: line-through; color: var(--text-soft); }
.role-chip { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 20px; background: var(--bg); color: var(--text-soft); }
.role-chip.admin { background: var(--accent-soft); color: var(--primary); }

/* ===== Calendário ===== */
.cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cal-nav h3 { font-size: 17px; }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
}
.cal-dow {
  padding: 9px 6px; text-align: center; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; color: var(--text-soft);
  border-bottom: 1.5px solid var(--border);
}
.cal-cell {
  min-height: 96px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 5px; font-size: 12px;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-day-num { font-size: 12px; font-weight: 600; color: var(--text-soft); margin-bottom: 3px; }

.cal-cell.today { background: var(--accent-soft); }
.cal-cell.today .cal-day-num { color: var(--primary); font-weight: 800; }
.cal-task {
  display: block; width: 100%; text-align: left; border: none; font-family: inherit;
  background: var(--accent-soft); color: var(--primary); font-size: 11.5px; font-weight: 600;
  border-radius: 5px; padding: 2px 6px; margin-bottom: 3px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cal-task.done { text-decoration: line-through; }

/* v35: seletor de visão (Dia · Semana · Mês · Ano) e as visões novas */
.cal-views { display: flex; gap: 2px; background: var(--col-bg); border-radius: 9px; padding: 3px; }
.cal-views button {
  border: none; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text-soft); padding: 4px 12px; border-radius: 7px; cursor: pointer;
}
.cal-views button.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }
.cal-grid.g-semana { grid-template-columns: repeat(7, 1fr); }
.cal-grid.g-semana .cal-cell.wk { min-height: 300px; }
.cal-wk-head {
  display: flex; align-items: baseline; gap: 6px; padding: 2px 2px 8px;
  border-bottom: 1.5px solid var(--border); margin-bottom: 6px;
}
.cal-wk-dow { font-size: 11.5px; font-weight: 700; text-transform: uppercase; color: var(--text-soft); }
.cal-cell.today .cal-wk-dow { color: var(--primary); }
.cal-grid.g-semana .cal-task, .cal-grid.g-dia .cal-task { white-space: normal; padding: 5px 8px; }
.cal-grid.g-dia { grid-template-columns: 1fr; }
.cal-grid.g-dia .cal-cell.dia { min-height: 240px; border-right: none; }
.cal-grid.g-ano { grid-template-columns: repeat(4, 1fr); gap: 10px; background: transparent; box-shadow: none; overflow: visible; }
.cal-mini {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 12px; text-align: left; cursor: pointer; font-family: inherit;
}
.cal-mini:hover { border-color: var(--primary); }
.cal-mini.today { outline: 2px solid var(--primary); outline-offset: -2px; }
.cal-mini-nome { font-weight: 700; font-size: 14px; text-transform: capitalize; margin-bottom: 4px; color: var(--text); }
.cal-mini-info { font-size: 12px; color: var(--text-soft); }
.cal-mini-info .vermelho { color: var(--red); }
@media (max-width: 760px) {
  .cal-grid.g-semana { grid-template-columns: 1fr; }
  .cal-grid.g-semana .cal-cell.wk { min-height: 0; border-right: none; }
  .cal-grid.g-ano { grid-template-columns: repeat(2, 1fr); }
  .cal-views button { padding: 4px 9px; }
}

/* ===== Meu Dia ===== */
.task-row {
  background: var(--surface); border-radius: 10px; padding: 11px 14px;
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px; cursor: pointer;
}
.task-row input[type="checkbox"] { width: 19px; height: 19px; cursor: pointer; accent-color: var(--green); flex-shrink: 0; }
.task-row .task-row-title { flex: 1; font-size: 14.5px; font-weight: 500; }

.myday-picker { max-height: 55vh; overflow-y: auto; }
.myday-picker label {
  display: flex; align-items: center; gap: 10px; padding: 9px 6px;
  border-bottom: 1px solid var(--border); font-size: 14px; cursor: pointer;
}
.myday-picker input { width: 17px; height: 17px; accent-color: var(--primary); }
.myday-picker .sub { color: var(--text-soft); font-size: 12px; }

/* ===== Dashboard ===== */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }

.stat-card.stat-red .stat-value { color: var(--red); }
.stat-card.stat-green .stat-value { color: var(--green); }
.stat-card.stat-amber .stat-value { color: var(--amber); }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* v87: catálogo de indicadores do Dashboard (pedido do Victor, 18/09) — cada pessoa liga/desliga
 * e reordena os blocos, então dois vizinhos raramente têm o mesmo tanto de conteúdo; sem isto o
 * grid ESTICA os dois da mesma linha para a altura do mais alto (comportamento padrão do CSS
 * Grid), sobrando espaço vazio embaixo do menor. */
.dash-grid { align-items: start; }
/* "Criadas × concluídas" em duas barrinhas lado a lado por dia (chart-14d). O botão ✕ de cada
 * bloco reaproveita .dash-mover, que já existe no <style> de index.html — aqui só o que faltava:
 * a largura de cada barrinha e a cor das duas séries.
 * v87.1 (achado do coordenador, olhando o print): as duas barrinhas usavam a classe .cbar-fill
 * (para herdar width/radius/transition) MAIS um modificador de cor — mas a regra ORIGINAL
 * ".cbar .cbar-fill" (cor var(--primary), lá embaixo no arquivo, na seção "gráficos") tem a
 * MESMA especificidade dos meus modificadores e vem DEPOIS no arquivo, então ela é quem valia:
 * as duas séries saíam roxas. Classe própria (cbar-mini), sem herdar de .cbar-fill — sem essa
 * queda de braço de especificidade/ordem. */
.cbar-2cols { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.cbar-2cols .cbar-mini { width: 44%; border-radius: 4px 4px 0 0; min-height: 2px; transition: height .3s; }
.cbar-2cols .cbar-mini-criadas { background: var(--amber); }
.cbar-2cols .cbar-mini-concluidas { background: var(--green); }
/* v87.1: "Vencem em 7 dias"/"Sem responsável" são blocos de largura normal — título de 3+
 * palavras quebrava em várias linhas dentro da coluna estreita do taskRow. Só nestes dois
 * blocos (o taskRow das outras abas, mais largas, continua igual): 1 linha com reticências;
 * o nome inteiro continua acessível pelo title="" (dashTaskRowCurto, no app.js). */
[data-dash="vencem-7d"] .task-row-title, [data-dash="sem-responsavel"] .task-row-title {
  /* v87.1: até DUAS linhas (uma só cortava "Reunião …" — visto no navegador) e reticências no fim */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  white-space: normal; overflow: hidden; text-overflow: ellipsis; line-height: 1.25;
}
.person-row { margin-bottom: 12px; }
.person-row .person-name { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; display: flex; justify-content: space-between; }
.person-row .person-name span:last-child { color: var(--text-soft); font-weight: 500; }
.bar { display: flex; height: 9px; border-radius: 6px; overflow: hidden; }
.bar .seg-done { background: var(--green); }

/* ===== Modais ===== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 14px;
}
.modal {
  background: var(--surface); padding: 22px;
  width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto;
}
.modal-lg { max-width: 640px; }
.modal h3 { font-size: 18px; }
.modal-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.modal-actions { display: flex; gap: 10px; margin-top: 4px; align-items: center; }

/* Seções do modal de tarefa */
.tsection { border-top: 1px solid var(--border); padding: 14px 0 6px; margin-top: 10px; }
.tsection h4 { font-size: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.add-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg); border-radius: 20px; padding: 4px 10px 4px 4px;
  font-size: 12.5px; font-weight: 600;
}
.chip .avatar { margin: 0; border: none; }
.chip.pending { opacity: .65; border: 1.5px dashed var(--text-soft); background: transparent; }
.chip .chip-x { border: none; background: transparent; cursor: pointer; color: var(--text-soft); font-size: 13px; padding: 0 2px; }
.chip .star { color: var(--amber); font-size: 12px; }

/* Subtarefas */
.subtask {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.subtask:hover { background: var(--bg); }
.subtask input { width: 17px; height: 17px; accent-color: var(--green); }
.subtask.done .st-title { text-decoration: line-through; color: var(--text-soft); }
.subtask .st-title { flex: 1; }
.subtask .st-count { font-size: 11.5px; color: var(--text-soft); }

/* Arquivos */
.files { display: flex; flex-direction: column; gap: 6px; }
.file-item {
  display: flex; align-items: center; gap: 9px;
  background: var(--bg); border-radius: 8px; padding: 8px 10px; font-size: 13.5px;
}
.file-item a { text-decoration: none; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.file-item .file-size { color: var(--text-soft); font-size: 12px; }
.file-item .chip-x { border: none; background: transparent; cursor: pointer; color: var(--text-soft); }

/* Conversa */
.chat {
  max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  background: var(--chat-bg); border-radius: 12px; padding: 12px;
}
.msg { max-width: 82%; padding: 7px 11px; border-radius: 12px; font-size: 13.5px; }
.msg.mine { align-self: flex-end; }
.msg .msg-author { font-size: 11.5px; font-weight: 700; margin-bottom: 2px; }
.msg .msg-time { font-size: 10.5px; color: var(--text-soft); text-align: right; margin-top: 2px; }
.msg audio { max-width: 220px; margin-top: 4px; }
/* v103: mídia dentro do balão + visor (foto grande / PDF embutido), como no WhatsApp Web */
.msg-midia { margin-top: 4px; }
.msg-foto { display: block; max-width: 260px; max-height: 260px; border-radius: 10px; cursor: zoom-in; object-fit: cover; }
.msg-arquivo-nome { font-size: 11.5px; color: var(--text-soft); margin-top: 2px; }
.msg-doc { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 300px; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--border); background: var(--surface); color: inherit; font: inherit; cursor: pointer; text-align: left; }
.msg-doc:hover { background: var(--hover); }
.msg-doc-icone { font-size: 22px; flex: none; }
.msg-doc-nome { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; }
.msg-doc-dica { font-size: 11px; color: var(--text-soft); flex: none; }
.visor-modal { position: fixed; inset: 0; z-index: 120; background: rgba(10,12,24,.92); display: flex; flex-direction: column; }
.visor-topo { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: #fff; }

.visor-titulo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.visor-corpo { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 14px 14px; }
.visor-corpo img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.visor-corpo iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; background: #fff; }
.visor-sem-previa { text-align: center; background: var(--surface); color: var(--text); padding: 24px 28px; border-radius: 14px; }
.msg a { font-weight: 600; }

.mc3 { color: #db2777; } .mc4 { color: #2563eb; }
.mc7 { color: #dc2626; } .mc8 { color: #475569; }

/* Histórico */
.log { margin-top: 10px; border-left: 2.5px solid var(--border); padding-left: 12px; }
.log-item { font-size: 12.5px; margin-bottom: 8px; }
.log-item .log-time { color: var(--text-soft); font-size: 11px; }

/* Editor de etapas */
.col-edit-row { display: flex; gap: 8px; align-items: center; margin-bottom: 7px; cursor: grab; }
.col-edit-row.dragging-row { opacity: .4; }
.col-grip { color: var(--text-soft); font-size: 15px; cursor: grab; user-select: none; padding: 0 2px; }
.col-edit-row input { flex: 1; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 14px; }
.col-edit-row .chip-x { border: none; background: transparent; cursor: pointer; color: var(--text-soft); font-size: 15px; }

/* ===== Busca global ===== */
.search-wrap { position: relative; }
.search-wrap input {
  padding: 8px 12px; border: 1.5px solid var(--border);
  font-size: 13.5px; font-family: inherit; background: var(--bg);
}
.search-wrap input:focus { background: var(--input-bg); }
.search-results {
  position: absolute; top: 42px; right: 0; z-index: 95;
  width: 340px; max-width: 90vw; max-height: 60vh; overflow-y: auto;
  background: var(--surface); border-radius: 12px;
  border: 1px solid var(--border);
}
.search-item { padding: 10px 13px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13.5px; }
.search-item:hover { background: var(--hover); }
.search-item:last-child { border-bottom: none; }
.search-item .sub { color: var(--text-soft); font-size: 11.5px; margin-top: 2px; }
.search-item.done .search-title { text-decoration: line-through; color: var(--text-soft); }

/* ===== Etiquetas ===== */
.lbl {
  display: inline-block; color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 5px; min-width: 26px; text-align: center;
  margin: 0 4px 4px 0; vertical-align: middle;
}
.lbl:empty { height: 10px; padding: 2px 12px; }
.lbl-chip { display: inline-flex; align-items: center; gap: 4px; }

/* ===== Arquivadas, menções, gráficos ===== */

.chk {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-soft); cursor: pointer;
}
.chk input { width: 15px; height: 15px; accent-color: var(--primary); }
.mention { font-weight: 700; }

.chart-bars { display: flex; align-items: flex-end; gap: 5px; height: 140px; padding-top: 8px; }
.cbar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.cbar .cbar-fill {
  width: 100%; background: var(--primary); border-radius: 4px 4px 0 0; min-height: 2px;
  transition: height .3s;
}
.cbar .cbar-num { font-size: 10.5px; font-weight: 700; margin-bottom: 3px; color: var(--text-soft); }
.cbar .cbar-lbl { font-size: 9.5px; color: var(--text-soft); margin-top: 4px; white-space: nowrap; }

/* ===== Mosaico de quadros ===== */
.board-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.tile {
  cursor: pointer;
  transition: transform .1s, box-shadow .15s;
  display: flex; flex-direction: column;
}

.tile h3 { margin-bottom: 8px; }
.tile .tile-stats { margin-top: auto; display: flex; gap: 7px; flex-wrap: wrap; }
.tile.tile-new {
  border-top: 2px dashed var(--border);
  box-shadow: none;
  align-items: center; justify-content: center;
  color: var(--text-soft); font-weight: 600; font-size: 14px;
}
.tile.tile-new:hover { border-color: var(--primary); color: var(--primary); }

/* v66: formato do mosaico (dashboard) personalizado por pessoa — a ORDEM já era pessoal
 * desde antes (boardOrder); aqui só o FORMATO (padrão x compacto) fica salvo também. */
.tiles-formato-bar { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-bottom: -4px; }
.board-tiles.board-tiles-compacta { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.board-tiles-compacta .tile { padding: 10px; min-height: 66px; }
.board-tiles-compacta .tile h3 { font-size: 13px; margin-bottom: 4px; }
.board-tiles-compacta .tile .tile-stats { gap: 4px; }
.board-tiles-compacta .tile .badge { font-size: 10px; padding: 1px 6px; }

/* ===== Contador na aba Pendências ===== */
.tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 10px; padding: 0 5px;
  vertical-align: middle;
}

/* ===== Subtarefas estilo To Do ===== */
.subtask-area {
  background: var(--bg); padding: 8px 10px; margin-bottom: 13px;
}
.subtask { position: relative; }
.mini-menu {
  position: absolute; right: 4px; top: 30px; z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); min-width: 200px; overflow: hidden;
}
.mini-menu button {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  padding: 9px 13px; font-size: 13.5px; font-family: inherit; cursor: pointer; color: var(--text);
}
.mini-menu button:hover { background: var(--hover); }
.mini-menu button.danger { color: var(--red); }
.mini-menu .menu-title { padding: 7px 13px; font-size: 11.5px; color: var(--text-soft); font-weight: 700; text-transform: uppercase; }
.st-dots {
  border: none; background: transparent; cursor: pointer;
  color: var(--text-soft); font-size: 16px; padding: 2px 6px; border-radius: 6px;
}
.st-dots:hover { background: rgba(0,0,0,.08); }
.st-origin { font-size: 11px; color: var(--primary); font-weight: 700; }

/* ===== Pendências ===== */
.pend-section { margin-bottom: 22px; }
.pend-section > h3 { font-size: 14px; margin-bottom: 9px; display: flex; align-items: center; gap: 7px; }
.pend-section .pend-count {
  background: var(--accent-soft); color: var(--primary);
  font-size: 11.5px; font-weight: 700; border-radius: 12px; padding: 1px 9px;
}
.pend-empty { text-align: center; padding: 30px; }
.pend-empty .big { font-size: 34px; margin-bottom: 8px; }

/* ===== Notícias (v69: lista curta com filtro por tema e ação de virar tarefa) =====
   O bloco anterior tinha 30 linhas mortas de uma versão abandonada da aba, e uma delas
   (.news-topic > h3) ainda vencia a regra viva por especificidade e apagava a cor do tema. */
.news-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.news-chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.news-chip:hover { color: var(--text); }

.nf-hero {
  position: relative; display: block; overflow: hidden;
  min-height: 300px; text-decoration: none; background: var(--surface);
  margin-bottom: 14px;
}
/* object-position um pouco acima do centro: em foto de jornal o assunto quase nunca está no meio */
.nf-hero-img, .np-ph-hero {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 35%;
}
.nf-hero-body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  display: flex; flex-direction: column; gap: 4px;
}
.nf-hero-title { color: #fff; font-size: 20px; font-weight: 800; line-height: 1.3; }
.nf-hero:hover .nf-hero-title { text-decoration: underline; }
.nf-meta { font-size: 11.5px; color: var(--text-soft); }
.nf-hero .nf-meta { color: rgba(255,255,255,.85); }
.np-ph {
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.np-ph-hero { font-size: 60px; }
.panel-news { padding: 4px 6px; }
.news-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px; border-bottom: 1px solid var(--border);
}
.news-row:last-child { border-bottom: 0; }
.news-row-link { flex: 1; min-width: 0; text-decoration: none; color: inherit; display: block; }
.news-row-title { font-size: 14px; font-weight: 600; line-height: 1.35; display: block; }
.news-row-link:hover .news-row-title { text-decoration: underline; }
.news-row .btn { flex-shrink: 0; }
/* v73: a linha de ação da manchete em destaque (o botão não cabe DENTRO do link da foto) */
.news-row-destaque {
  background: var(--surface);
  margin: -14px 0 14px; border-bottom: 0;
}
.news-row-destaque .news-row-title { color: var(--text-soft); font-weight: 600; font-size: 12.5px; }
@media (max-width: 900px) { .nf-hero { min-height: 220px; } }

/* ===== Barra inferior (celular) ===== */
#bottom-nav { display: none; }
/* v73: esta regra estava DEPOIS do bloco do celular e, por vir por último, vencia a regra que
   mostra o botão — o ＋ flutuante nunca aparecia no celular. Bug antigo (é anterior a esta
   série de mudanças), achado na revisão. Declarando antes, quem fala por último é o celular. */
#fab { display: none; }
.bnav {
  position: relative; border: none; background: transparent; font-family: inherit;
  font-size: 10.5px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 2px; border-radius: 8px; cursor: pointer;
}
.bnav .bi { line-height: 1; }

.bnav-badge {
  position: absolute; top: -2px; right: calc(50% - 22px);
  font-size: 9.5px; font-weight: 700;
  min-width: 15px; height: 15px; border-radius: 8px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
}
.more-sheet {
  position: fixed; bottom: calc(70px + env(safe-area-inset-bottom));
  left: 12px; right: 12px; z-index: 85;
  padding: 8px;
}
.sheet-item {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  padding: 13px 14px; font-size: 15px; font-weight: 600; font-family: inherit;
  color: var(--text); border-radius: 10px; cursor: pointer;
}
.sheet-item:hover { background: var(--hover); }

/* ===== Celular ===== */
@media (max-width: 760px) {
  #main-tabs { display: none; }
  #sidenav { display: none; } /* v70: no celular vale a barra de baixo + "Mais", como sempre foi */
  #bottom-nav {
    grid-template-columns: repeat(5, 1fr);
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
  }
  main { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .board { flex-direction: column; }
  .column { min-width: 0; width: 100%; }
  .dash-grid { grid-template-columns: 1fr; }
  .brand-name { display: none; }
  .field-row { flex-direction: column; gap: 0; }
  .cal-cell { min-height: 64px; }
  .news-row { flex-wrap: wrap; } /* v69: no celular o botão "➕ Tarefa" desce para a linha de baixo */

  #view-team .view-actions .btn { padding: 6px 10px; font-size: 12px; }

  /* Janelas em tela cheia no celular: campos alinhados, nada cortado */
  .modal-backdrop { padding: 0; align-items: stretch; }
  .modal {
    max-width: 100%; width: 100%; max-height: 100dvh; height: 100dvh;
  }
  .dlg-modal { height: auto; max-height: 80dvh; border-radius: 16px; margin: auto 14px; }
  #dlg.modal-backdrop { align-items: center; padding: 14px; }
  .add-row { flex-wrap: wrap; }
  .add-row .grow { min-width: 140px; }
  .modal-actions { flex-wrap: wrap; }

  /* Botão flutuante + (nova tarefa rápida) */
  #fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom));
    width: 56px; height: 56px; border-radius: 50%; border: none; z-index: 79;
    color: #fff; font-size: 30px; font-weight: 700; cursor: pointer;
  }
  #fab:active { transform: scale(.94); }

  /* v85: Atendimento — conversa estilo WhatsApp: sem conversa aberta some a coluna vazia (a lista
     ocupa a tela), o ✕ vira "‹ Voltar" e a gaveta de detalhes abre em tela cheia. */
  #crm-vazio { display: none; }
  /* v86: com o id, porque a regra geral `.crm-fechar-voltar { display: none }` vem DEPOIS no
     arquivo e, com a mesma força, vencia — no celular o botão aparecia VAZIO (visto no navegador). */
  #btn-close-crm .crm-fechar-x { display: none; }
  #btn-close-crm .crm-fechar-voltar { display: inline; }
  .crm-gaveta.aberta {
    position: fixed; inset: 0; z-index: 105; background: var(--surface);
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .crm-linha-msg { max-width: 55vw; }
}

/* ===== Cor do quadro (etiquetas, filtro de pendências, seletor) ===== */
.board-chip {
  display: inline-block; padding: 2.5px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: #fff; white-space: nowrap;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0;
}
.pend-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pend-filter-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px;
  border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface);
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text);
}
.pend-filter-btn:hover { background: var(--hover); }
.pend-filter-btn .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bc, #64748b); flex-shrink: 0; }
.pend-filter-btn .pend-count { background: rgba(127,127,127,.18); border-radius: 999px; padding: 1px 7px; font-size: 11.5px; }

.pend-filter-btn.active .dot { background: #fff; }
.pend-filter-btn.active .pend-count { background: rgba(255,255,255,.25); color: #fff; }
.color-row { display: flex; flex-wrap: wrap; gap: 9px; padding: 4px 0; }
.color-sw {
  width: 27px; height: 27px; border-radius: 50%; border: 2.5px solid transparent;
  cursor: pointer; padding: 0; transition: transform .1s;
}
.color-sw:hover { transform: scale(1.15); }
.color-sw.sel { border-color: var(--text); transform: scale(1.15); box-shadow: 0 0 0 2px var(--surface) inset; }

/* ===== Acesso por quadro (editor de pessoas) ===== */
.member-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.member-row .member-name { flex: 1; font-size: 14px; font-weight: 500; }

/* ===== Janela do sistema (avisos/confirmações/perguntas) ===== */
.dlg-modal { max-width: 460px; animation: dlgIn .14s ease-out; }
.dlg-msg { white-space: pre-wrap; font-size: 14.5px; line-height: 1.55; margin: 6px 0 14px; color: var(--text); }
@keyframes dlgIn { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===== Avisos rápidos no topo (estilo navegador) ===== */
#toasts {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%); z-index: 1300;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: max-content; max-width: calc(100vw - 24px);
}
.toast {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-left: 4px solid var(--green);
  border-radius: 12px; padding: 10px 16px; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
  opacity: 0; transform: translateY(-14px); transition: opacity .25s, transform .25s;
  max-width: 100%;
}
.toast.show { opacity: 1; transform: none; }

/* ===== Reordenar quadros arrastando ===== */
.tile[data-bid] { cursor: grab; }

/* ===== v26: menções @nome, seleção de responsáveis e Grade com concluídas ===== */
.mention-box {
  position: absolute; left: 8px; right: 8px; top: 100%; z-index: 60;
  background: var(--panel, #fff); border: 1px solid var(--border, #dbe0ea);
  max-height: 210px; overflow: auto; padding: 4px;
}
.mention-box button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; border: 0; background: none; cursor: pointer;
  border-radius: 8px; font-size: 14px; text-align: left;
}
.mention-box button:hover { background: var(--hover, #eef1f7); }

.assignee-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.as-chip {
  border: 1px solid var(--border, #dbe0ea); background: var(--panel, #fff);
  color: inherit; border-radius: 999px; padding: 4px 12px; font-size: 13px;
  cursor: pointer; line-height: 1.2;
}
.as-chip.on { font-weight: 600; }
span.as-chip { cursor: default; }

.grid-done-head {
  padding: 10px 14px; font-weight: 700; font-size: 14px;
  border-bottom: 1px solid var(--border, #e5e8f0);
  display: flex; align-items: center; gap: 8px;
}
.grid-done-head .count {
  border-radius: 999px; padding: 1px 9px; font-size: 12px;
}
#grid-done-table .done-title { text-decoration: line-through; }

/* v27: quadro pessoal Minhas Tarefas */

/* ===== v31: modo escuro — responsáveis legíveis (cores mais vivas + contraste) ===== */

html[data-theme="dark"] .uc1 { background: #14b8a6; }
html[data-theme="dark"] .uc2 { background: #f59e0b; color: #1a1a1a; }
html[data-theme="dark"] .uc3 { background: #ec4899; } html[data-theme="dark"] .uc4 { background: #3b82f6; }
html[data-theme="dark"] .uc5 { background: #22c55e; color: #1a1a1a; }
html[data-theme="dark"] .uc7 { background: #ef4444; }
html[data-theme="dark"] .uc8 { background: #94a3b8; color: #1a1a1a; }
html[data-theme="dark"] .uc9 { background: #eab308; color: #1a1a1a; }
html[data-theme="dark"] .as-chip.on { color: #fff; }

/* ===== v61: Atendimento (CRM do WhatsApp) ===== */
/* v88 (item 3): grade uniforme — 2 colunas iguais, mesma altura, largura 100%; a busca ocupa as
   duas colunas. Chip de filtro extra dos cartões de resumo (item 12) logo abaixo da grade. */
.crm-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-filtros .select-sm { width: 100%; }
#crm-f-busca { grid-column: 1 / -1; }
.crm-chip-filtro { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-soft); color: var(--primary); font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; margin-bottom: 10px; }
.crm-chip-filtro button { border: none; background: transparent; color: inherit; cursor: pointer; font-weight: 700; font-size: 13px; }
.arquivos-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* v66 */
.badge-sem-tarefa { background: #dbeafe; color: #1d4ed8; } /* v66: selo "WhatsApp — sem tarefa" */
.crm-nome-wrap { display: flex; align-items: center; gap: 6px; }
.crm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex: none; }
.crm-espera { font-weight: 600; }
.crm-espera.alerta { color: var(--red); }
.crm-janela-fechada { color: var(--red); }
.crm-janela-aberta { color: var(--green); }
.crm-restrito { color: var(--text-soft); font-style: italic; }
.crm-config-setor { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.crm-config-setor label { width: 110px; font-size: 13px; font-weight: 600; flex: none; }
.crm-config-setor select { flex: 1; }
/* v88: equipe do setor (Configurar do Atendimento) */
.crm-config-setor { flex-wrap: wrap; }
.crm-config-equipe { flex: 0 0 calc(100% - 120px); margin: 0 0 4px 120px; font-size: 13px; min-width: 0; } /* v102: 100% + margem de 120px estourava a janela de lado */
.crm-config-equipe summary { cursor: pointer; color: var(--muted, #666); }
.crm-config-equipe-lista { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 6px 0 2px; }
.crm-config-membro { font-weight: 400; display: inline-flex; align-items: center; gap: 4px; }
.crm-config-equipe-lista .hint { flex: 0 0 100%; margin: 4px 0 0; }
@media (max-width: 820px) { .crm-config-equipe { margin-left: 0; flex-basis: 100%; } }
/* v63: Fase 5 — uma linha por modelo aprovado da Meta (config do atendimento) */
.crm-config-template { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; padding: 8px; border: 1px solid var(--border); }
.crm-config-template .t-nome { flex: 1 1 180px; }
.crm-config-template .t-desc { flex: 1 1 200px; }
.crm-config-template .t-params { flex: 1 1 200px; }
.crm-config-template input[type="text"] { padding: 6px 8px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--input-bg); color: var(--text); }

/* ===== v85: Atendimento vira "tela de conversa" — pedido do Victor (18/09, print do WhatsApp
   dele): "seria mais fácil e bonito se a tela das conversas fosse idêntica à do próprio WhatsApp,
   e em cima de cada conversa tenhamos os filtros, ajustes, responsável, prioridade, etapas".
   Duas colunas no computador (lista + conversa aberta), faixa compacta de controles em cima da
   conversa, o resto (anexos/proposta/fechar) numa gaveta lateral, balões com cauda e separador de
   data. #crm-modal continua o MESMO elemento de sempre — só ganhou classes novas (nenhuma classe
   ou id antigo foi removido; o app.js o reencaixa dentro de #crm-col-chat em tempo de execução). */
/* v88 (item 1): sem "cartão elevado" na janela da conversa — sombra fora, borda fina no lugar. O
   mesmo #crm-modal aparece em tela cheia no celular, onde a borda não se vê (colada nas bordas). */
#crm-col-chat #crm-modal .modal { box-shadow: none; border: 1px solid var(--border); }
.crm-vazio {
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--text-soft); font-size: 14px; padding: 40px 20px; min-height: 200px;
  background: var(--surface); border: 1px solid var(--border);
}
/* faixa de controles em cima da conversa aberta */
.crm-faixa-topo { flex-wrap: wrap; }
.crm-faixa-titulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: 4px; }
.crm-faixa-titulo h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-faixa-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.crm-faixa-tel, .crm-faixa-protocolo { font-size: 12px; color: var(--text-soft); font-weight: 500; white-space: nowrap; }
.crm-faixa-controles {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
/* v88 (item 11): selects curtos — em 1280px cabe tudo numa linha só */
.crm-faixa-controles select.select-sm { min-width: auto; max-width: 160px; font-size: 12.5px; }
.crm-a-resp-wrap { display: inline-flex; align-items: center; gap: 6px; }
.crm-etapa-selo { white-space: nowrap; }
.crm-fechar-voltar { display: none; }
/* corpo: conversa (chat + composer) + gaveta de detalhes */
.crm-janela-conversa { display: flex; flex-direction: column; }
.crm-corpo { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.crm-conversa { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#crm-chat { flex: 1 1 auto; min-height: 160px; max-height: none; }
#crm-responder-wrap { flex: 0 0 auto; }
.crm-gaveta { display: none; }
.crm-gaveta.aberta { display: block; }
/* v88 (item 9): Configurações — botão "Voltar" e título juntos (era space-between com o ✕ do outro
   lado); as seções viram grid (1 coluna no celular, 2 no computador — dentro do @media 761px). */
.crm-gaveta-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; position: sticky; top: 0; background: var(--surface); padding-bottom: 4px; z-index: 2; }
.crm-gaveta-topo h4 { font-size: 15px; }
.crm-gaveta-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.crm-gaveta-secao { border: 1px solid var(--border); padding: 12px 14px; }
.crm-gaveta-secao h4 { font-size: 14px; margin-bottom: 8px; }
.crm-gaveta-secao.tsection { border-top: none; margin-top: 0; padding: 12px 14px; }
#crm-a-etapa-wrap { display: block; }
/* v88 (item 12): cartões de resumo clicáveis — só dentro de Atendimento (não mexe no #dash-cards) */
#crm-cards .stat-card { cursor: pointer; transition: box-shadow .15s; }
/* v102 (pedido do Victor 28/10): cartões menores, número e nome centralizados — cabem os novos (um por setor,
   propostas/contratos enviados) sem virar uma parede. */
#crm-cards { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin-bottom: 12px; }

#crm-cards .stat-card .stat-value { font-size: 22px; line-height: 1.1; }
#crm-cards .stat-card .stat-label { font-size: 11.5px; line-height: 1.2; }

/* v102: a janela de Configurações rolava de lado — os 4 campos de tarifa numa linha não cabiam em 640px e o .field (flex:1)
   não encolhe abaixo do tamanho natural do input sem min-width:0. */
.modal { overflow-x: hidden; }
.modal .field { min-width: 0; }
.modal .field-row { flex-wrap: wrap; }
.modal .field-row .field { flex: 1 1 140px; }

#crm-cards .stat-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* balões com cauda (WhatsApp) — escopado a #crm-chat para não mexer no #t-chat (tarefas) */
#crm-chat .msg { position: relative; margin-left: 8px; }
#crm-chat .msg.mine { margin-left: 0; margin-right: 8px; }
/* v86: balão recebido para de esticar até a margem — ele agora se ajusta ao texto, como no
   WhatsApp (visto no navegador: a frase curta virava uma faixa de ponta a ponta). O `:not` protege
   os eventos do sistema, que continuam centralizados. */
#crm-chat .msg:not(.mine):not(.msg-evento) { align-self: flex-start; }
#crm-chat .msg::before {
  content: ""; position: absolute; bottom: 0; left: -7px; width: 12px; height: 13px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
#crm-chat .msg.mine::before {
  left: auto; right: -7px;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
/* separador de data ("Hoje" / "Ontem" / dd/mm/aaaa) — ver crmRotuloDia() no app.js */
.crm-data-sep {
  align-self: center; color: var(--text-soft);
  font-size: 11.5px; font-weight: 700; padding: 3px 12px; border-radius: 20px; margin: 4px 0;
}
/* lista de conversas no estilo WhatsApp — mesmo <table id="crm-table">, cada linha vira UM
   <td colspan> com o layout dentro (avatar, nome, última mensagem, hora, não lida, quem responde) */
/* v87.1: a tabela precisa de layout FIXO — com layout automático a célula cresce para caber o nome +
   telefone em uma linha (white-space: nowrap) e empurra a hora e o avatar para fora do cartão (visto
   no navegador com um nome longo: o telefone saía cortado e a coluna da direita sumia). */
#crm-table.crm-lista { table-layout: fixed; width: 100%; }
#crm-table.crm-lista thead { display: none; }
#crm-table.crm-lista td { padding: 0; border: none; }
#crm-table.crm-lista tr { border-bottom: 1px solid var(--border); cursor: pointer; }
#crm-table.crm-lista tr:last-child { border-bottom: none; }
#crm-table.crm-lista tr:hover { background: var(--hover); }
#crm-table.crm-lista tr.crm-linha-ativa { background: var(--accent-soft); }

.crm-linha { display: flex; align-items: center; gap: 10px; padding: 10px 8px; min-width: 0; }
.avatar.crm-linha-avatar { width: 42px; height: 42px; flex: 0 0 42px; min-width: 42px; font-size: 15px; margin-left: 0; border: none; } /* v89.1: flex 0 0 — sem isso a linha o espremia na largura e ele virava oval (print do Victor, 19/09) */
.crm-linha-meio { flex: 1 1 auto; min-width: 0; }
/* v88 (itens 2 e 4): nome sem negrito (peso normal); telefone completo e apagado ao lado; a linha
   toda protegida contra ultrapassar o cartão (min-width:0 + overflow:hidden + nowrap + ellipsis) */
.crm-linha-nome { display: flex; align-items: center; gap: 6px; font-size: 14px; min-width: 0; overflow: hidden; white-space: nowrap; }
.crm-linha-nome-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; font-weight: 400; }
.crm-linha-tel { flex: none; color: var(--text-soft); font-size: 12px; font-weight: 500; }
.crm-linha-estrela { flex: none; }
.crm-linha-msg { font-size: 12.5px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.crm-linha-direita { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
/* v85: as regras de min-width:761px e max-width:760px do CRM NÃO ficam aqui num @media novo —
   moram DENTRO dos blocos @media que já existem (v70, mais abaixo, e "Celular", mais acima), de
   propósito: testes antigos (teste-v70 C2-C8, teste-v83 blocoMenu) recortam "o PRIMEIRO
   @media (min-width: 761px)" do arquivo inteiro, e teste-v78/v79 recortam do próprio marcador deles
   até o fim do arquivo — um @media novo solto por aqui confundiria os dois. Ver dentro de cada
   bloco os comentários "v85:" com as regras do CRM. */

/* ===== v80: painel "🤖 Artemis" (dentro de Atendimento) + bloco "💰 Proposta" (modal) =====
   Artemis é o agente que atende CLIENTE no WhatsApp — separado do Apolinho (equipe). Reaproveita
   tokens já existentes (--border, --hover, --green, --red, --text-soft) para não inventar paleta. */
#art-tabs .btn.active { background: var(--accent-soft); color: var(--primary); }
.art-card {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  background: var(--hover); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px;
}
.art-card.inativa { opacity: .55; }
.art-card-txt { flex: 1; min-width: 0; }
.art-card-txt .hint { margin: 3px 0 0; }
.art-card-acoes { display: flex; gap: 4px; flex: none; align-items: center; }
.art-pill {
  border: 1.5px solid var(--border); background: transparent; color: var(--text-soft);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.art-pill.on { background: var(--green); border-color: var(--green); color: #fff; }
#art-bloco-fixo.art-cache-on { color: var(--green); font-weight: 600; }
#art-bloco-fixo.art-cache-off { color: var(--red); font-weight: 600; }
#art-bloco-fixo.art-cache-na { color: var(--text-soft); }
.art-selo-silenciosa { background: #fef3c7; color: var(--amber); }
html[data-theme="dark"] .art-selo-silenciosa { background: #3d2f0f; }
/* fio da conversa: eventos da proposta (proposta_gerada/bloqueada/aberta/escolha) são uma linha
   centralizada, não um balão de ninguém — v80, ver renderCrmChat */
.msg-evento { align-self: center; max-width: 92%; background: transparent; box-shadow: none; text-align: center; color: var(--text-soft); }
.msg-evento .msg-time { text-align: center; }
/* bloco "💰 Proposta" no modal do atendimento */
.prop-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.prop-item:last-child { border-bottom: none; }
.prop-item-acoes { display: flex; gap: 6px; flex: none; }

/* ===== v70: menu vertical à esquerda (só no computador) =====
   MOTIVO: 12 abas somam mais de 1000px só de texto; com a marca, a busca e o bloco do usuário
   dividindo a mesma linha, num notebook de 1366px elas JÁ quebravam em duas linhas e o cabeçalho
   crescia. Altura sobra, largura não. TODO este bloco vive em min-width:761px, então o celular
   continua exatamente como era (barra de baixo + "Mais"), por construção. */
@media (min-width: 761px) {
  :root { --topbar-h: calc(52px + env(safe-area-inset-top)); --sidenav-w: 208px; }
  /* agora que a topbar tem uma linha só, a altura pode ser fixa — é dela que o menu grudado
     e o painel de notificações dependem para ficar alinhados */
  .topbar { flex-wrap: nowrap; height: var(--topbar-h); padding-top: calc(10px + env(safe-area-inset-top)); }
  .search-wrap { margin-left: auto; } /* sem as abas ocupando o meio, a busca encosta à direita */

  .shell { display: flex; align-items: flex-start; }
  #sidenav {
    flex: 0 0 var(--sidenav-w);
    position: sticky; top: var(--topbar-h); align-self: flex-start;
    min-height: calc(100vh - var(--topbar-h)); max-height: calc(100vh - var(--topbar-h));
    overflow-y: auto;
  }
  /* min-width:0 é OBRIGATÓRIO: sem ele o quadro Kanban (.column tem min-width:270px) estoura o
     flex, empurra o menu para fora da tela e a página inteira ganha rolagem lateral */
  /* v83: `margin: 0 auto` (era `0`) — numa tela larga o conteúdo parava nos 1400px e ficava colado
     no menu, com um vazio enorme à direita (print do Victor, 18/09). Margem automática dos dois lados
     centraliza o bloco no espaço que sobra, sem mexer em largura nem no menu. */
  main { flex: 1 1 auto; min-width: 0; margin: 0 auto; }

  #sidenav .tabs { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; flex: none; }
  #sidenav .tab {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left; padding: 9px 12px; font-size: 14px;
  }
  #sidenav .tab .tab-badge { margin-left: auto; }

  /* Ícones por CSS, sem tocar no HTML dos botões: três testes (v61 e v66) fixam o texto exato
     dentro de <button class="tab">, e um <span> a mais ali quebraria a bateria. */
  #sidenav .tab::before { font-size: 16px; width: 20px; text-align: center; flex: none; }
  #sidenav .tab[data-view="myday"]::before { content: "☀️"; }
  #sidenav .tab[data-view="pending"]::before { content: "📌"; }
  #sidenav .tab[data-view="board"]::before { content: "📋"; }
  #sidenav .tab[data-view="grid"]::before { content: "📊"; }
  #sidenav .tab[data-view="calendar"]::before { content: "📅"; }
  #sidenav .tab[data-view="news"]::before { content: "📰"; }
  #sidenav .tab[data-view="lembretes"]::before { content: "⏰"; }
  #sidenav .tab[data-view="clients"]::before { content: "🏢"; }
  #sidenav .tab[data-view="crm"]::before { content: "💬"; }
  #sidenav .tab[data-view="funil"]::before { content: "💼"; } /* v94: aba CRM */
  #sidenav .tab[data-view="dashboard"]::before { content: "📈"; }
  #sidenav .tab[data-view="team"]::before { content: "👥"; }
  #sidenav .tab[data-view="arquivos"]::before { content: "📁"; }
  #sidenav .tab[data-view="agente"]::before { content: "🤖"; } /* v72 */

  /* O conteúdo ficou ~208px mais estreito que a janela: quem media pela JANELA precisa passar a
     medir pelo ESPAÇO REAL, senão aperta sem necessidade entre 761 e ~1100px */
  .dash-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
  #toasts { left: calc(50% + var(--sidenav-w) / 2); }

  /* v85: Atendimento — duas colunas (lista + conversa aberta), a conversa ocupando a altura da
     tela; o #crm-modal deixa de ser "janela flutuante" e vira o painel da direita. */
  /* v89 (item 1): print do Victor (19/09) — "ficou desproporcional, sobra um bloco roxo enorme com
     só 2 mensagens". A altura FIXA do shell (calc(100vh - topbar - 168px)) esticava a conversa até
     preencher a tela mesmo com pouco conteúdo. Agora o shell não tem altura própria: cada coluna
     tem a altura do SEU conteúdo, e como as duas ficam iguais (align-items: stretch — o "truque" de
     colunas de mesma altura em flexbox, sem precisar calcular nada em JS), a coluna da lista
     acompanha a da conversa e rola por dentro quando sobra gente na lista. Quem limita a altura de
     verdade é o #crm-chat logo abaixo (min/max-height) — é ele que dá altura ao "conteúdo" da
     coluna da direita. */
  #crm-shell {
    display: flex; gap: 14px; align-items: stretch;
  }
  #crm-col-lista { flex: 0 0 360px; max-width: 400px; min-width: 280px; display: flex; flex-direction: column; min-height: 0; }
  #crm-col-lista > .cards, #crm-col-lista > #crm-filtros-panel { flex: 0 0 auto; }
  #crm-col-lista > .panel.panel-flush { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  #crm-col-chat { flex: 1 1 auto; min-width: 0; }
  /* v89: sem conversa aberta, o placeholder fica com uns 360px (não mais "altura da tela toda") */
  .crm-vazio { min-height: 360px; }
  #crm-col-chat #crm-modal.modal-backdrop { position: static; inset: auto; background: none; padding: 0; }
  /* v89: max-height:none (era 92vh da regra base .modal) — quem limita a altura agora é o
     #crm-chat; deixar o .modal com teto próprio duplicaria o limite e podia cortar a resposta. */
  #crm-col-chat #crm-modal .modal { width: 100%; max-width: none; max-height: none; overflow: visible; padding: 16px; }
  /* v89 (item 1): o chat tem um tamanho confortável (não mais "o resto da tela") — entre 360px e
     ~58vh (100vh menos ~380px de faixa + composer + folgas) — e rola por dentro depois disso. */
  /* v102 (pedido do Victor 28/10): a janela da conversa tem SEMPRE a mesma altura, como no WhatsApp Web — conversa curta
     não encolhe, conversa longa rola por dentro. */
  #crm-chat { height: calc(100vh - 380px); min-height: 360px; max-height: calc(100vh - 380px); }
  /* v86: a coluna da lista encolheu (os cartões subiram), então ela ganha a altura toda */
  #crm-col-lista > #crm-filtros-panel { flex: 0 0 auto; }
  /* v88 (item 9): Configurações cobre a conversa inteira também no computador (era uma gaveta
     estreita de 300px ao lado) — vira um painel por cima do corpo (.crm-corpo só precisa de
     position:relative para ancorar isso; a conversa continua por baixo, intacta). */
  .crm-corpo { flex-direction: row; gap: 0; position: relative; }
  .crm-gaveta.aberta {
    position: absolute; inset: 0; z-index: 6; background: var(--surface);
    padding: 4px 4px 4px 16px; overflow-y: auto; height: 100%;
  }
  .crm-gaveta-grid { grid-template-columns: 1fr 1fr; }
}

/* Tela média: o menu encolhe em vez de espremer o conteúdo ("Atendimento", o rótulo mais longo,
   ainda cabe em 168px). Menu só de ícones exigiria <span> nos rótulos — e isso quebra os testes. */
@media (min-width: 761px) and (max-width: 1100px) {
  :root { --sidenav-w: 168px; }
  #sidenav .tab { font-size: 13px; padding: 8px 9px; gap: 7px; }
}

/* v89 (item 3): "Proposta e contrato" virou DOIS quadros (Victor, 19/09) — sem CSS extra: são
   dois `.crm-gaveta-secao` soltos no mesmo grid dos outros (#crm-gaveta-grid), então ficam lado a
   lado no computador e empilham no celular pelo MESMO mecanismo de sempre (ver `crm-proposta-wrap`
   e `crm-contrato-wrap` no HTML/app.js). */

/* v89 (item 2): a aba "🤖 Agentes IA" abre com dois cartões grandes — escolher um mostra o painel
   dele embaixo (Apolinho ou o #art-panel da Artemis, que mudou de lugar: saiu de dentro de
   Atendimento e passou a viver aqui). A escolha lembra por localStorage (agenteMostrar, app.js). */
.agentes-cards { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; }
.agente-card {
  flex: 1 1 260px; text-align: left; cursor: pointer; background: var(--surface);
  border: 1.5px solid var(--border); padding: 16px 18px;
  transition: box-shadow .15s, border-color .15s;
}
.agente-card:hover { box-shadow: 0 4px 14px rgba(20,24,50,.12); }
.agente-card.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset; }
.agente-card-titulo { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.agente-card-desc { font-size: 13px; color: var(--text-soft); }

/* ===== v71: Informações pessoais (nome no canto) e barra de espaço usado ===== */
.perfil-sec { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
.perfil-sec:first-of-type { border-top: 0; padding-top: 0; margin-top: 10px; }
.perfil-sec h4 { font-size: 14px; margin-bottom: 10px; }
.quota-bar { height: 10px; border-radius: 6px; background: var(--border); overflow: hidden; }
.quota-fill { height: 100%; width: 0; background: var(--primary); transition: width .3s; }
.quota-fill.cheio { background: var(--red); }

/* ===== v73: arrastar e soltar + filtro pelo título da coluna, na aba Arquivos ===== */
.arq-arrastando { opacity: .45; }
.arq-solte-aqui { outline: 2.5px dashed var(--primary); outline-offset: -3px; background: var(--hover); }
#arq-table tbody tr[draggable="true"], .arq-pasta-card[draggable="true"] { cursor: grab; }
.th-filtro {
  background: none; border: 0; cursor: pointer; font-size: 11px;
  padding: 0 3px; color: var(--text-soft);
}
.th-filtro:hover { color: var(--text); }
.th-filtro.ativo { color: var(--primary); }
/* position:fixed (definido no JS) porque o painel da tabela rola de lado e recortaria o menu */
.th-filtro-menu { max-height: 50vh; overflow-y: auto; min-width: 180px; }

/* v94 CRM */
/* Funil de vendas (aba CRM). As colunas rolam de lado DENTRO de .funil-board — a página nunca rola
   de lado (regra do celular desde a v78). A coluna "Perdido" nasce recolhida, à direita. */
.funil-dica { margin: -6px 0 10px; }
.funil-board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 10px; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; }
.funil-col { min-width: 230px; flex: 1 0 230px; min-height: 180px; }
.funil-col-recolhida { min-width: 150px; flex: 0 0 150px; }
.funil-col-perdido .column-header { cursor: pointer; }
.funil-col-naocliente .column-header { cursor: pointer; } /* v96: "Não clientes" recolhida no filtro Todos */
.funil-col-naocliente .column-header { color: var(--muted, #6b7280); }
/* v97: campanhas e motivos de perda (aba CRM) */
.funil-relatorios { margin: 4px 0 10px; }
.funil-relatorios > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.funil-relatorios > summary small { font-weight: 400; color: var(--muted, #6b7280); }
.funil-rel-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.funil-rel-bloco { padding: 12px; min-width: 0; }
.funil-rel-bloco h4 { margin: 0 0 8px; font-size: 14px; }
.funil-rel-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.funil-rel-tabela th, .funil-rel-tabela td { padding: 4px 6px; text-align: right; border-bottom: 1px solid rgba(0,0,0,.06); }
.funil-rel-tabela th:first-child, .funil-rel-tabela td:first-child { text-align: left; overflow-wrap: anywhere; }
.funil-barra { display: grid; grid-template-columns: minmax(0, 1fr) 2fr auto; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0; }
.funil-barra-nome { overflow-wrap: anywhere; }
.funil-barra-trilho { display: block; border-radius: 6px; height: 10px; overflow: hidden; }
.funil-barra-cheia { display: block; height: 100%; border-radius: 6px; }
/* v98: meta do mês, "Apolinho sugere" e ficha completa */
.funil-meta { padding: 14px 16px; margin-bottom: 14px; }
.funil-meta-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: space-between; }

.funil-meta-valores small { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.funil-meta-trilho { display: block; border-radius: 8px; height: 12px; overflow: hidden; margin: 8px 0 6px; }
.funil-meta-cheia { display: block; height: 100%; border-radius: 8px; }

.funil-meta-rodape { font-size: 12.5px; color: var(--text-soft); }
/* v99: botões ao lado da meta, janela de relatórios, cor por responsável, movimentações */
.funil-meta-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.funil-rel-janela { max-width: 760px; }
.funil-pessoa { font-weight: 600; }
.funil-pessoa::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 0; }
.funil-mov-item { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 13px; border-left: 3px solid var(--border); padding: 3px 0 3px 9px; margin: 0 0 6px; word-break: break-word; cursor: pointer; }
.funil-mov-item:hover { background: var(--hover); }
.funil-mov-quando { font-size: 11.5px; color: var(--text-soft); grid-column: 1 / -1; }
.funil-mov-seta { color: var(--text-soft); }
.funil-sugestoes { margin: 4px 0 12px; }
.funil-sugestoes > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.funil-sugestoes > summary small { font-weight: 400; color: var(--text-soft); }
.funil-sug-topo { margin: 2px 0 8px; }
.funil-sug-item { display: block; width: 100%; text-align: left; background: var(--surface); padding: 8px 12px; margin: 0 0 8px; cursor: pointer; font: inherit; color: inherit; }

.funil-sug-texto { display: block; font-size: 13.5px; font-weight: 600; word-break: break-word; }
.funil-sug-dica { display: block; font-size: 12.5px; color: var(--text-soft); margin-top: 2px; }
.funil-sug-resp { font-size: 11.5px; color: var(--text-soft); }
.funil-ficha { max-width: 720px; }
.funil-ficha-h { margin: 14px 0 6px; font-size: 14px; }
.funil-ficha-resumo { font-size: 13px; color: var(--text-soft); margin-top: 4px; word-break: break-word; }
.funil-ficha-resumo b { color: inherit; }
.funil-ficha-secao { margin: 10px 0; }
.funil-ficha-secao ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.funil-ficha-secao li { margin: 2px 0; word-break: break-word; }
.funil-ficha-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.funil-ficha-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 3px 10px; cursor: pointer; font: inherit; font-size: 12.5px; color: inherit; }

.funil-ficha-item { font-size: 13px; border-left: 3px solid var(--border); padding: 2px 0 2px 9px; margin: 0 0 6px; word-break: break-word; }

.funil-ficha-quando { display: block; font-size: 11.5px; color: var(--text-soft); }
.funil-card-campanha { font-size: 12px; color: var(--muted, #6b7280); margin-top: 2px; }
.funil-col-soma { font-size: 12px; color: var(--text-soft); padding: 0 6px 8px; font-weight: 600; margin-top: -4px; }
.funil-col.drag-over { outline: 2.5px dashed var(--primary); outline-offset: -3px; }
.funil-vazia { text-align: center; }
.funil-card { cursor: pointer; }
.funil-card[draggable="true"] { cursor: grab; }
.funil-card-topo { display: flex; gap: 6px; align-items: flex-start; justify-content: space-between; }
.funil-card-topo .card-title { margin-bottom: 3px; word-break: break-word; }
.funil-marca-atend { flex: none; font-size: 10.5px; background: var(--accent-soft); color: var(--primary); border-radius: 10px; padding: 1px 7px; font-weight: 600; white-space: nowrap; }
.funil-card-sub, .funil-card-resp, .funil-card-acao { font-size: 12.5px; color: var(--text-soft); margin-top: 2px; word-break: break-word; }
.funil-card-valor { font-size: 13.5px; font-weight: 700; margin-top: 3px; }
.funil-sem-resp { font-style: italic; }
.funil-card-pe { margin-top: 7px; }
.funil-selo { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
.funil-selo-verde { background: #dcfce7; color: #166534; }
.funil-selo-laranja { background: #ffedd5; color: #9a3412; }
.funil-selo-vermelho { background: #fee2e2; color: #991b1b; }
html[data-theme="dark"] .funil-selo-verde { background: #14351f; color: #86efac; }
html[data-theme="dark"] .funil-selo-laranja { background: #3d2610; color: #fdba74; }
html[data-theme="dark"] .funil-selo-vermelho { background: #3d1515; color: #fca5a5; }
/* painel lateral da negociação: acima da barra de baixo do celular (80) e abaixo dos modais (100),
   para a pergunta do motivo da perda aparecer por cima dele */
.funil-painel-fundo { position: fixed; inset: 0; z-index: 91; }
.funil-painel { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100%; z-index: 92; background: var(--surface); overflow-y: auto; padding: 16px 18px 28px; }
.funil-p-topo { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.funil-p-topo h3 { font-size: 17px; word-break: break-word; }
.funil-p-sub { font-size: 12.5px; color: var(--text-soft); margin: 4px 0 12px; line-height: 1.6; }
.funil-p-perda { color: var(--red); font-weight: 600; margin-top: 4px; }
.funil-p-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.funil-p-hist-tit { margin: 16px 0 6px; font-size: 14px; }
.funil-p-historico { display: flex; flex-direction: column; gap: 8px; }
.funil-h-item { font-size: 13px; border-left: 3px solid var(--border); padding: 2px 0 2px 9px; word-break: break-word; }
.funil-h-quando { display: block; font-size: 11.5px; color: var(--text-soft); }
@media (max-width: 760px) {
  .funil-col { min-width: 78vw; flex-basis: 78vw; }
  .funil-col-recolhida { min-width: 130px; flex-basis: 130px; }
  .funil-painel { width: 100%; padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .funil-p-botoes .btn { flex: 1 1 45%; }
}

/* ===== v104: relatório de Atendimento reenquadrado (pedido do Victor, 28/10) ===== */
.crm-rel .crm-rel-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.crm-rel .crm-rel-topo h3 { margin: 0; }
.crm-rel .crm-rel-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-rel .crm-rel-acoes select { width: auto; min-width: 160px; }
.crm-rel .crm-rel-acoes .btn { text-decoration: none; white-space: nowrap; }
.modal.crm-rel { max-width: 860px; }
#crm-rel-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 6px; }
#crm-rel-cards .stat-card { padding: 12px 8px; text-align: center; min-width: 0; }
#crm-rel-cards .stat-card .stat-value { font-size: 22px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#crm-rel-cards .stat-card .stat-label { font-size: 11.5px; line-height: 1.2; overflow-wrap: normal; word-break: keep-all; }
.crm-rel-secao { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 14px; }
.crm-rel-secao h4 { margin: 0 0 8px; }
.crm-rel-secao h4 small { font-weight: 500; color: var(--text-soft); }
.crm-rel-secao .table { margin: 0; }
.crm-rel-secao .table td:not(:first-child), .crm-rel-secao .table th:not(:first-child) { text-align: right; }
@media (max-width: 900px) { #crm-rel-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { #crm-rel-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== v105: REGRAS do Atendimento (pedido do Victor, 28/10) ===== */
.crm-regra-form { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.crm-regra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; }
.crm-regra-pessoas { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.crm-regra-pessoas .chk { margin: 0; }
.crm-regra-previa { border-top: 1px dashed var(--border); padding-top: 8px; margin-top: 4px; font-weight: 600; }
.crm-regra { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); }
.crm-regra:last-child { border-bottom: none; }

.crm-regra-corpo { flex: 1; min-width: 0; }
.crm-regra-nome { font-weight: 700; }
.crm-regra-desc { font-size: 13.5px; margin-top: 2px; }
.crm-regra-meta { font-size: 11.5px; color: var(--text-soft); margin-top: 3px; }
.crm-regra-acoes { display: flex; gap: 4px; flex-wrap: wrap; flex: 0 0 auto; }
.crm-regra-sub { margin: 12px 0 4px; font-size: 13px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .03em; }
.crm-sug { padding: 10px 0; border-bottom: 1px solid var(--border); }
.crm-sug:last-child { border-bottom: none; }
.crm-sug-topo { font-size: 12.5px; color: var(--text-soft); }
.crm-sug-status.amber { color: var(--amber); font-weight: 600; }
.crm-sug-status.green { color: var(--green); font-weight: 600; }
.crm-sug-status.red { color: var(--red); font-weight: 600; }
.crm-sug-texto { margin: 4px 0; font-style: italic; }
.crm-sug-ia { background: var(--bg); border-left: 3px solid var(--primary); padding: 8px 10px; border-radius: 6px; margin: 6px 0; font-size: 13.5px; }
.crm-sug-regra { margin-top: 4px; }
.crm-sug .crm-regra-acoes { margin-top: 6px; }
#crm-regra-sugestao, #rg-texto-cliente { width: 100%; box-sizing: border-box; }

/* ===== v106: CURADORIA do Atendimento (Agentes IA, só admin) ===== */
.cur-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cur-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cur-acoes select { width: auto; min-width: 180px; }
.cur-cab { display: flex; gap: 16px; align-items: stretch; margin-bottom: 12px; }
.cur-nota { flex: 0 0 110px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; }
.cur-nota-valor { font-size: 34px; font-weight: 800; line-height: 1; }
.cur-nota-rotulo { font-size: 11.5px; color: var(--text-soft); font-weight: 600; margin-top: 4px; }

.cur-resumo { flex: 1; min-width: 0; font-size: 14px; }
.cur-meta { font-size: 12px; color: var(--text-soft); margin-bottom: 4px; }
.cur-falha { color: var(--red); font-weight: 600; }
.cur-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 8px; }
.cur-relatorio h5 { margin: 10px 0 6px; font-size: 14px; }
.cur-relatorio h5 small { font-weight: 500; color: var(--text-soft); }
.cur-lista { margin: 0; padding-left: 20px; font-size: 13.5px; }
.cur-lista li { margin: 3px 0; }
.cur-sug { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; background: var(--surface); }
.cur-sug-tipo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-soft); font-weight: 700; }
.cur-sug-texto { margin: 4px 0; }
.cur-sug-detalhe { font-size: 13px; background: var(--bg); border-left: 3px solid var(--primary); padding: 6px 10px; border-radius: 6px; margin: 6px 0; }
.cur-sug-status.green { color: var(--green); font-weight: 600; }
.cur-sug-status.red { color: var(--red); font-weight: 600; }
.cur-chat { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
.cur-msg { background: var(--bg); border-radius: 12px; padding: 8px 12px; max-width: 85%; align-self: flex-start; font-size: 14px; }
.cur-msg.mine { align-self: flex-end; background: var(--primary-soft, #e9e7ff); }
.cur-msg-autor { font-size: 11.5px; font-weight: 700; color: var(--text-soft); margin-bottom: 2px; }
.cur-chat-form { display: flex; gap: 8px; margin-top: 8px; }
.cur-chat-form input { flex: 1; min-width: 0; }

/* ===== v78: usabilidade no CELULAR — pedido do Victor (17/09), com prints =====
   Regra desta seção: NADA daqui vale no computador — tudo vive em max-width:760px.
   (v79: o ☰ do topo, que nascia escondido aqui, foi removido do HTML.) */

@media (max-width: 760px) {
  /* 1) TOPO EM UMA LINHA SÓ. Nome, engrenagem e "Sair" não cabiam ao lado da busca e empurravam
        o cabeçalho para duas linhas; foram para dentro do menu ☰. */
  #user-name, #btn-eu, #btn-logout { display: none; }
  .topbar { flex-wrap: nowrap; gap: 8px; }
  .search-wrap { flex: 1 1 auto; min-width: 0; }

  /* 2) MENU QUE ABRE TUDO. 16 itens não cabem na altura de um celular pequeno: rola por dentro. */
  /* (v79) as regras de tamanho do menu estão no bloco v79 — virou meia tela */
  .sheet-acao {
    display: block; width: 100%; text-align: left; border: none; background: transparent;
    padding: 12px 14px; font-size: 14.5px; font-weight: 600; font-family: inherit;
    color: var(--text-soft); border-radius: 10px; cursor: pointer;
  }
  .sheet-acao:hover { background: var(--hover); color: var(--text); }

  /* 3) JANELAS (ex.: Nova tarefa). Em tela cheia o padding do topo não reservava a faixa do
        relógio/notch: o título ficava DEBAIXO da barra do celular e o ✕ sumia depois de rolar —
        "não consigo fechar". Agora o cabeçalho gruda no topo, respeita a faixa do sistema e o
        ✕ fica sempre alcançável. */
  .modal { padding: 0 14px calc(24px + env(safe-area-inset-bottom)); }
  .modal-top {
    position: sticky; top: 0; z-index: 5; background: var(--surface);
    margin: 0 -14px 12px; padding: calc(12px + env(safe-area-inset-top)) 14px 10px;
    border-bottom: 1px solid var(--border);
  }
  .modal > h3:first-child { padding-top: calc(12px + env(safe-area-inset-top)); } /* janelas sem cabeçalho próprio */
  .modal .field { margin-bottom: 10px; }
  .tsection { padding: 10px 0 4px; margin-top: 8px; }

  /* 4) FILTROS. No v78 viraram uma faixa que rolava de lado; o Victor não quer NADA rolando de
        lado no celular ("deveria ser algo estático"). v79: ficam recolhidos atrás de um botão
        "Filtros" (bloco v79) e, quando abertos, quebram linha normalmente. */
  .pend-filter { margin-bottom: 12px; }
  .pend-filter-btn { padding: 6px 10px; font-size: 12.5px; }
  .arquivos-filtros #arq-f-busca { min-width: 160px; }

  /* 5) PROPORÇÕES. Títulos e espaçamentos eram os do computador. */
  main { padding-left: 12px; padding-right: 12px; padding-top: 12px; }
  .view-header { gap: 8px; }
  .panel { padding: 14px 12px; }
}

/* ===================== v79: celular — página parada, barra rolável, meia tela, cartões =====================
 * Prints + vídeo do Victor (17/09), sete queixas. TUDO aqui vale só em max-width:760px, exceto
 * as três regras logo abaixo, que ESCONDEM no computador o que foi criado para o celular. */
.cel-so { display: none; }                 /* botões "Filtros" e "Ver mais": só no celular */
#sheet-fundo { display: none; }            /* fundo escuro do menu de baixo */
.sheet-alca { display: none; }             /* alça do menu de baixo */

@media (max-width: 760px) {
  /* 1) A PÁGINA NÃO ANDA DE LADO. Barra da Agenda, tabelas e painel de notificações eram mais
        largos que a tela e a página inteira escorregava ("fragilidade de poder ficar movendo a
        tela de um lado para o outro"). Agora nada passa da borda: o que não cabe quebra linha. */
  html, body { overflow-x: hidden; max-width: 100vw; }
  main, .shell { overflow-x: hidden; max-width: 100vw; }
  .panel, .panel-flush { overflow-x: hidden; }
  #team-table { min-width: 0; }
  .cel-so { display: inline-flex; align-items: center; justify-content: center; }
  .cel-oculto { display: none !important; } /* "+ Nova tarefa" duplicado do ＋ flutuante */

  /* 2) BARRA DE BAIXO COM TODAS AS ABAS, rolando de lado (a única coisa que rola de lado, de
        propósito: ideia do Victor). "Mais" fica grudado à direita, sempre à vista. */
  #bottom-nav {
    display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; scroll-snap-type: x proximity; padding-left: 0; padding-right: 0;
  }
  #bottom-nav::-webkit-scrollbar { display: none; }
  .bnav { flex: 0 0 21%; scroll-snap-align: start; white-space: nowrap; }
  #bnav-more {
    position: sticky; right: 0; z-index: 1; background: var(--surface);
    border-left: 1px solid var(--border); border-radius: 0;
  }

  /* 3) MENU "MAIS" EM MEIA TELA, vindo de baixo, com a página escurecida por trás. Só ações da
        pessoa; fecha tocando no fundo. Não invade mais a faixa do relógio. */
  #sheet-fundo { display: block; position: fixed; inset: 0; z-index: 94; }
  #sheet-fundo.hidden { display: none !important; }
  .more-sheet {
    left: 0; right: 0; bottom: 0; z-index: 95;
    max-height: 50dvh; overflow-y: auto;
    padding: 6px 10px calc(16px + env(safe-area-inset-bottom));
  }
  .sheet-alca { display: block; width: 42px; height: 5px; border-radius: 3px; background: var(--border); margin: 6px auto 12px; }
  .more-sheet .sheet-acao { color: var(--text); font-size: 16px; padding: 14px 14px; }

  /* 4) AGENDA. O título da semana quebrava em 4 linhas disputando espaço com 6 botões; a semana
        vinha em 7 colunas porque o estilo do index.html força 7 colunas com !important (por isso
        o #cal-grid aqui, para vencer). Agora: título sozinho na 1ª linha, botões na 2ª, semana
        em lista de dias, mês na largura exata da tela. O botão do e-mail foi para o menu "Mais". */
  .cal-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
  .cal-nav h3 { text-align: center; font-size: 15px; line-height: 1.25; }
  .cal-nav #cal-today { grid-column: 1 / 2; }
  .cal-nav .cal-views { grid-column: 2 / 4; display: flex; justify-content: flex-end; }
  .cal-nav .cal-views button { padding: 6px 10px; font-size: 12.5px; }
  .cal-nav .spacer, #btn-cal-link { display: none; }
  #cal-grid.g-semana { grid-template-columns: 1fr !important; }
  #cal-grid.g-semana .cal-cell.wk { min-height: 0; padding: 8px 10px; }
  #cal-grid.g-mes .cal-cell { height: 72px; padding: 3px; }
  #cal-grid.g-mes .cal-task { font-size: 10.5px; padding: 1px 4px; }

  /* 5) JANELA DA TAREFA. ✕ grande; só o essencial à vista, o resto atrás de "Ver mais". O form
        vira coluna flex só para o "Ver mais" e o Salvar ficarem depois dos campos essenciais. */
  .modal-top .btn-sm { padding: 10px 16px; font-size: 20px; line-height: 1; }
  .modal:not(.cel-tudo) .cel-extra { display: none !important; }
  #task-form { display: flex; flex-direction: column; }
  #task-form > * { order: 0; }
  #task-form > #btn-ver-mais { order: 1; width: 100%; margin: 4px 0 12px; white-space: normal; text-align: left; font-size: 13.5px; }
  #task-form > .cel-extra { order: 2; }
  #task-form > #task-error { order: 3; }
  #task-form > .modal-actions {
    order: 4; position: sticky; z-index: 4; background: var(--surface);
    margin: 8px -14px 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border);
  }

  /* 6) FILTROS RECOLHIDOS. Quadros, Grade, Arquivos, Atendimento e Pendências ganham um botão
        "Filtros"; até tocar nele, só o essencial fica na tela. */
  .cel-filtro-bloco:not(.cel-aberto) { display: none !important; }
  #boardbar:not(.cel-aberto) .cel-filtro { display: none !important; }
  .btn-filtros-cel { margin-bottom: 10px; }
  #boardbar .btn-filtros-cel { margin-bottom: 0; }
  #boardbar { gap: 8px; }
  #boardbar .board-select { flex: 1 1 auto; min-width: 0; }
  .view-actions .btn { padding: 6px 10px; font-size: 12.5px; }

  /* 7) TABELAS VIRAM CARTÕES: só título + detalhe + ação; nada rola de lado. Tocar na linha
        (tabelas com data-cel-expande) mostra as colunas escondidas com o nome de cada uma. */
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; }
  .table tr { padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .table tr:last-child { border-bottom: none; }
  .table td { padding: 0 !important; border: none; text-align: left !important; white-space: normal !important; }
  .table td[data-cel="titulo"] { font-weight: 600; margin-bottom: 3px; }
  .table td[data-cel="titulo"] a { word-break: break-word; }
  .table td[data-cel="sub"] { display: inline-block; font-size: 12.5px; color: var(--text-soft); margin: 2px 10px 0 0; }
  .table td[data-cel="acao"] { margin-top: 8px; }
  .table td[data-cel="acao"]:empty { display: none; }
  .table td[data-cel="check"] { float: left; margin: 2px 10px 0 0 !important; }
  .table.tem-cel td[data-cel=""] { display: none; }
  .table.tem-cel tr.tr-aberta td[data-cel=""] { display: block; font-size: 13px; margin-top: 4px; }
  .table.tem-cel tr.tr-aberta td[data-cel=""]::before,
  .table:not(.tem-cel) td:not([data-rotulo=""])::before { content: attr(data-rotulo) ": "; color: var(--text-soft); font-size: 12px; }
  .table .avatars { margin-left: 0; }
  .badge-quadro-1l { max-width: 100%; }
  #view-grid.compacta .table td { padding: 0 !important; }

  /* 8) PENDÊNCIAS/MEU DIA: título na própria linha; quadro e data embaixo; etapa e prioridade
        só na janela da tarefa (cada cartão tomava 3 linhas de altura). */
  .task-row .task-row-title { flex: 1 1 calc(100% - 34px); }
  .task-row .trc { flex: 0 0 auto; }
  .task-row .trc-etapa, .task-row .trc-prio { display: none; }

  /* 9) NOTIFICAÇÕES E PREFERÊNCIAS em tela cheia (o painel era mais largo que a tela). */
  .notif-panel {
    top: 0; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: none;
    padding-top: env(safe-area-inset-top);
  }
  .notif-head { position: sticky; top: 0; background: var(--surface); z-index: 2; }
  .notif-head .btn-sm { padding: 8px 14px; font-size: 16px; }
  .notif-item { word-break: break-word; }

  /* 10) v80: painel "Artemis" (Atendimento) e bloco "Proposta" (modal). As sub-abas (#art-tabs)
        NÃO rolam de lado — regra do item 2: só a barra de baixo rola, de propósito — por isso o
        HTML já as põe em flex-wrap:wrap (quebram linha sozinhas, sem CSS extra aqui). Os cartões
        de ficha/proposta quebram linha em vez de espremer os botões; as tabelas novas
        (art-propostas-table, art-custo-table) já viram cartão sozinhas pelo mecanismo do item 7,
        porque os <th> têm data-cel. */
  .art-card, .prop-item { flex-wrap: wrap; }
  .art-card-acoes, .prop-item-acoes { flex-wrap: wrap; width: 100%; justify-content: flex-end; }
}

/* v87: selos do Atendimento — DDD fora do Espírito Santo e contato silenciado */
.crm-selo-ddd { flex: none; background: #fff4d6; color: #7a5200; border: 1px solid #f0d58a; font-size: 11px; font-weight: 600; white-space: nowrap; }
.crm-selo-silencio { flex: none; background: #eceef2; color: #4a5160; border: 1px solid #cfd3db; font-size: 11px; font-weight: 600; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.crm-silencio-wrap { margin: 8px 0; padding: 10px 12px; border: 1px solid #cfd3db; border-radius: 8px; background: #f4f5f8; }
.crm-silencio-wrap .hint { margin: 0 0 8px; }
html[data-theme="dark"] .crm-selo-ddd { background: #4a3a10; color: #f3d58a; border-color: #6b5518; }
/* v95 (R2): selo de origem — veio de anúncio ou do site do Apolo Vende */
.crm-selo-origem { flex: none; background: #e6f0fb; color: #1f4e79; border: 1px solid #b9d0ea; font-size: 11px; font-weight: 600; white-space: nowrap; }
html[data-theme="dark"] .crm-selo-origem { background: #16324d; color: #b9d6f2; border-color: #24507a; }
html[data-theme="dark"] .crm-selo-silencio { background: #2d3139; color: #c3c8d2; border-color: #454b57; }
html[data-theme="dark"] .crm-silencio-wrap { background: #23262d; border-color: #454b57; }

/* =====================================================================================================
 * v109 (Passo 3 do design, 29/10/2026): IDENTIDADE VISUAL da Apolo — o que morava em public/tema-apolo.css
 * (v87 Passo 1 + v108 Passo 2) agora mora aqui, no FIM do arquivo (mesma ordem de antes: continua
 * vencendo o que está acima). As declarações antigas acima que este bloco sempre sobrescrevia foram
 * apagadas (mesmo seletor + mesma propriedade); o resto do trecho antigo é layout/estrutura.
 * ===================================================================================================== */
/* ============================================================================
   TEMA APOLO (v87, 29/10/2026) — identidade visual do Apolo Tarefas.
   MOTIVO: o sistema parecia "feito por IA" (roxo-índigo com degradê, emoji como ícone, fonte do
   sistema, cartão com sombra, número colorido como semáforo, sem a marca). Aqui ele passa a usar
   a mesma identidade da proposta ao cliente (proposta.js): azul-marinho #012A50, âmbar #F2BD2E,
   laranja #D95204, fontes Inter (texto) e Manrope (títulos/números) e o logo da Apolo Solar.
   Carrega DEPOIS do style.css e só sobrescreve — style.css não foi alterado (vários testes
   recortam esse arquivo por marcador). Proposta e relatórios do cliente não usam este arquivo.
   Padrão e fotos antes/depois: docs/design/README.md.
   ============================================================================ */

/* Fontes: as mesmas da proposta, servidas sem login (o login também precisa delas) */
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('/proposta/assets/inter-400.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('/proposta/assets/inter-600.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('/proposta/assets/inter-700.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-style: normal; font-display: swap; src: url('/proposta/assets/manrope-700.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-weight: 800; font-style: normal; font-display: swap; src: url('/proposta/assets/manrope-800.ttf') format('truetype'); }

:root {
  /* ---- marca (iguais à proposta) ---- */
  --marinho: #012A50;
  --marinho-2: #0B3D6E;
  --marinho-3: #163F66;       /* item ativo do menu lateral */
  --ambar: #F2BD2E;
  --laranja: #C24A03;         /* a da marca (#D95204) escurecida: branco sobre ela passa de 4,5:1 (era 4,07:1) */
  --laranja-2: #A33D02;

  /* ---- neutros ---- */
  --bg: #F3F5F7;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --text: #0F2033;
  --text-soft: #5A6B7B;
  --text-mute: #5F7081;
  --border: #E1E7ED;
  --border-2: #CFD8E1;

  /* ---- semânticos: SÓ em selo pequeno, ponto ao lado do rótulo ou texto curto ---- */
  --red: #B42318;   --red-bg: #FEF0EE;
  --amber: #9A5B00; --amber-bg: #FFF4DB;
  --green: #0F6E45; --green-bg: #E8F5EE;
  --blue: #175CD3;  --blue-bg: #EAF1FD;

  /* ---- papéis (o que cada cor FAZ; muda no modo escuro) ---- */
  --btn: var(--marinho);          /* fundo de botão principal (texto branco) */
  --btn-hover: var(--marinho-2);
  --primary: var(--marinho);      /* destaque em texto/borda/foco */
  --link: #0B5CAD;
  --brand-ink: var(--marinho);    /* título de marca sobre fundo claro */
  --foco: rgba(1, 42, 80, .28);
  --muted: var(--text-soft);      /* o style.css lê var(--muted, #6b7280) em vários lugares */
  --panel: var(--surface);        /* idem var(--panel, #fff) (lista de menções, chips) */
  color-scheme: light;

  /* ---- compatibilidade com o style.css (mesmos nomes, valores novos) ---- */
  --primary-dark: var(--marinho-2);
  --violet: var(--marinho-2);
  --accent-soft: #E9EFF5;
  --hover: #F1F4F7;
  --input-bg: #FFFFFF;
  --col-bg: #ECEFF3;
  --chat-bg: #E8EDF2;
  --msg-in: #FFFFFF;
  --msg-mine: #D6E4F4;
  --msg-mine-time: #44586B;
  --primary-soft: #E6EEF7;

  /* ---- forma ---- */
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: none;                                  /* cartão = borda, não sombra */
  --shadow-pop: 0 8px 30px rgba(1, 42, 80, .14);   /* só janela e menu flutuante */

  /* ---- tipografia ---- */
  --font-texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-titulo: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
html[data-theme="dark"] {
  --bg: #0E1620; --surface: #15202C; --surface-2: #1A2735;
  --text: #E8EEF4; --text-soft: #9FB0C0; --text-mute: #8294A6;
  --border: #243442; --border-2: #30455A;
  --red: #F97066;   --red-bg: #3A1A17;
  --amber: #FDB022; --amber-bg: #3A2C10;
  --green: #47CD89; --green-bg: #12301F;
  --blue: #84ADFF;  --blue-bg: #152945;
  --btn: #2563A8; --btn-hover: #2F73BF;
  --primary: #5B9BE0; --primary-dark: #7DB1E9; --violet: #2563A8;
  --link: #8FBDEB; --brand-ink: #CFE3F7; --foco: rgba(91, 155, 224, .28);
  --accent-soft: #1E3147; --hover: #1C2A38; --input-bg: #121C27; --col-bg: #121B25;
  --chat-bg: #0B131B; --msg-in: #1F2D3D; --msg-mine: #24415F; --msg-mine-time: #9FB0C0; --primary-soft: #1E3147; --marinho-3: #24415F;
  --shadow: none;   /* o style.css redefine --shadow no escuro (sombra dupla) e vencia o :root do tema */
  --shadow-pop: 0 8px 30px rgba(0, 0, 0, .5);
  color-scheme: dark;   /* controles nativos (caixa de marcar, ícone de data, rolagem) acompanham o escuro */
}

body { font-family: var(--font-texto); color: var(--text); background: var(--bg); font-size: 14px; letter-spacing: 0; }

/* ===== Títulos: uma escala só (tela 22 · bloco 15 · número 26 · texto 14 · rótulo 11,5) ===== */
h1, h2, h3, .view-header h2, .stat-card .stat-value, .funil-meta-valores, .tile h3, .auth-card h1 { font-family: var(--font-titulo); color: var(--text); }
.view-header { margin-bottom: 18px; }
.view-header h2 { font-size: 22px; font-weight: 800; letter-spacing: -.3px; line-height: 1.2; }
.view-header h2 small { display: block; font-family: var(--font-texto); font-size: 13px; font-weight: 400; color: var(--text-soft); margin-top: 3px; letter-spacing: 0; }
.panel h3, .card-title, .funil-meta-titulo { font-family: var(--font-titulo); font-weight: 700; }
.panel h3 { font-size: 15px; }

/* ===== Botões ===== */
.btn { border-radius: var(--radius); padding: 8px 14px; font-size: 13.5px; font-weight: 600; border: 1px solid transparent; line-height: 1.3; }
.btn-primary { background: var(--btn); color: #fff; }
.btn-primary:hover { background: var(--btn-hover); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-2); }
.btn-ghost:hover { background: var(--hover); color: var(--text); }
.btn-danger { background: var(--surface); color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.btn-danger:hover { background: var(--red-bg); }
.btn-block { padding: 11px; font-size: 14.5px; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-icon { border-radius: 6px; }
/* ação de destaque (laranja da marca): UM botão por tela */
#btn-new-task.btn-primary, #btn-grid-new.btn-primary, #btn-myday-new.btn-primary, #btn-funil-novo.btn-primary { background: var(--laranja); color: #fff; }
#btn-new-task.btn-primary:hover, #btn-grid-new.btn-primary:hover, #btn-myday-new.btn-primary:hover, #btn-funil-novo.btn-primary:hover { background: var(--laranja-2); }
.news-chip.ativo, .as-chip.on, .funil-ficha-chip.ativo { background: var(--btn); border-color: var(--btn); color: #fff; }
.pend-filter-btn.active { background: var(--bc, var(--btn)); border-color: var(--bc, var(--btn)); color: #fff; }

/* ===== Campos ===== */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea, .select-sm {
  border: 1px solid var(--border-2); border-radius: var(--radius); background-color: var(--input-bg); color: var(--text);
  font-family: var(--font-texto); font-size: 13.5px;
}
.field input, .field select, .field textarea, .input-title { border: 1px solid var(--border-2); border-radius: var(--radius); font-size: 14px; }
.field input:focus, .field select:focus, .field textarea:focus,
input:focus, select:focus, textarea:focus, .search-wrap input:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--foco);
}
.field label { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.search-wrap { --busca-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B7B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .search-wrap { --busca-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239FB0C0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); }
.search-wrap input, .search-wrap input:focus {
  background-color: var(--surface-2); background-image: var(--busca-img); background-repeat: no-repeat; background-position: 11px 50%; background-size: 16px;
  width: 260px; border-radius: var(--radius); padding-left: 34px;
}
.search-wrap input:focus { background-color: var(--input-bg); }
.error { background: var(--red-bg); border-color: color-mix(in srgb, var(--red) 30%, transparent); color: var(--red); }

/* links e menções: azul legível (no claro e no escuro) */
.link-btn, .arq-breadcrumb a, .file-item a, .msg a, .mention { color: var(--link); }

/* ===== Barra superior ===== */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar-brand { gap: 10px; }
.brand-icon { width: auto; height: 28px; border-radius: 0; background: none; padding: 0; }
.brand-icon img { height: 28px; width: auto; display: block; }
html[data-theme="dark"] .brand-icon img, html[data-theme="dark"] .auth-logo img { background: #fff; border-radius: 6px; padding: 3px 7px; }
.brand-name { font-family: var(--font-titulo); font-weight: 800; font-size: 15px; color: var(--brand-ink); letter-spacing: -.2px; }
.ver { font-size: 10.5px; color: var(--text-mute); font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; align-self: center; }
.user-name { font-weight: 600; font-size: 13.5px; }
.bell-badge, .bnav-badge { background: var(--laranja); color: #fff; }
.tab-badge { background: var(--laranja); color: #fff; }

/* sino e engrenagem: ícones de linha no lugar dos emojis (o texto fica no HTML, só some da vista) */
#btn-bell, #btn-eu { font-size: 0; color: var(--text-soft); }
#btn-bell:hover, #btn-eu:hover { color: var(--text); }
#btn-bell::before, #btn-eu::before {
  content: ""; display: inline-block; width: 19px; height: 19px; vertical-align: middle; background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
#btn-bell { --ico: var(--ico-sino); }
#btn-eu { --ico: var(--ico-engrenagem); }

/* ===== Menu lateral (computador): azul-marinho da marca ===== */
@media (min-width: 761px) {
  #sidenav { background: var(--marinho); border-right: none; padding: 14px 10px; }
  html[data-theme="dark"] #sidenav { background: #0B1A2A; }
  #sidenav .tab { color: rgba(255,255,255,.74); font-weight: 400; border-radius: 6px; }
  #sidenav .tab:hover { background: rgba(255,255,255,.08); color: #fff; }
  #sidenav .tab.active { background: var(--marinho-3); color: #fff; font-weight: 600; box-shadow: none; }
  #sidenav .tab[data-view]::before {
    content: ""; width: 18px; height: 18px; flex: none; font-size: 0; background-color: currentColor; opacity: .9;
    -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
  }
  #sidenav .tab.active::before { background-color: var(--ambar); opacity: 1; }
  #sidenav .tab .tab-badge { background: var(--ambar); color: var(--marinho); }
  #sidenav .tab[data-view="myday"] { --ico: var(--ico-myday); }
  #sidenav .tab[data-view="pending"] { --ico: var(--ico-pending); }
  #sidenav .tab[data-view="board"] { --ico: var(--ico-board); }
  #sidenav .tab[data-view="grid"] { --ico: var(--ico-grid); }
  #sidenav .tab[data-view="calendar"] { --ico: var(--ico-calendar); }
  #sidenav .tab[data-view="news"] { --ico: var(--ico-news); }
  #sidenav .tab[data-view="lembretes"] { --ico: var(--ico-lembretes); }
  #sidenav .tab[data-view="clients"] { --ico: var(--ico-clients); }
  #sidenav .tab[data-view="crm"] { --ico: var(--ico-crm); }
  #sidenav .tab[data-view="funil"] { --ico: var(--ico-funil); }
  #sidenav .tab[data-view="dashboard"] { --ico: var(--ico-dashboard); }
  #sidenav .tab[data-view="team"] { --ico: var(--ico-team); }
  #sidenav .tab[data-view="arquivos"] { --ico: var(--ico-arquivos); }
  #sidenav .tab[data-view="agente"] { --ico: var(--ico-agente); }
}

/* ===== Barra de baixo e botão flutuante (celular) ===== */
#bottom-nav { background: var(--surface); border-top: 1px solid var(--border); }
.bnav { color: var(--text-mute); font-weight: 400; }
.bnav.active { color: var(--brand-ink); font-weight: 600; }
.bnav .bi {
  font-size: 0; width: 22px; height: 22px; display: inline-block; background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.bnav[data-view="myday"] .bi { --ico: var(--ico-myday); }
.bnav[data-view="pending"] .bi { --ico: var(--ico-pending); }
.bnav[data-view="board"] .bi { --ico: var(--ico-board); }
.bnav[data-view="grid"] .bi { --ico: var(--ico-grid); }
.bnav[data-view="calendar"] .bi { --ico: var(--ico-calendar); }
.bnav[data-view="news"] .bi { --ico: var(--ico-news); }
.bnav[data-view="lembretes"] .bi { --ico: var(--ico-lembretes); }
.bnav[data-view="clients"] .bi { --ico: var(--ico-clients); }
.bnav[data-view="crm"] .bi { --ico: var(--ico-crm); }
.bnav[data-view="funil"] .bi { --ico: var(--ico-funil); }
.bnav[data-view="dashboard"] .bi { --ico: var(--ico-dashboard); }
.bnav[data-view="team"] .bi { --ico: var(--ico-team); }
.bnav[data-view="arquivos"] .bi { --ico: var(--ico-arquivos); }
.bnav[data-view="agente"] .bi { --ico: var(--ico-agente); }
#bnav-more .bi { --ico: var(--ico-mais); }
#fab { background: var(--laranja); box-shadow: 0 6px 18px rgba(194, 74, 3, .35); }

/* ===== Cartões, painéis, selos: borda fina, sem sombra ===== */
.card, .panel, .stat-card, .tile, .funil-meta, .funil-rel-bloco, .notif-panel, .more-sheet {
  background: var(--surface); border: 1px solid var(--border); box-shadow: none; border-radius: var(--radius-lg);
}
.card { border-radius: var(--radius); padding: 10px 12px; }
.card.prio-alta { border-left: 1px solid var(--border); box-shadow: inset 3px 0 0 var(--red); }
.card.prio-media { border-left: 1px solid var(--border); box-shadow: inset 3px 0 0 var(--ambar); }
.card.prio-baixa { border-left: 1px solid var(--border); box-shadow: inset 3px 0 0 var(--border-2); }
.card:hover { border-color: var(--border-2); box-shadow: none; }
.card.prio-alta:hover { box-shadow: inset 3px 0 0 var(--red); }
.card.prio-media:hover { box-shadow: inset 3px 0 0 var(--ambar); }
.card.prio-baixa:hover { box-shadow: inset 3px 0 0 var(--border-2); }
.card-title { font-size: 13.5px; font-weight: 600; }
.badge { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border); }
.badge.overdue { background: var(--red-bg); color: var(--red); border-color: transparent; }
.badge.due-soon { background: var(--amber-bg); color: var(--amber); border-color: transparent; }
.count { background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); font-weight: 600; }

/* indicadores: número SEMPRE na cor do texto; o estado vai num ponto antes do rótulo */
.stat-card { padding: 14px 16px; }
.stat-card .stat-value { font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: var(--text) !important; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-card .stat-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-soft); margin-top: 6px; }
.stat-card.stat-red .stat-label::before, .stat-card.stat-green .stat-label::before, .stat-card.stat-amber .stat-label::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px;
}
.stat-card.stat-red .stat-label::before { background: var(--red); }
.stat-card.stat-green .stat-label::before { background: var(--green); }
.stat-card.stat-amber .stat-label::before { background: var(--ambar); }
#crm-cards .stat-card { text-align: left; padding: 12px 14px; }
#crm-cards .stat-card:hover { box-shadow: none; border-color: var(--border-2); }

/* quadros (mosaico): a cor do quadro vira um ponto antes do nome (var --tile-cor vem do app.js) */
.tile { border-top: 1px solid var(--border); padding: 16px; min-height: 118px; }
.tile:hover { transform: none; border-color: var(--border-2); box-shadow: none; }
.tile h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.tile h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tile-cor, var(--marinho)); flex: none; }
html[data-theme="dark"] .tile h3::before { background: var(--tile-cor, var(--primary)); }
.tile.tile-new { border: 1px dashed var(--border-2); background: transparent; }
.tile-mine { border-top: 1px solid var(--border); background: var(--surface); }
.tile-mine h3 { color: var(--text); }

/* kanban */
.column { background: var(--col-bg); border-radius: var(--radius-lg); border: 1px solid var(--border); }
.column-header { font-family: var(--font-titulo); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-soft); }
.funil-card-valor { font-family: var(--font-titulo); }

/* tabelas */
.table th { font-size: 11px; letter-spacing: .5px; color: var(--text-mute); border-bottom: 1px solid var(--border); padding: 8px 10px; }
.table td { font-size: 13.5px; padding: 10px; }
.table tbody tr:hover td { background: var(--surface-2); }

/* meta do mês (CRM) */
.funil-meta-valores { font-size: 24px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.funil-meta-cheia, .funil-meta-cheia.meta-batida { background: var(--btn); }
.funil-barra-cheia { background: var(--marinho-2); }
html[data-theme="dark"] .funil-barra-cheia { background: var(--primary); }

/* janelas e menus flutuantes: a ÚNICA sombra do sistema */
.modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); border: 1px solid var(--border); }
.modal-backdrop { background: rgba(1, 42, 80, .45); }
.notif-panel, .search-results, .more-sheet { box-shadow: var(--shadow-pop); }

/* ===== Login ===== */
.auth-screen { background: var(--bg); }
.auth-card { border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: none; padding: 36px 32px 28px; max-width: 420px; }
.auth-logo { width: auto; height: 56px; background: none; border-radius: 0; margin-bottom: 18px; display: flex; justify-content: center; }
.auth-logo img { height: 56px; width: auto; }
.auth-card h1 { font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--brand-ink); }
.auth-subtitle { font-size: 13px; }

/* ===== Avatares e cores de pessoa: o índigo (#4f46e5) sai; as outras cores de pessoa ficam ===== */
.uc0 { background: var(--marinho); } .mc0 { color: var(--marinho-2); }
html[data-theme="dark"] .uc0 { background: #2563A8; } html[data-theme="dark"] .mc0 { color: #8FBDEB; }

/* ===== Foco visível para teclado ===== */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#sidenav :focus-visible { outline-color: var(--ambar); }

/* ===== Ícones de linha (SVG embutido, usados por máscara: herdam a cor do texto) ===== */
:root {
  --ico-myday: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v2M12%2020v2M4.9%204.9l1.4%201.4M17.7%2017.7l1.4%201.4M2%2012h2M20%2012h2M4.9%2019.1l1.4-1.4M17.7%206.3l1.4-1.4%22%2F%3E%3C%2Fsvg%3E");
  --ico-pending: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2012h-6l-2%203h-4l-2-3H2%22%2F%3E%3Cpath%20d%3D%22M5.5%205.1%202%2012v6a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-6l-3.5-6.9A2%202%200%200%200%2016.8%204H7.2a2%202%200%200%200-1.7%201.1z%22%2F%3E%3C%2Fsvg%3E");
  --ico-board: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%203v18M15%203v18%22%2F%3E%3C%2Fsvg%3E");
  --ico-grid: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%209h18M3%2015h18M9%203v18%22%2F%3E%3C%2Fsvg%3E");
  --ico-calendar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%202v4M8%202v4M3%2010h18%22%2F%3E%3C%2Fsvg%3E");
  --ico-news: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2022h16a2%202%200%200%200%202-2V4a2%202%200%200%200-2-2H8a2%202%200%200%200-2%202v16a2%202%200%200%201-4%200v-9h4%22%2F%3E%3Cpath%20d%3D%22M18%2014h-8M15%2018h-5M10%206h8v4h-8z%22%2F%3E%3C%2Fsvg%3E");
  --ico-lembretes: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%208A6%206%200%200%200%206%208c0%207-3%209-3%209h18s-3-2-3-9%22%2F%3E%3Cpath%20d%3D%22M13.7%2021a2%202%200%200%201-3.4%200%22%2F%3E%3C%2Fsvg%3E");
  --ico-clients: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h18M5%2021V7l8-4v18M19%2021V11l-6-4%22%2F%3E%3Cpath%20d%3D%22M9%209v.01M9%2012v.01M9%2015v.01M9%2018v.01%22%2F%3E%3C%2Fsvg%3E");
  --ico-crm: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.4%208.4%200%200%201-9%208.4%208.4%208.4%200%200%201-3.8-.9L3%2021l1.9-5.2A8.4%208.4%200%200%201%203%2011.5a8.4%208.4%200%200%201%209-8.4%208.4%208.4%200%200%201%209%208.4z%22%2F%3E%3C%2Fsvg%3E");
  --ico-funil: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%203H2l8%209.5V19l4%202v-8.5z%22%2F%3E%3C%2Fsvg%3E");
  --ico-dashboard: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203v18h18%22%2F%3E%3Cpath%20d%3D%22M7%2015l4-5%204%203%205-7%22%2F%3E%3C%2Fsvg%3E");
  --ico-team: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2021v-2a4%204%200%200%200-4-4H5a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M23%2021v-2a4%204%200%200%200-3-3.9M16%203.1a4%204%200%200%201%200%207.8%22%2F%3E%3C%2Fsvg%3E");
  --ico-arquivos: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2019a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h5l2%203h9a2%202%200%200%201%202%202z%22%2F%3E%3C%2Fsvg%3E");
  --ico-agente: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%208V4M8%204h8%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2214%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2214%22%20r%3D%221.2%22%2F%3E%3C%2Fsvg%3E");
  --ico-mais: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2212%22%20r%3D%221.6%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.6%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2212%22%20r%3D%221.6%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
  --ico-sino: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%208A6%206%200%200%200%206%208c0%207-3%209-3%209h18s-3-2-3-9%22%2F%3E%3Cpath%20d%3D%22M13.7%2021a2%202%200%200%201-3.4%200%22%2F%3E%3C%2Fsvg%3E");
  --ico-engrenagem: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M19.4%2015a1.7%201.7%200%200%200%20.3%201.8l.1.1a2%202%200%201%201-2.8%202.8l-.1-.1a1.7%201.7%200%200%200-1.8-.3%201.7%201.7%200%200%200-1%201.5V21a2%202%200%201%201-4%200v-.1a1.7%201.7%200%200%200-1.1-1.5%201.7%201.7%200%200%200-1.8.3l-.1.1a2%202%200%201%201-2.8-2.8l.1-.1a1.7%201.7%200%200%200%20.3-1.8%201.7%201.7%200%200%200-1.5-1H3a2%202%200%201%201%200-4h.1a1.7%201.7%200%200%200%201.5-1.1%201.7%201.7%200%200%200-.3-1.8l-.1-.1a2%202%200%201%201%202.8-2.8l.1.1a1.7%201.7%200%200%200%201.8.3h0a1.7%201.7%200%200%200%201-1.5V3a2%202%200%201%201%204%200v.1a1.7%201.7%200%200%200%201%201.5%201.7%201.7%200%200%200%201.8-.3l.1-.1a2%202%200%201%201%202.8%202.8l-.1.1a1.7%201.7%200%200%200-.3%201.8v0a1.7%201.7%200%200%200%201.5%201H21a2%202%200%201%201%200%204h-.1a1.7%201.7%200%200%200-1.5%201z%22%2F%3E%3C%2Fsvg%3E");
  --ico-busca: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M21%2021l-4.3-4.3%22%2F%3E%3C%2Fsvg%3E");
}

/* ============================================================================
   CORREÇÕES DA REVISÃO VISUAL (v87, 29/10/2026)
   Saíram de uma revisão independente das telas (claro, escuro, celular) e do código: cada defeito
   foi confirmado por um segundo revisor antes de entrar aqui. Mesmo seletor/maior especificidade
   que o style.css e carregado depois, por isso vencem sem mexer nele.
   ============================================================================ */

/* ---- Campos ---- */
::placeholder { color: var(--text-soft); opacity: 1; }          /* o cinza do navegador (#757575) dava 3,7:1 no escuro */
/* foco dos <input>: a regra-base de campos vale (0,5,1) e vencia input:focus; repete os :not() para vencer */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--foco);
}
.field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]) { font-size: 14px; height: 38px; padding-top: 0; padding-bottom: 0; }
input.input-title:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]) { font-size: 16px; font-weight: 600; height: auto; padding-top: 9px; padding-bottom: 9px; }
.field select { height: 38px; padding-top: 0; padding-bottom: 0; padding-left: 8px; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible, input[type=range]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: none; }
button { font-family: inherit; }                                 /* botões sem fonte própria saíam em Arial */
.agente-card, .cc-pill { color: var(--text); }

/* ---- Barra superior e painéis flutuantes ---- */
.ver { color: var(--text-soft); }
.notif-head { gap: 8px; }
.notif-head strong { font-family: var(--font-titulo); font-weight: 700; font-size: 15px; color: var(--text); }
#eu-panel select, #eu-panel #btn-theme, #eu-panel #btn-eu-perfil { height: 40px; padding-top: 0; padding-bottom: 0; }
html[data-theme="dark"] .brand-icon img { box-sizing: content-box; height: 26px; padding: 1px 6px; }   /* o padding do cartão branco comia a altura do logo */
html[data-theme="dark"] .auth-logo img { box-sizing: content-box; height: 52px; padding: 2px 7px; }
/* celular: a barra de baixo e a folha "Mais" só existem com a pessoa logada (apareciam sob o login) */
#app.hidden ~ #bottom-nav, #app.hidden ~ #more-sheet, #app.hidden ~ #sheet-fundo,
#auth-screen:not(.hidden) ~ #bottom-nav, #auth-screen:not(.hidden) ~ #more-sheet, #auth-screen:not(.hidden) ~ #sheet-fundo { display: none !important; }

/* ---- Fundo atrás de janelas e painéis (o índigo antigo sumiu) ---- */
.funil-painel-fundo { background: rgba(1, 42, 80, .35); }
#sheet-fundo { background: rgba(1, 42, 80, .45); }
html[data-theme="dark"] .modal-backdrop, html[data-theme="dark"] .funil-painel-fundo, html[data-theme="dark"] #sheet-fundo { background: rgba(2, 8, 16, .62); }
.funil-painel { box-shadow: -8px 0 30px rgba(1, 42, 80, .14); }
html[data-theme="dark"] .funil-painel { box-shadow: -8px 0 30px rgba(0, 0, 0, .5); }

/* ---- Botões ---- */
html[data-theme="dark"] .btn-danger { background: var(--surface); }
html[data-theme="dark"] .btn-danger:hover { background: var(--red-bg); }
html[data-theme="dark"] .count, html[data-theme="dark"] .grid-done-head .count { background: var(--surface); }
.visor-topo .btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .35); }   /* o visor é sempre escuro */
html .visor-topo .btn-ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; }
#central-tabs button.btn.active { background: var(--btn); border-color: var(--btn); color: #fff; }               /* no escuro --primary é claro demais para texto branco */
#central-tabs button.btn.active:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: #fff; }
html[data-theme="dark"] .btn.btn-ghost.btn-sm.active[style] { background: var(--btn) !important; border-color: var(--btn) !important; color: #fff !important; }
html[data-theme="dark"] .art-pill.on, html[data-theme="dark"] .cc-pill.on { background: var(--green-bg); border-color: var(--green); color: var(--green); }

/* ---- Selos e cores de pessoa ---- */
.board-chip { background-image: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)) !important; }   /* texto branco passa de 4,5:1 sobre qualquer cor de quadro */
html[data-theme="dark"] .board-chip { outline: 1px solid rgba(255, 255, 255, .16); outline-offset: -1px; }
.uc1 { background: #0B7A70; } .uc2 { background: #B45309; } .uc5 { background: #15803D; } .uc9 { background: #A16207; }
.uc6 { background: #0E7490; } .mc6 { color: #0E7490; }                                                      /* o violeta (#9333ea) sai */
html[data-theme="dark"] .uc1, html[data-theme="dark"] .uc3, html[data-theme="dark"] .uc4, html[data-theme="dark"] .uc7 { color: #06121F; }
html[data-theme="dark"] .uc6 { background: #22D3EE; color: #06121F; } html[data-theme="dark"] .mc6 { color: #22D3EE; }
html[data-theme="dark"] .mc1 { color: #2DD4BF; } html[data-theme="dark"] .mc2 { color: #FBBF24; } html[data-theme="dark"] .mc3 { color: #F472B6; }
html[data-theme="dark"] .mc4 { color: #7DB1F5; } html[data-theme="dark"] .mc5 { color: #4ADE80; }
html[data-theme="dark"] .avatar { border-color: var(--surface); }
.funil-ficha-item.f-conversa { border-left-color: var(--blue); }
.funil-ficha-item.f-proposta { border-left-color: var(--amber); }
.funil-ficha-item.f-tarefa { border-left-color: var(--green); }

/* ---- Conversa (Atendimento e chat da tarefa): balões e separador de data ---- */
.msg { background: var(--msg-in); box-shadow: none; }
.msg.mine { background: var(--msg-mine); }
#crm-chat .msg::before { background: var(--msg-in); }
#crm-chat .msg.mine::before { background: var(--msg-mine); }
.msg.mine .msg-time { color: var(--msg-mine-time); }
.crm-data-sep { background: var(--surface); border: 1px solid var(--border); }

/* ---- Listas, grades e barras ---- */
#view-pending .task-row, #view-myday .task-row { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; }
.funil-sug-item { border: 1px solid var(--border); border-left: 4px solid var(--amber); border-radius: var(--radius); box-shadow: none; }   /* a faixa lateral de urgência volta */
.funil-sug-item.sug-vermelha { border-left-color: var(--red); }
#view-pending .task-row:hover, #view-myday .task-row:hover { border-color: var(--border-2); }
#board-cols .column { border-top: 1px solid var(--border) !important; }                                    /* a faixa grossa na cor do quadro saiu */
.bar { background: var(--border); } .bar .seg-open { background: var(--border-2); }
.funil-barra-trilho, .funil-meta-trilho { background: var(--border); }
.funil-rel-tabela th, .funil-rel-tabela td { border-bottom-color: var(--border); }
html[data-theme="dark"] .funil-meta-cheia, html[data-theme="dark"] .funil-meta-cheia.meta-batida { background: var(--primary); }
.funil-col-recolhida { opacity: 1; border-style: dashed; }
.tile.tile-lifting, .tile.tile-lifting:hover { opacity: .75; transform: scale(1.03) rotate(1deg); box-shadow: var(--shadow-pop); border-color: var(--border-2); cursor: grabbing; }
html[data-theme="dark"] .tile h3::before { outline: 1px solid rgba(255, 255, 255, .4); }
.np-ph { background: var(--marinho); }                                                                     /* manchete sem foto: o degradê índigo/azul-céu saiu */
html[data-theme="dark"] .np-ph { background: var(--marinho-3); }
.nf-hero { border-radius: var(--radius-lg); box-shadow: none; }
.news-row-destaque { border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: none; }
#crm-cards .stat-card.stat-setor .stat-value { font-size: 22px; }

/* ---- Calendário ---- */
.cal-task.overdue { background: var(--red-bg); color: var(--red); }
.cal-task.done { background: var(--green-bg); color: var(--green); }
.cal-grid:not(.g-ano) { border-radius: var(--radius-lg); box-shadow: none; outline: 1px solid var(--border); outline-offset: -1px; }
.cal-nav h3 { text-transform: none; }
.cal-nav h3::first-letter { text-transform: uppercase; }

/* ---- Agentes IA ---- */
.agente-card { font-family: var(--font-texto); border-radius: var(--radius-lg); }
.agente-card-titulo { font-family: var(--font-titulo); }
.agente-card:not(.active):hover { box-shadow: none; border-color: var(--border-2); }
.mention-box { border-radius: var(--radius); border-color: var(--border-2); box-shadow: var(--shadow-pop); }
.mention-box button, .as-chip { font-family: var(--font-texto); }
.mention-box button { color: var(--text); }

/* ---- Equipe e indicadores ---- */
.view-header h3 { font-size: 15px; font-weight: 700; letter-spacing: -.1px; line-height: 1.3; }
.view-header h3 small { font-family: var(--font-texto); font-size: 13px; font-weight: 400; color: var(--text-soft); letter-spacing: 0; margin-left: 6px; }

/* ---- Dashboard: números neutros, linhas legíveis ---- */
#dash-no-prazo > div:first-child, #dash-conversao > div:first-child { color: var(--text) !important; }
#dash-no-prazo > div:first-child, #dash-conversao > div:first-child, #dash-tempo-medio > div > div > div:first-child, .cur-nota-valor { font-family: var(--font-titulo); font-variant-numeric: tabular-nums; }
.cur-nota.boa .cur-nota-valor, .cur-nota.media .cur-nota-valor, .cur-nota.ruim .cur-nota-valor { color: var(--text); }
.cur-nota-rotulo::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--text-mute); }
.cur-nota.boa .cur-nota-rotulo::before { background: var(--green); }
.cur-nota.media .cur-nota-rotulo::before { background: var(--ambar); }
.cur-nota.ruim .cur-nota-rotulo::before { background: var(--red); }
#dash-board-filter { padding: 5px 10px; font-size: 12.5px; }
[data-dash="vencem-7d"] .task-row, [data-dash="sem-responsavel"] .task-row { grid-template-columns: auto minmax(0, 1fr) auto; }   /* título não some mais ("E… p…") */
[data-dash="vencem-7d"] .task-row .trc-data, [data-dash="sem-responsavel"] .task-row .trc-data { grid-column: 3; grid-row: 1; }
[data-dash="vencem-7d"] .task-row .trc-quadro, [data-dash="sem-responsavel"] .task-row .trc-quadro { grid-column: 2; grid-row: 2; justify-content: flex-start; }
[data-dash] .dash-mover:focus-within { opacity: 1; }
[data-dash] .dash-mover button:not(:hover) { color: var(--text-soft); border-color: var(--border-2); }
html[data-theme="dark"] [data-dash] .dash-mover button:hover { background: var(--btn); border-color: var(--btn); color: #fff; }

/* ---- Telas com filtros e barras de ação ---- */
.crm-filtros { grid-auto-flow: row dense; }
.crm-filtros #crm-f-responsavel { grid-column: 1 / -1; text-overflow: ellipsis; }
#central-ensine, #central-ensine-tipo, #btn-central-ensinar { height: 40px; box-sizing: border-box; }
#btn-central-ensinar { display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 761px) {
  #view-clients .view-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  #view-clients .view-actions #client-search, #view-clients .view-actions .btn { box-sizing: border-box; height: 34px; padding-top: 0; padding-bottom: 0; }
  .cal-nav #cal-prev, .cal-nav #cal-next, .cal-nav #cal-today, .cal-nav #btn-cal-link { box-sizing: border-box; height: 30px; padding-top: 0; padding-bottom: 0; }
  .cal-nav #cal-prev, .cal-nav #cal-next { width: 30px; padding-left: 0; padding-right: 0; }
  .cal-nav .cal-views { box-sizing: border-box; height: 30px; }
}

/* ---- Celular ---- */
@media (max-width: 760px) {
  .search-wrap input, .search-wrap input:focus { width: 100%; }                                          /* o campo de 260px vazava por cima do sino */
  #bottom-nav .bnav { flex: 0 0 20%; min-width: 0; }                                                     /* 5 colunas exatas: o "Mais" cobria o 4º item */
  #btn-funil-novo.btn-primary { background: var(--btn); color: #fff; }                                   /* um laranja por tela: o FAB já é o laranja */
  #btn-funil-novo.btn-primary:hover { background: var(--btn-hover); }
  .modal { border-radius: 0; border: 0; box-shadow: none; }                                               /* janela em tela cheia */
  .dlg-modal.modal { border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-pop); }
  .notif-panel { border-radius: 0; border: 0; box-shadow: none; }
  .more-sheet { border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; }
  [data-dash] .dash-mover { opacity: 1; }
  [data-dash] .dash-mover button { width: 28px; height: 28px; background: var(--surface); border-color: var(--border-2); border-radius: 8px; }
}

/* ============================================================================
   CORREÇÕES DA 2ª REVISÃO (v87, 29/10/2026) — telas e janelas que a 1ª rodada não viu,
   alturas dos controles e regressões das correções anteriores. Mesma regra: vence por
   especificidade/ordem, sem mexer no style.css.
   ============================================================================ */

/* ---- Alturas iguais nas barras de ferramentas (computador): controles 34px, campos de formulário 38px ---- */
.view-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (min-width: 761px) {
  .view-actions > .btn, .view-actions > .select-sm, .view-actions > input.select-sm, .view-actions > select,
  #boardbar .btn, #boardbar .select-sm, #grid-filtros .btn, #grid-filtros .select-sm,
  .arquivos-filtros .btn, .arquivos-filtros .select-sm, .crm-filtros .select-sm,
  .crm-faixa-controles select.select-sm, .crm-faixa-controles .btn-sm, .cur-acoes select, .cur-acoes .btn {
    box-sizing: border-box; height: 34px; padding-top: 0; padding-bottom: 0;
  }
  #team-table select.select-sm, #team-table .btn-sm { box-sizing: border-box; height: 32px; padding-top: 0; padding-bottom: 0; }
  #boardbar #btn-new-task { margin-left: auto; }
  #view-team > .view-header:first-child > .view-actions .btn { box-sizing: border-box; height: 34px; padding-top: 0; padding-bottom: 0; }
}
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.btn:hover, a.btn:focus-visible { text-decoration: none; }
#btn-bell, #btn-eu { box-sizing: border-box; width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
#btn-bell:hover, #btn-eu:hover { background: var(--hover); color: var(--text); }
#btn-logout, .search-wrap input { box-sizing: border-box; height: 34px; padding-top: 0; padding-bottom: 0; }
.modal .add-row > input.select-sm, .modal .add-row > select.select-sm { box-sizing: border-box; height: 38px; padding-top: 0; padding-bottom: 0; }
#btn-add-subtask, #btn-add-label-new, #btn-add-label, #btn-add-dep, #btn-invite, #btn-add-reminder, #btn-chat-audio, #btn-chat-send { box-sizing: border-box; height: 38px; padding-top: 0; padding-bottom: 0; }
.modal .add-row > textarea.select-sm { min-height: 38px !important; }
.crm-config-setor select, #crm-config-setores select { box-sizing: border-box; height: 38px; padding: 0 10px; font-family: var(--font-texto); font-size: 13.5px; }
#crm-rel-dias { box-sizing: border-box; height: 36px; padding: 0 10px; font-family: var(--font-texto); font-size: 13.5px; }
#cur-pergunta { box-sizing: border-box; height: 40px; padding: 0 12px; font-size: 14px; }
#btn-cur-enviar { height: 40px; }
.cur-chat-form { align-items: center; }
#cur-relatorios, #btn-cur-avaliar { box-sizing: border-box; height: 36px; padding-top: 0; padding-bottom: 0; }
#view-agente #central-ensine, #view-agente #central-ensine-tipo, #view-agente #btn-central-ensinar, #view-agente #btn-prefs-salvar { height: 38px; box-sizing: border-box; }
#view-agente #btn-prefs-salvar { padding-top: 0; padding-bottom: 0; }

/* ---- Campos soltos (fora de .field) e textareas com estilo inline ---- */
#crm-regra-sugestao { padding: 10px 12px; font-size: 14px; line-height: 1.4; font-family: var(--font-texto); resize: vertical; }
#crm-resposta-texto, #art-ficha-texto, #art-doc-resumo { border: 1px solid var(--border-2) !important; border-radius: var(--radius) !important; }
#art-ficha-texto, #art-doc-resumo { padding: 9px 12px !important; }
#crm-resposta-texto:focus, #art-ficha-texto:focus, #art-doc-resumo:focus { border-color: var(--primary) !important; }
input[type=checkbox]:focus, input[type=radio]:focus, input[type=range]:focus { box-shadow: none; }
.chk input, .chk input[type=checkbox], .myday-picker input[type=checkbox] { flex: none; }
.myday-picker label > .sub { flex: 0 1 auto; max-width: 45%; text-align: right; }
.field label small { font-size: 11.5px; font-weight: 400; line-height: 1.35; }
.field label.chk { display: flex; align-items: flex-start; gap: 6px; line-height: 18px; }
.field label.chk input { flex: none; margin: 1.5px 0 0; }
.modal:not(.dlg-modal) > h3:first-child { margin-bottom: 14px; }
.funil-rel-janela .funil-p-topo { margin-bottom: 12px; }
#arq-vazio { padding: 14px 10px !important; }
.btn:disabled, button:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled:active { transform: none; }
.btn-primary:disabled:hover { background: var(--btn); }
.btn-ghost:disabled:hover { background: var(--surface); color: var(--text); }
#lembrete-modal .field-row { flex-direction: column; gap: 0; }
#lembrete-modal .field-row .field { flex: 0 0 auto; }
#crm-config-modal .field-row .field { flex: 1 1 120px; }
#dash-personalizar-modal .modal-actions { position: sticky; bottom: 0; z-index: 2; background: var(--surface); border-top: 1px solid var(--border); margin: 10px -22px -22px; padding: 12px 22px 22px; }
#btn-fechar-crm-regras, #btn-fechar-crm-relatorio { background: var(--surface); color: var(--text); border-color: var(--border-2); }
#btn-fechar-crm-regras:hover, #btn-fechar-crm-relatorio:hover { background: var(--hover); color: var(--text); }
#btn-crm-regra-sugerir { padding: 8px 14px; font-size: 13.5px; }

/* ---- Abas, links, cartões e estados ---- */
#art-tabs button.btn.active { background: var(--btn); border-color: var(--btn); color: #fff; }
#art-tabs button.btn.active:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: #fff; }
.art-card-txt a, .art-card-txt a:visited { color: var(--link); text-underline-offset: 2px; }
.art-card-txt a:hover { color: var(--primary-dark); }
/* concluído/arquivado/inativo = riscado e cor secundária, NÃO opacidade (a opacidade se multiplicava e o texto chegava a 1,7:1) */
.card.done, .card.done:hover, .card.archived, .task-row.done, .task-row.archived, .table tbody tr.row-done, #grid-done-table .done-title { opacity: 1; }
.card.done .card-title, .task-row.done .task-row-title { color: var(--text-soft); text-decoration: line-through; }
.card.archived .card-title, .table tbody tr.row-done td:not(.done-title) { color: var(--text-soft); }
.card.done.prio-alta, .card.done.prio-media, .card.done.prio-baixa { box-shadow: inset 3px 0 0 var(--border-2); }
#view-agente .art-card.inativa, #view-agente .central-card.inativa { opacity: 1; background: var(--surface-2); border-style: dashed; border-color: var(--border-2); }
#view-agente .art-card.inativa strong, #view-agente .central-card.inativa .cc-texto { color: var(--text-soft); }
.crm-regra.pausada .crm-regra-corpo { opacity: 1; color: var(--text-soft); }
#crm-table.crm-lista tr.crm-linha-fechada { opacity: 1; }
#crm-table.crm-lista tr.crm-linha-fechada .avatar { filter: grayscale(1); }
.table.crm-lista tbody tr:hover td { background: transparent; }
html .central-card, html .plat-card, html .art-card { border-radius: var(--radius); border: 1px solid var(--border); }
.subtask-area { border-radius: var(--radius); }
.crm-vazio { border-radius: var(--radius-lg); }
.crm-gaveta-secao, .crm-config-template, .msg-doc { border-radius: var(--radius); }
.cur-msg .msg-time { font-size: 10.5px; color: var(--text-soft); text-align: right; margin-top: 2px; }
.cur-msg.mine .msg-time { color: var(--msg-mine-time); }
.badge.crm-janela-aberta { color: var(--green); background: var(--green-bg); border-color: transparent; }
.badge.crm-janela-fechada { color: var(--red); background: var(--red-bg); border-color: transparent; }
.badge.badge-sem-tarefa, .badge.crm-selo-origem { color: var(--blue); background: var(--blue-bg); border-color: transparent; }
.badge.crm-selo-ddd { color: var(--amber); background: var(--amber-bg); border-color: transparent; }
.lbl { background-image: linear-gradient(rgba(0, 0, 0, .30), rgba(0, 0, 0, .30)) !important; }
.lbl:empty { background-image: none !important; }
.pend-filter-btn.active[style] { background-image: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)); }
.pend-filter-btn.active[style] .pend-count { background: rgba(0, 0, 0, .28); color: #fff; }
.stat-card.stat-red .stat-label, .stat-card.stat-green .stat-label, .stat-card.stat-amber .stat-label { padding-left: 13px; text-indent: -13px; }
html[data-theme="dark"] .color-sw:not(.sel) { outline: 1px solid rgba(255, 255, 255, .35); outline-offset: -1px; }
html[data-theme="dark"] .lbl, html[data-theme="dark"] .pend-filter-btn.active[style] { outline: 1px solid rgba(255, 255, 255, .16); outline-offset: -1px; }
html[data-theme="dark"] .dash-mover button:hover { background: var(--btn); border-color: var(--btn); color: #fff; }
.mc1 { color: #0B7A70; } .mc2 { color: #B45309; } .mc5 { color: #15803D; } .mc9 { color: #A16207; }
html[data-theme="dark"] .mc7 { color: #F87171; } html[data-theme="dark"] .mc8 { color: #CBD5E1; } html[data-theme="dark"] .mc9 { color: #FACC15; }

/* ---- Cor do responsável no CRM (vem do JS): todas as 10 passam de 4,5:1, sem roxo/índigo ---- */
.funil-pessoa[style*="#2563eb" i] { color: #1D4ED8 !important; }
.funil-pessoa[style*="#16a34a" i] { color: #15803D !important; }
.funil-pessoa[style*="#dc2626" i] { color: #B91C1C !important; }
.funil-pessoa[style*="#9333ea" i] { color: #0F766E !important; }
.funil-pessoa[style*="#ea580c" i] { color: #C2410C !important; }
.funil-pessoa[style*="#0891b2" i] { color: #0E7490 !important; }
.funil-pessoa[style*="#db2777" i] { color: #BE185D !important; }
.funil-pessoa[style*="#ca8a04" i] { color: #A16207 !important; }
.funil-pessoa[style*="#4f46e5" i] { color: #0B3D6E !important; }
.funil-pessoa[style*="#059669" i] { color: #047857 !important; }
html[data-theme="dark"] .funil-pessoa[style*="#2563eb" i] { color: #7DB1F5 !important; }
html[data-theme="dark"] .funil-pessoa[style*="#16a34a" i] { color: #4ADE80 !important; }
html[data-theme="dark"] .funil-pessoa[style*="#dc2626" i] { color: #F87171 !important; }
html[data-theme="dark"] .funil-pessoa[style*="#9333ea" i] { color: #5EEAD4 !important; }
html[data-theme="dark"] .funil-pessoa[style*="#ea580c" i] { color: #FB923C !important; }
html[data-theme="dark"] .funil-pessoa[style*="#0891b2" i] { color: #22D3EE !important; }
html[data-theme="dark"] .funil-pessoa[style*="#db2777" i] { color: #F472B6 !important; }
html[data-theme="dark"] .funil-pessoa[style*="#ca8a04" i] { color: #FACC15 !important; }
html[data-theme="dark"] .funil-pessoa[style*="#4f46e5" i] { color: #8FBDEB !important; }
html[data-theme="dark"] .funil-pessoa[style*="#059669" i] { color: #34D399 !important; }

/* ---- Calendário ---- */
.cal-cell.today .cal-task:not(.overdue):not(.done) { background: var(--surface); }
html[data-theme="dark"] .cal-views button.active { background: var(--marinho-3); color: var(--brand-ink); }
.cal-cell.other:not(.today) { background: var(--bg); }
.cal-cell.other .cal-day-num { opacity: 1; }
.cal-cell.other:not(.today) .cal-day-num { font-weight: 400; color: var(--text-mute); }
.cal-mini { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
@media (min-width: 761px) { #cal-grid.g-ano { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.nf-hero { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.news-row-destaque .news-row-title { flex: 1; min-width: 0; }

/* ---- Topo e painéis ---- */
@media (min-width: 761px) { .notif-panel { right: 18px; } }
@media (min-width: 761px) and (max-width: 1000px) {
  .topbar-brand { flex: none; white-space: nowrap; }
  .search-wrap input, .search-wrap input:focus { width: 170px; }
  .topbar-user { min-width: 0; }
  .user-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
}
#boot { color: var(--text-soft) !important; }

/* ---- Celular (2ª rodada) ---- */
@media (max-width: 760px) {
  .topbar { padding-left: 12px; padding-right: 12px; }
  .search-wrap { position: static; }
  .search-results { left: 8px; right: 8px; top: calc(100% + 4px); width: auto; max-width: none; }                /* a lista saía da tela pela esquerda */
  .modal .field-row .field { flex: 0 0 auto; }                                                                    /* campos lado a lado viravam caixas de 140px de ALTURA */
  .panel[data-dash] > h3 { padding-right: 90px; text-wrap: balance; }                                               /* o título não fica sob os botões ↑ ↓ ✕ */
  [data-dash="cards"] { padding-top: 36px; }
  [data-dash="cards"] > .dash-mover { top: 0; right: 0; }
  #btn-new-task.btn-primary { background: var(--btn); color: #fff; }                                              /* o + flutuante já é o laranja */
  #btn-new-task.btn-primary:hover { background: var(--btn-hover); }
  #boardbar > .btn, #boardbar > .select-sm, .btn.btn-filtros-cel { box-sizing: border-box; height: 36px; padding-top: 0; padding-bottom: 0; }
  #view-funil .view-actions > select, #view-funil .view-actions > input, #view-funil .view-actions > .btn { box-sizing: border-box; height: 36px; padding-top: 0; padding-bottom: 0; }
  .modal-top .btn-sm { border: 1px solid var(--border-2); border-radius: var(--radius); }
  .cal-nav #cal-prev, .cal-nav #cal-next, .cal-nav #cal-today, .cal-nav .cal-views { box-sizing: border-box; height: 36px; }
  .cal-nav #cal-prev, .cal-nav #cal-next, .cal-nav #cal-today { padding-top: 0; padding-bottom: 0; }
  #art-panel.panel-flush { padding: 14px 0; }
  .table tbody tr:hover td { background: transparent; }
}

/* ============================================================================
   CORREÇÕES DA 3ª REVISÃO (v87, 29/10/2026) — só o que restou de importante: duas
   correções da 2ª rodada que brigavam entre si e itens que as telas novas mostraram.
   ============================================================================ */
[data-dash] .dash-mover { opacity: 1; }                                       /* ↑ ↓ ✕ sempre legíveis (a 75% o contraste caía para 3,2:1) */
@media (min-width: 761px) {
  #main:has(#view-grid:not(.hidden)) #boardbar #btn-new-task { display: none; }  /* Grade: um laranja só (o do cabeçalho) */
  .cal-nav { flex-wrap: wrap; row-gap: 8px; }
  .cal-nav h3 { white-space: nowrap; }
  .cal-nav #btn-cal-link { margin-left: auto; }                               /* em 768-860px o "Vincular" saía da tela */
  #crm-fechar-wrap .field-row { align-items: flex-end; }
  #dash-personalizar-modal .modal-actions { bottom: -22px; }                  /* o rodapé fixo parava 22px acima da borda */
}
.lbl-chip .chip-x { background: transparent; border: 0; color: #fff; opacity: .9; cursor: pointer; padding: 0 2px; font-size: 12px; line-height: 1; }
.lbl-chip .chip-x:hover { opacity: 1; }                                       /* o ✕ das etiquetas era um botão sem reset: invisível no claro */
#lbl-color, #lbl-color-new { flex: 0 0 150px; width: 150px; min-width: 150px; }
.subtask input[type="date"] { box-sizing: border-box; height: 36px; padding-top: 0; padding-bottom: 0; }
.myday-picker label > span:first-of-type { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.myday-picker label > .sub { flex: 0 0 auto; max-width: 45%; text-align: right; }
.grid-done-head { opacity: 1; }
.grid-done-head .count { background: var(--surface); color: var(--text-soft); }
html[data-theme="dark"] .pend-filter-btn.active .pend-count { background: rgba(0, 0, 0, .28); color: #fff; }
#btn-crm-anexar-contrato { box-sizing: border-box; height: 38px; padding-top: 0; padding-bottom: 0; }
#arq-table td a:not(.hint), #arq-table td a:not(.hint):visited { color: var(--link); }
#curadoria-panel .cur-topo > div:first-child { flex: 1 1 100%; min-width: 0; }
#curadoria-panel .cur-topo .grid-done-head { padding: 0 0 8px !important; margin-bottom: 6px; }
@media (max-width: 760px) {
  #btn-eu { display: none; }                                                  /* a engrenagem fica no menu "Mais" no celular (decisão v78) */
  #crm-config-modal .field-row .field { flex: 0 0 auto; }                     /* o id da regra do computador vencia a correção do celular */
  #dash-personalizar-modal .modal-actions {
    bottom: calc(-24px - env(safe-area-inset-bottom)); margin: 10px -14px calc(-24px - env(safe-area-inset-bottom));
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }
  #task-form > .modal-actions { bottom: calc(-24px - env(safe-area-inset-bottom)); }
  .modal-top #btn-crm-detalhes, .modal-top #btn-close-crm, .modal-top #btn-task-back, .modal-top #preview-modal-baixar { height: 42px; padding: 0 14px; font-size: 14px; line-height: 1; }
  .chart-bars { gap: 2px; }                                                   /* gráfico de 14 dias transbordava (404px em 340px) */
  .cbar { min-width: 0; }
  .cbar .cbar-num { font-size: 9px; letter-spacing: -.3px; white-space: nowrap; }
  .cbar .cbar-lbl { font-size: 9px; letter-spacing: -.2px; }
  .cbar:nth-child(odd) .cbar-lbl { visibility: hidden; }
  #t-subtasks .subtask:has(> input[type="date"]) { flex-wrap: wrap; }
  #t-subtasks .subtask:has(> input[type="date"]) > .st-title { flex: 1 1 calc(100% - 30px); min-width: 0; }
  #t-subtasks .subtask > input[type="date"] { margin-left: 26px; }
}

/* ===== PASSO 2 do design (v108 / site v88): ícones de linha no lugar dos emojis dos textos =====
   Uso (app.js): ICO('lixo') antes de um texto, ICO('lixo', 1) quando o botão é só o ícone (title/aria-label obrigatório).
   No HTML: <span class="ico ico-lixo" aria-hidden="true"></span>. Estado = ponto colorido: PONTO('red'|'amber'|'green'|'blue'|'cinza').
   O emoji continua onde é CONTEÚDO (o que o cliente/equipe escreveu, reações do WhatsApp) e nas mensagens do WhatsApp. */
:root {
  --ico-lixo: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18%22%2F%3E%3Cpath%20d%3D%22M8%206V4a1%201%200%200%201%201-1h6a1%201%200%200%201%201%201v2%22%2F%3E%3Cpath%20d%3D%22M19%206l-1%2014a2%202%200%200%201-2%202H8a2%202%200%200%201-2-2L5%206%22%2F%3E%3Cpath%20d%3D%22M10%2011v6M14%2011v6%22%2F%3E%3C%2Fsvg%3E");
  --ico-cadeado: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%2211%22%20width%3D%2216%22%20height%3D%2210%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2011V7a4%204%200%200%201%208%200v4%22%2F%3E%3C%2Fsvg%3E");
  --ico-chave: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2215.5%22%20r%3D%224.5%22%2F%3E%3Cpath%20d%3D%22M10.7%2012.3%2021%202M17%206l3%203M14%209l2%202%22%2F%3E%3C%2Fsvg%3E");
  --ico-repetir: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%202l4%204-4%204%22%2F%3E%3Cpath%20d%3D%22M3%2011V9a3%203%200%200%201%203-3h15%22%2F%3E%3Cpath%20d%3D%22M7%2022l-4-4%204-4%22%2F%3E%3Cpath%20d%3D%22M21%2013v2a3%203%200%200%201-3%203H3%22%2F%3E%3C%2Fsvg%3E");
  --ico-conversa: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22%2F%3E%3C%2Fsvg%3E");
  --ico-clipe: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.4%2011.1l-9.2%209.2a6%206%200%200%201-8.5-8.5l9.2-9.2a4%204%200%200%201%205.7%205.7l-9.2%209.2a2%202%200%200%201-2.8-2.8l8.5-8.5%22%2F%3E%3C%2Fsvg%3E");
  --ico-lista: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%206h13M8%2012h13M8%2018h13%22%2F%3E%3Cpath%20d%3D%22M3%206h.01M3%2012h.01M3%2018h.01%22%2F%3E%3C%2Fsvg%3E");
  --ico-alerta: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.3%203.9%201.8%2018a2%202%200%200%200%201.7%203h17a2%202%200%200%200%201.7-3L13.7%203.9a2%202%200%200%200-3.4%200z%22%2F%3E%3Cpath%20d%3D%22M12%209v4M12%2017h.01%22%2F%3E%3C%2Fsvg%3E");
  --ico-microfone: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%226%22%20height%3D%2212%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M19%2010v1a7%207%200%200%201-14%200v-1M12%2018v4M8%2022h8%22%2F%3E%3C%2Fsvg%3E");
  --ico-parar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E");
  --ico-olho: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207S2%2012%202%2012z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
  --ico-arquivo: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpath%20d%3D%22M14%202v6h6%22%2F%3E%3C%2Fsvg%3E");
  --ico-baixar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5M12%2015V3%22%2F%3E%3C%2Fsvg%3E");
  --ico-subir: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%3Cpath%20d%3D%22M17%208l-5-5-5%205M12%203v12%22%2F%3E%3C%2Fsvg%3E");
  --ico-editar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22%2F%3E%3Cpath%20d%3D%22M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4z%22%2F%3E%3C%2Fsvg%3E");
  --ico-link: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2013a5%205%200%200%200%207.5.5l3-3a5%205%200%200%200-7-7l-1.7%201.7%22%2F%3E%3Cpath%20d%3D%22M14%2011a5%205%200%200%200-7.5-.5l-3%203a5%205%200%200%200%207%207l1.7-1.7%22%2F%3E%3C%2Fsvg%3E");
  --ico-celular: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%2212%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M11%2018h2%22%2F%3E%3C%2Fsvg%3E");
  --ico-pessoa: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021v-1a6%206%200%200%201%206-6h4a6%206%200%200%201%206%206v1%22%2F%3E%3C%2Fsvg%3E");
  --ico-anuncio: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011v2a1%201%200%200%200%201%201h3l6%204V6L7%2010H4a1%201%200%200%200-1%201z%22%2F%3E%3Cpath%20d%3D%22M16%209a3%203%200%200%201%200%206%22%2F%3E%3Cpath%20d%3D%22M19%206a7%207%200%200%201%200%2012%22%2F%3E%3C%2Fsvg%3E");
  --ico-silencio: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.7%2021a2%202%200%200%201-3.4%200%22%2F%3E%3Cpath%20d%3D%22M18.6%2013A17%2017%200%200%201%2018%208M6.3%206.3A6%206%200%200%200%206%208c0%207-3%209-3%209h14M18%208a6%206%200%200%200-9.3-5M2%202l20%2020%22%2F%3E%3C%2Fsvg%3E");
  --ico-duvida: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M9.1%209a3%203%200%200%201%205.8%201c0%202-3%203-3%203M12%2017h.01%22%2F%3E%3C%2Fsvg%3E");
  --ico-ok: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M8%2012l3%203%205-6%22%2F%3E%3C%2Fsvg%3E");
  --ico-sair: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%22%2F%3E%3Cpath%20d%3D%22M16%2017l5-5-5-5M21%2012H9%22%2F%3E%3C%2Fsvg%3E");
  --ico-lua: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012.8A9%209%200%201%201%2011.2%203a7%207%200%200%200%209.8%209.8z%22%2F%3E%3C%2Fsvg%3E");
  --ico-arquivar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%2220%22%20height%3D%225%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M4%208v11a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8M10%2012h4%22%2F%3E%3C%2Fsvg%3E");
  --ico-relogio: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E");
  --ico-ficha: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2211%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M15%2010h3M15%2014h3M6%2016a3%203%200%200%201%206%200%22%2F%3E%3C%2Fsvg%3E");
  --ico-mover: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%209l-3%203%203%203M9%205l3-3%203%203M15%2019l-3%203-3-3M19%209l3%203-3%203M2%2012h20M12%202v20%22%2F%3E%3C%2Fsvg%3E");
  --ico-whatsapp: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020l1.3-3.9A8%208%200%201%201%208.1%2019.1z%22%2F%3E%3Cpath%20d%3D%22M9.5%209.3c.2%201.9%201.6%203.4%203.5%203.8l1.1-1%201.7.8-.4%201.4c-3.1.3-6.1-2.6-5.8-5.7l1.3-.5z%22%2F%3E%3C%2Fsvg%3E");
  --ico-instagram: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M17.5%206.5h.01%22%2F%3E%3C%2Fsvg%3E");
  --ico-email: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%207l9%206%209-6%22%2F%3E%3C%2Fsvg%3E");
}
.ico {
  display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.17em; flex: none; margin-inline-end: .38em;
  background-color: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.ico.ico-so { margin-inline-end: 0; }
.ico-whatsapp { --ico: var(--ico-whatsapp); } .ico-instagram { --ico: var(--ico-instagram); } .ico-email { --ico: var(--ico-email); } /* v94 (site): canais do Atendimento */
.ico-lixo { --ico: var(--ico-lixo); } .ico-cadeado { --ico: var(--ico-cadeado); } .ico-chave { --ico: var(--ico-chave); } .ico-repetir { --ico: var(--ico-repetir); } .ico-conversa { --ico: var(--ico-conversa); } .ico-clipe { --ico: var(--ico-clipe); } .ico-lista { --ico: var(--ico-lista); } .ico-alerta { --ico: var(--ico-alerta); } .ico-microfone { --ico: var(--ico-microfone); } .ico-parar { --ico: var(--ico-parar); } .ico-olho { --ico: var(--ico-olho); } .ico-arquivo { --ico: var(--ico-arquivo); } .ico-baixar { --ico: var(--ico-baixar); } .ico-subir { --ico: var(--ico-subir); } .ico-editar { --ico: var(--ico-editar); } .ico-link { --ico: var(--ico-link); } .ico-celular { --ico: var(--ico-celular); } .ico-pessoa { --ico: var(--ico-pessoa); } .ico-anuncio { --ico: var(--ico-anuncio); } .ico-silencio { --ico: var(--ico-silencio); } .ico-duvida { --ico: var(--ico-duvida); } .ico-ok { --ico: var(--ico-ok); } .ico-sair { --ico: var(--ico-sair); } .ico-lua { --ico: var(--ico-lua); } .ico-arquivar { --ico: var(--ico-arquivar); } .ico-relogio { --ico: var(--ico-relogio); } .ico-ficha { --ico: var(--ico-ficha); } .ico-mover { --ico: var(--ico-mover); }
.ico-calendario { --ico: var(--ico-calendar); } .ico-predio { --ico: var(--ico-clients); } .ico-pasta { --ico: var(--ico-arquivos); } .ico-robo { --ico: var(--ico-agente); } .ico-equipe { --ico: var(--ico-team); } .ico-sino { --ico: var(--ico-sino); } .ico-engrenagem { --ico: var(--ico-engrenagem); } .ico-noticia { --ico: var(--ico-news); } .ico-sol { --ico: var(--ico-myday); } .ico-grafico { --ico: var(--ico-dashboard); } .ico-funil { --ico: var(--ico-funil); } .ico-busca { --ico: var(--ico-busca); }
.pt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 6px; vertical-align: 1px; flex: none; background: var(--text-mute); }
.pt-red { background: var(--red); } .pt-amber { background: var(--amber); } .pt-green { background: var(--green); } .pt-blue { background: var(--blue); } .pt-cinza { background: var(--text-mute); }

/* v109: no celular o título das telas fica MENOR (pedido do Victor na v78, 17/09: "títulos e espaçamentos menores no celular";
   pedido de novo em 29/10). O tamanho do título NUNCA tinha valido no celular: o <style> embutido no index.html (v42, "títulos
   das abas padronizados") fixa 22px/13px e é lido DEPOIS deste arquivo — por isso o "#app" aqui (ganha pela especificidade). O
   espaço abaixo do título (10px) tinha sido desfeito pela identidade visual da v87; fica no fim para vencer o 18px de cima. */
@media (max-width: 760px) {
  .view-header { margin-bottom: 10px; }
  #app .view-header h2 { font-size: 18px; }
  #app .view-header h2 small { font-size: 12px; margin-top: 2px; }
}
/* ============================================================================
   v110 (site v90, 29/10/2026): DASHBOARD REDESENHADO — pedido do Victor ("horrível, desorganizado, sem proporcionalidade").
   Grade de 12 colunas que fecha sempre em 100% (o app.js dá o grid-column de cada quadro — dashEmpacotar), quadros com a
   mesma anatomia (cabeçalho arrastável + corpo), mesma altura por linha, números em Manrope. As regras antigas de
   .dash-mover/.dash-span/[data-dash="cards"] (style.css e <style> do index.html) ficam sobrescritas aqui.
   ============================================================================ */
#dash-secoes.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
#dash-secoes > .dash-card { grid-column: span 12; min-width: 0; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: none; }
#dash-secoes > .dash-card.hidden { display: none; }
#dash-secoes > .dash-card[title] { cursor: default; }
.dash-dica { margin: -4px 0 12px; }
.dash-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); cursor: grab; user-select: none; -webkit-user-select: none; min-height: 46px; box-sizing: border-box; }
.dash-head:active { cursor: grabbing; }
.dash-head::before { content: ""; flex: 0 0 auto; width: 8px; height: 14px; opacity: .7; background-image: radial-gradient(circle, var(--text-mute) 1.1px, transparent 1.4px); background-size: 4px 5px; background-position: 0 0; }
.dash-head h3, #dash-secoes .dash-card > .dash-head > h3 { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; font-size: 14px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-ferr { display: flex; gap: 4px; flex: 0 0 auto; }
#dash-secoes .dash-head .dash-mover, #dash-secoes .dash-head .dash-ferr { position: static; opacity: 1; transition: none; }
#dash-secoes .dash-head .dash-ferr button { height: 26px; min-width: 26px; padding: 0 7px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text-soft); border-radius: 6px; font: 600 12px/1 var(--font-texto); cursor: pointer; }
#dash-secoes .dash-head .dash-ferr button:hover, #dash-secoes .dash-head .dash-ferr button:focus-visible { background: var(--btn); border-color: var(--btn); color: #fff; }
#dash-secoes .dash-head .dash-ferr .dash-largura { font-family: var(--font-titulo); font-weight: 800; min-width: 34px; }
#dash-secoes .dash-head .dash-ferr .dash-sobe, #dash-secoes .dash-head .dash-ferr .dash-desce { display: none; }   /* no computador se arrasta */
.dash-body { padding: 14px; flex: 1 1 auto; min-height: 0; max-height: 520px; overflow: auto; }
.dash-body.hidden { display: none; }
#dash-secoes .dash-card > .dash-body .cards, #dash-secoes .dash-stats { margin: 0; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }   /* 140px: quadro de um terço = 2 colunas (2×2), metade = 4, inteiro = 3 números largos */
#dash-secoes .dash-stats .stat-card { background: var(--surface-2); border: 1px solid var(--border); box-shadow: none; padding: 12px 14px; min-width: 0; }
#dash-secoes .dash-stats .stat-card .stat-value { font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dash-secoes .dash-stats .stat-card .stat-label { white-space: normal; }
#dash-secoes > [data-dash="cards"] .dash-stats .stat-card .stat-value { font-size: 30px; }
.dash-numero { font-family: var(--font-titulo); font-size: 32px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.dash-numero-2 { font-size: 20px; font-weight: 700; color: var(--text-soft); }
#dash-secoes .dash-body .person-row:last-child { margin-bottom: 0; }
#dash-secoes .dash-body .empty-hint { padding: 22px 6px; }
.dash-sugestao { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.dash-sugestao:last-of-type { border-bottom: 0; }
#dash-secoes .dash-tabela th, #dash-secoes .dash-tabela td { padding: 8px 8px; }
#dash-secoes .dash-tabela td:not(:first-child), #dash-secoes .dash-tabela th:not(:first-child) { text-align: right; white-space: nowrap; }
#dash-secoes #dash-team-table { min-width: 680px; }
/* arrastar: o quadro que sai fica translúcido; o alvo mostra uma barra âmbar no lado em que vai cair */
#dash-secoes > .dash-card.dash-arrastando { opacity: .45; }
#dash-secoes > .dash-card.dash-alvo-antes { box-shadow: -5px 0 0 var(--ambar); }
#dash-secoes > .dash-card.dash-alvo-depois { box-shadow: 5px 0 0 var(--ambar); }
/* o gráfico de 14 dias usa a largura toda do corpo */
#dash-secoes [data-dash="14d"] .dash-body { overflow-x: auto; }
/* Personalizar: a linha do catálogo ganhou o seletor de largura */
#dash-personalizar-lista .central-card { display: flex; align-items: center; gap: 10px; }
#dash-personalizar-lista .central-card select[data-dp-largura] { flex: 0 0 auto; width: auto; min-width: 118px; }
#dash-personalizar-lista .central-card .dash-ferr button { height: 28px; min-width: 28px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text-soft); border-radius: 6px; cursor: pointer; }
#dash-personalizar-lista .central-card .dash-ferr button:hover { background: var(--btn); border-color: var(--btn); color: #fff; }
/* Créditos das plataformas */
#plat-grid.plat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
#plat-grid .plat-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
#plat-grid .plat-card h4 { margin: 0; font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#plat-grid .plat-saldo { font-family: var(--font-titulo); font-size: 22px; font-weight: 800; letter-spacing: -.3px; font-variant-numeric: tabular-nums; color: var(--text); }
#plat-grid .plat-meta { font-size: 12px; color: var(--text-soft); line-height: 1.4; }
#plat-grid .plat-gasto strong { color: var(--text); }
#plat-grid .plat-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
#plat-grid .plat-form { display: grid; gap: 6px; }
#plat-grid .plat-form input, #plat-grid .plat-form select { box-sizing: border-box; height: 36px; padding: 0 10px; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--input-bg); color: var(--text); font: 400 13.5px var(--font-texto); }
#plat-grid .plat-form .plat-acoes { margin-top: 2px; }
/* telas médias: a grade continua de 12 colunas (o app.js já não deixa nenhum quadro menor que metade) */
/* celular: todo quadro inteiro; no lugar de arrastar ficam os botões ↑ ↓ */
@media (max-width: 760px) {
  #dash-secoes > .dash-card { grid-column: 1 / -1 !important; }
  #dash-secoes > [data-dash="cards"] { padding-top: 0; }
  .dash-head { cursor: default; }
  .dash-head::before { display: none; }
  #dash-secoes .dash-head .dash-ferr .dash-sobe, #dash-secoes .dash-head .dash-ferr .dash-desce { display: inline-block; }
  #dash-secoes .dash-head .dash-ferr .dash-largura { display: none; }
  #dash-secoes .dash-head .dash-ferr button { width: 30px; height: 30px; min-width: 30px; padding: 0; border-radius: 8px; }
  .dash-body { padding: 12px; max-height: none; }
  #dash-secoes .dash-card > .dash-body .cards, #dash-secoes .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dash-secoes > [data-dash="cards"] .dash-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }                         /* os três números do topo numa linha só */
  #dash-secoes > [data-dash="cards"] .dash-stats .stat-card { padding: 10px 10px; }
  #dash-secoes > [data-dash="cards"] .dash-stats .stat-card .stat-value { font-size: 24px; }
  #dash-personalizar-lista .central-card { flex-wrap: wrap; }
}
html[data-theme="dark"] .dash-head { background: var(--surface-2); }
html[data-theme="dark"] #dash-secoes .dash-head .dash-ferr button:hover { background: var(--btn); border-color: var(--btn); color: #fff; }

/* v111: ATENDIMENTO NO CELULAR — a conversa ocupa a tela (caso do Victor, 30/10, foto do iPhone: "o atendimento ficou muito pequeno e
   ruim de mexer"). Medido num iPhone 390x844: cabeçalho 176px + controles 119px + resposta 152px deixavam só 341px (40%) para a
   conversa — no Safari de verdade, com as barras do navegador, sobrava menos ainda. Agora: cabeçalho numa linha (voltar, nome,
   engrenagem de Configurações), controles numa faixa só que desliza para o lado (o "Comando" e o botão de assumir/devolver vêm
   primeiro) e a resposta numa linha (clipe, texto que cresce, Enviar). Só no celular; nenhum id/texto mudou (testes e app.js). */
:root { --ico-voltar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2018l-6-6%206-6%22%2F%3E%3C%2Fsvg%3E"); }
@media (max-width: 760px) {
  #crm-modal .crm-janela-conversa { padding-bottom: 0; }
  #crm-modal .modal-top.crm-faixa-topo {
    flex: none; flex-wrap: nowrap; gap: 8px; margin: 0 -14px; padding: calc(6px + env(safe-area-inset-top)) 10px 6px; align-items: center;
  }
  #crm-modal .modal-top #btn-close-crm, #crm-modal .modal-top #btn-crm-detalhes {
    flex: none; width: 40px; height: 40px; padding: 0; font-size: 0; display: inline-flex; align-items: center; justify-content: center;
  }
  #crm-modal .modal-top #btn-close-crm::before, #crm-modal .modal-top #btn-crm-detalhes::before {
    content: ''; width: 22px; height: 22px; background-color: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
  }
  #crm-modal .modal-top #btn-close-crm { --ico: var(--ico-voltar); border-color: transparent; background: transparent; }
  #crm-modal .modal-top #btn-crm-detalhes { --ico: var(--ico-engrenagem); }
  #crm-modal .modal-top #btn-close-crm span { display: none; }
  #crm-modal .crm-faixa-topo .spacer { display: none; }
  #crm-modal .crm-faixa-titulo { flex: 1 1 auto; min-width: 0; margin: 0; }
  #crm-modal .crm-faixa-titulo h3 { font-size: 16px; line-height: 1.25; margin: 0; }
  /* selos quebram linha: "Restrito", "DDD", "silenciada" e "janela fechada" são avisos — nunca ficam escondidos (revisão v111) */
  #crm-modal .crm-faixa-badges { flex-wrap: wrap; row-gap: 3px; gap: 5px; }
  #crm-modal .crm-faixa-badges > * { flex: none; }
  #crm-modal .crm-faixa-badges .badge { font-size: 11px; padding: 1px 7px; }
  #crm-modal .crm-faixa-tel, #crm-modal .crm-faixa-protocolo { font-size: 11.5px; }
  /* controles: duas linhas compactas, TUDO à vista (uma faixa que deslizava escondia Setor/Prioridade/Etapa sem aviso — revisão
     v111). Linha 1: "Comando", assumir/devolver e a etapa; linha 2: responsável, setor e prioridade dividindo a largura.
     flex: none = a faixa não é espremida quando a conversa é longa (cortava os botões). */
  #crm-modal .crm-faixa-controles {
    flex: none; flex-wrap: wrap; overflow: visible; gap: 6px; row-gap: 6px; margin: 0 -14px; padding: 8px 14px;
  }
  #crm-modal .crm-faixa-controles::after { content: ''; order: 4; flex: 0 0 100%; height: 0; } /* quebra a linha depois da etapa */
  #crm-modal .crm-faixa-controles > * { flex: none; }
  #crm-modal .crm-faixa-controles > .spacer { display: none; }
  #crm-modal .crm-faixa-controles select.select-sm, #crm-modal .crm-faixa-controles .btn-sm {
    box-sizing: border-box; height: 36px; padding-top: 0; padding-bottom: 0; font-size: 13px;
  }
  #crm-modal .crm-faixa-controles select.select-sm { max-width: 150px; }
  /* o "Comando: Humano · Nome" encolhe com reticências para a etapa caber na 1ª linha (o nome também está no select logo abaixo) */
  #crm-modal .crm-faixa-controles > #crm-a-quem-fala { order: 1; flex: 1 1 40px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
  #crm-modal #btn-crm-modo { order: 2; }
  #crm-modal #crm-a-etapa-selo { order: 3; }
  #crm-modal .crm-a-resp-wrap { order: 5; flex: 1 1 auto; min-width: 0; }
  #crm-modal .crm-a-resp-wrap select { flex: 1 1 0; min-width: 80px; max-width: none; }
  #crm-modal #crm-a-setor { order: 6; flex: 1 1 80px; min-width: 0; max-width: none; }
  #crm-modal #crm-a-prioridade { order: 7; flex: 0 1 auto; }
  #crm-modal #btn-crm-fechar { order: 8; }
  /* conversa: de ponta a ponta, ocupa tudo o que sobra */
  #crm-modal #crm-chat { min-height: 120px; margin: 0 -14px; border-radius: 0; padding: 10px 12px; }
  /* resposta: uma linha — clipe | texto (cresce até 5 linhas) | Enviar; aviso da janela e modelo aprovado ficam em cima */
  #crm-modal #crm-responder-wrap {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; align-items: end;
    flex: none; margin: 0 -14px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border);
    background: var(--surface);
  }
  #crm-modal #crm-responder-wrap > * { grid-column: 1 / -1; }
  #crm-modal #crm-responder-wrap > .add-row, #crm-modal #crm-responder-wrap > .modal-actions { display: contents; }
  #crm-modal #crm-responder-wrap .spacer { display: none; }
  #crm-modal #crm-janela-aviso:empty { display: none; }
  #crm-modal #crm-janela-aviso { margin: 0 0 6px; font-size: 12px; }
  #crm-modal #crm-template-wrap { margin-bottom: 8px; }
  #crm-modal #btn-crm-anexar-arquivo {
    grid-column: 1; grid-row: 3; width: 42px; height: 42px; padding: 0; font-size: 0;
    display: inline-flex; align-items: center; justify-content: center; --ico: var(--ico-clipe);
  }
  #crm-modal #btn-crm-anexar-arquivo::before {
    content: ''; width: 20px; height: 20px; background-color: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
  }
  /* 16px: com menos que isso o iPhone dá zoom ao tocar no campo (o estilo embutido no index.html diz 14px — daí o !important) */
  #crm-modal #crm-resposta-texto {
    grid-column: 2; grid-row: 3; box-sizing: border-box; height: 42px; min-height: 42px; max-height: 132px;
    resize: none; margin: 0; font-size: 16px !important; line-height: 1.35; padding: 9px 12px !important;
  }
  /* o texto de exemplo numa linha só (no iPhone SE ele quebrava e a caixa vazia já abria com 2 linhas) */
  #crm-modal #crm-resposta-texto::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #crm-modal #btn-crm-responder { grid-column: 3; grid-row: 3; height: 42px; padding: 0 16px; margin: 0; }
  #crm-modal #crm-resposta-arquivo-nome { grid-column: 1 / -1; grid-row: 4; margin-top: 4px; font-size: 12px; }
  #crm-modal #crm-resposta-arquivo-nome:empty { display: none; }
}

/* v112: opções da mensagem interativa da Artemis na conversa (triagem do 1º contato) — desenhadas como no WhatsApp: um bloco
   por opção, separado por linha, texto centralizado na cor de link. Caso do Victor (30/10): a equipe via só o texto. */
#crm-chat .msg-botoes { margin-top: 6px; border-top: 1px solid var(--border); }
#crm-chat .msg-botao { padding: 7px 10px; text-align: center; font-weight: 600; color: var(--link); border-bottom: 1px solid var(--border); font-size: 13px; }
#crm-chat .msg-botao:last-child { border-bottom: 0; padding-bottom: 2px; }
#cur-status { display: flex; align-items: center; gap: 2px; margin: 0 0 10px; font-size: 13px; color: var(--text); }
#cur-status.hidden { display: none; }

/* v113: Regras do Atendimento — parecer da Curadoria (conflito/parecida/complementos) e regras fixas */
.crm-sug-bloco { margin-top: 4px; font-size: 13px; }
.crm-sug-bloco.red b { color: var(--red); }
.crm-sug-bloco.amber b { color: var(--amber); }
.crm-regra.fixa .crm-regra-nome { color: var(--text-soft); }
#crm-regras-fixas-det > summary { cursor: pointer; list-style: none; }
#crm-regras-fixas-det > summary::-webkit-details-marker { display: none; }
#crm-regras-fixas-det > summary::before { content: ''; display: inline-block; width: 0; height: 0; border: 5px solid transparent; border-left-color: var(--text-soft); margin-right: 6px; vertical-align: 1px; }
#crm-regras-fixas-det[open] > summary::before { transform: rotate(90deg) translate(2px, 2px); }

/* v94 (site): Configurar → Canais (estado do WhatsApp e do Instagram) */
.crm-config-canal { display: flex; align-items: center; gap: 6px; padding: 6px 0; }
.crm-linha-tel .ico { opacity: .75; }

/* v115 (pedido do Victor 30/10): barra de CANAIS no topo do Atendimento — abas com ícone de linha + nome + contagem; a escolhida
 * fica em azul-marinho com ponto verde; E-mail desligado até o próximo lote. Mesma altura dos controles de barra (34px). */
.crm-canais { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 14px; }
.crm-canal { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--border-2); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.crm-canal .ico { margin-inline-end: 0; }
.crm-canal:hover:not(:disabled):not(.ativo) { border-color: var(--btn); }
.crm-canal.ativo { background: var(--btn); color: #fff; border-color: var(--btn); }
.crm-canal.ativo .pt { margin-left: 2px; }
.crm-canal:disabled { opacity: .55; cursor: not-allowed; }
.crm-canal-n { font-family: var(--font-titulo); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-soft); line-height: 18px; text-align: center; }
.crm-canal-n:empty { display: none; }
.crm-canal.ativo .crm-canal-n { background: rgba(255, 255, 255, .18); color: #fff; }
.crm-canal-breve { font-size: 11px; font-weight: 500; color: var(--text-soft); }
html[data-theme="dark"] .crm-canal.ativo { color: #fff; }

/* v116: fichas/documentos da Artemis — estado escrito (ponto + palavra) ao lado do botão de ação */
.art-estado { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }

/* ============================================================================
   v119 (site v99, 02/11/2026): MODELOS DA META CRIADOS PELO SISTEMA — fila de pedidos e formulário em Atendimento → Configurar.
   Motivo: a janela de 24 h fechou e não havia modelo cadastrado (caso real do Victor, 02/11).
   ============================================================================ */
.crm-modelo { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; background: var(--surface-2); }
.crm-modelo-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-modelo-topo strong { font-family: var(--font-titulo); font-size: 13.5px; }
.crm-modelo-texto { font-size: 13.5px; margin-top: 6px; color: var(--text); overflow-wrap: anywhere; }
.crm-modelo-form { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px 4px; margin: 0 0 14px; background: var(--surface); }
.crm-modelo-form textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border-2); border-radius: var(--radius); font: 400 14px var(--font-texto); background: var(--input-bg); color: var(--text); resize: vertical; }
.crm-modelo-form .field-row .field { flex: 1 1 200px; }
#crm-template-params .hint { overflow-wrap: anywhere; }

/* ===== v121 (site v101, 02/11/2026): VIGIA DE CANAIS — faixa vermelha quando o WhatsApp do atendimento ou o Instagram para
   (pedido do Victor: "sinal vermelho com uma frase"). Fica no topo do <main>, em todas as telas para o administrador. ===== */
.alerta-canais { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.alerta-canais.hidden { display: none; }
.alerta-canal { display: flex; align-items: flex-start; gap: 4px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); border-left: 4px solid var(--red); border-radius: var(--radius); background: var(--red-bg); color: var(--text); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.alerta-canal .pt { margin-top: 6px; }
.alerta-canal strong { color: var(--red); }
.crm-config-canal-falha { margin: 6px 0 2px; padding: 8px 10px; border-left: 3px solid var(--red); border-radius: var(--radius); background: var(--red-bg); color: var(--text); overflow-wrap: anywhere; }
.crm-config-canal-falha strong { color: var(--red); }