/* NANOPOS CRM CLIENTES V1 */

body.crm-enabled { overflow: hidden; }

.crm-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #f3f4f6;
}

.crm-tabs {
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: #fff;
}

.crm-tab-btn {
  appearance: none;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  padding: 0 18px;
  color: #64748b;
  font: 800 0.82rem/1 Inter, system-ui, sans-serif;
  letter-spacing: .025em;
  cursor: pointer;
}

.crm-tab-btn:hover { color: #111827; background: #f8fafc; }
.crm-tab-btn.active { color: var(--primary, #2563eb); border-bottom-color: var(--primary, #2563eb); }

.crm-tab-content { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.crm-tab-panel { display: none; height: 100%; min-height: 0; }
.crm-tab-panel.active { display: flex; flex-direction: column; }
.crm-tab-panel > .app-grid { flex: 1; min-height: 0; height: auto !important; }

.crm-summarybar {
  flex: 0 0 auto;
  min-height: 66px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}

.crm-kpi {
  min-width: 112px;
  padding: 7px 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.crm-kpi b { display:block; font-size:1.03rem; color:#111827; }
.crm-kpi span { display:block; margin-top:2px; color:#64748b; font-size:.68rem; font-weight:700; text-transform:uppercase; }
.crm-summary-actions { margin-left:auto; display:flex; gap:8px; align-items:center; }

.crm-btn {
  min-height: 38px;
  border: 1px solid #dbe2ea;
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
  color: #1f2937;
  font: 800 .78rem/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}
.crm-btn:hover { background:#f8fafc; border-color:#cbd5e1; }
.crm-btn.primary { background:var(--primary,#2563eb); border-color:var(--primary,#2563eb); color:#fff; }
.crm-btn.primary:hover { filter:brightness(.96); }
.crm-btn.good { background:#059669; border-color:#059669; color:#fff; }
.crm-btn.warn { background:#f59e0b; border-color:#f59e0b; color:#111827; }
.crm-btn.danger { background:#dc2626; border-color:#dc2626; color:#fff; }
.crm-btn:disabled { opacity:.45; cursor:not-allowed; }
.crm-btn.sm { min-height:30px; padding:0 9px; font-size:.7rem; }

.crm-workspace {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px;
}

.crm-compose-grid {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(480px, 1.45fr);
  gap: 14px;
  min-height: 100%;
}

.crm-card {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
  min-width:0;
}
.crm-card-head {
  min-height:48px;
  padding:10px 14px;
  border-bottom:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.crm-card-head h2, .crm-card-head h3 { margin:0; font-size:.88rem; color:#334155; text-transform:uppercase; letter-spacing:.025em; }
.crm-card-body { padding:14px; }

.crm-field { margin-bottom:12px; }
.crm-field label { display:block; margin:0 0 5px; font-size:.7rem; font-weight:800; color:#64748b; text-transform:uppercase; }
.crm-field input, .crm-field select {
  width:100%; min-height:38px; border:1px solid #dbe2ea; border-radius:7px; padding:8px 10px;
  background:#fff; color:#111827; font:500 .84rem Inter,system-ui,sans-serif;
}
.crm-field input:focus, .crm-field select:focus { outline:2px solid rgba(37,99,235,.12); border-color:var(--primary,#2563eb); }
.crm-row { display:flex; gap:10px; align-items:end; }
.crm-row > * { flex:1; min-width:0; }

.crm-recipient-controls { display:grid; grid-template-columns:1fr 150px; gap:8px; margin-bottom:8px; }
.crm-recipient-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.crm-selected-count { margin-left:auto; font-size:.75rem; font-weight:800; color:#334155; }
.crm-recipient-list {
  border:1px solid #e5e7eb; border-radius:8px; max-height:360px; overflow:auto; background:#fff;
}
.crm-recipient-row {
  display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:8px; align-items:center;
  padding:9px 10px; border-bottom:1px solid #f1f5f9; cursor:pointer;
}
.crm-recipient-row:last-child { border-bottom:0; }
.crm-recipient-row:hover { background:#f8fafc; }
.crm-recipient-name { font-size:.8rem; font-weight:800; color:#111827; }
.crm-recipient-meta { margin-top:2px; font-size:.68rem; color:#64748b; }
.crm-recipient-stats { text-align:right; font-size:.66rem; color:#475569; white-space:nowrap; }

.crm-editor-wrap { border:1px solid #dbe2ea; border-radius:9px; overflow:hidden; background:#fff; }
.crm-editor-toolbar {
  display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:7px; border-bottom:1px solid #e5e7eb; background:#f8fafc;
}
.crm-tool {
  min-width:34px; height:32px; border:1px solid #dbe2ea; border-radius:6px; background:#fff; color:#334155;
  font:800 .75rem Inter,system-ui,sans-serif; cursor:pointer; padding:0 9px;
}
.crm-tool:hover { background:#eef2ff; border-color:#c7d2fe; }
.crm-tool.sep { margin-left:5px; }
.crm-rich-editor {
  min-height:220px; max-height:360px; overflow:auto; padding:14px; outline:none;
  font:15px/1.55 Arial,Helvetica,sans-serif; color:#111827; background:#fff;
}
.crm-rich-editor:empty:before { content:attr(data-placeholder); color:#94a3b8; pointer-events:none; }
.crm-rich-editor img { max-width:100%; height:auto; }
.crm-var-token {
  display:inline-block; padding:1px 5px; border-radius:5px; background:#dbeafe; color:#1d4ed8;
  font-weight:800; font-size:.9em; white-space:nowrap;
}
.crm-vars { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.crm-var-btn {
  min-height:28px; border:1px solid #bfdbfe; background:#eff6ff; color:#1d4ed8; border-radius:999px;
  padding:0 9px; font:800 .68rem Inter,system-ui,sans-serif; cursor:pointer;
}
.crm-var-btn:hover { background:#dbeafe; }
.crm-hint { color:#64748b; font-size:.7rem; line-height:1.45; }

.crm-preview {
  margin-top:12px; border:1px solid #e5e7eb; border-radius:9px; background:#f8fafc; padding:12px;
}
.crm-preview-title { font-size:.68rem; font-weight:900; color:#64748b; text-transform:uppercase; margin-bottom:7px; }
.crm-preview-box { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:14px; min-height:110px; overflow:auto; }
.crm-preview-subject { margin-bottom:10px; font-size:.8rem; color:#334155; }
.crm-whatsapp-bubble {
  max-width:680px; white-space:pre-wrap; background:#e7ffdb; border:1px solid #c9e8bc; border-radius:10px;
  padding:12px 14px; font:14px/1.5 Arial,sans-serif; color:#18241b;
}

.crm-sendbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.crm-progress { flex:1; min-width:180px; height:8px; border-radius:999px; background:#e5e7eb; overflow:hidden; }
.crm-progress > span { display:block; height:100%; width:0; background:var(--primary,#2563eb); transition:width .2s ease; }
.crm-progress-text { font-size:.72rem; font-weight:800; color:#475569; }
.crm-log { margin-top:8px; max-height:110px; overflow:auto; font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; color:#475569; background:#f8fafc; border-radius:7px; padding:8px; }

.crm-wa-queue { margin-top:14px; display:none; }
.crm-wa-queue.active { display:block; }
.crm-wa-current {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center;
  border:1px solid #dbeafe; background:#f8fbff; border-radius:10px; padding:14px;
}
.crm-wa-person h3 { margin:0 0 4px; font-size:1rem; }
.crm-wa-person p { margin:2px 0; color:#64748b; font-size:.78rem; }
.crm-wa-actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.crm-wa-message { margin-top:10px; }
.crm-wa-table-wrap { margin-top:10px; max-height:250px; overflow:auto; border:1px solid #e5e7eb; border-radius:8px; }

.crm-table { width:100%; border-collapse:collapse; font-size:.75rem; }
.crm-table th { position:sticky; top:0; z-index:1; background:#f8fafc; color:#64748b; font-size:.66rem; text-transform:uppercase; text-align:left; padding:8px; border-bottom:1px solid #e5e7eb; }
.crm-table td { padding:8px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.crm-table tr:last-child td { border-bottom:0; }
.crm-status { display:inline-flex; align-items:center; min-height:22px; padding:0 7px; border-radius:999px; font-size:.64rem; font-weight:900; text-transform:uppercase; }
.crm-status.pending, .crm-status.ready { background:#eef2ff; color:#4338ca; }
.crm-status.opened, .crm-status.sending { background:#fff7ed; color:#c2410c; }
.crm-status.sent, .crm-status.completed { background:#ecfdf5; color:#047857; }
.crm-status.failed { background:#fef2f2; color:#b91c1c; }
.crm-status.skipped { background:#f1f5f9; color:#64748b; }

.crm-history-actions { display:flex; gap:5px; flex-wrap:wrap; }
.crm-empty { padding:30px; text-align:center; color:#94a3b8; font-size:.82rem; }

.crm-modal {
  position:fixed; inset:0; z-index:70000; display:none; align-items:center; justify-content:center;
  background:rgba(15,23,42,.48); padding:24px;
}
.crm-modal.active { display:flex; }
.crm-modal-card {
  width:min(1180px,96vw); max-height:92vh; display:flex; flex-direction:column; background:#fff;
  border-radius:12px; overflow:hidden; box-shadow:0 25px 70px rgba(15,23,42,.3);
}
.crm-modal-head { flex:0 0 auto; min-height:54px; padding:10px 14px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #e5e7eb; }
.crm-modal-head h2 { margin:0; font-size:.95rem; }
.crm-modal-head input { margin-left:auto; width:min(360px,40vw); min-height:36px; border:1px solid #dbe2ea; border-radius:7px; padding:0 10px; }
.crm-modal-body { flex:1; min-height:0; overflow:auto; }
.crm-modal-close { width:36px; height:36px; border:0; border-radius:7px; background:#f1f5f9; cursor:pointer; font-size:1rem; }

.crm-pref { min-height:26px; border:1px solid #dbe2ea; border-radius:999px; padding:0 8px; background:#fff; font-size:.64rem; font-weight:900; cursor:pointer; }
.crm-pref.ok { color:#047857; border-color:#a7f3d0; background:#ecfdf5; }
.crm-pref.off { color:#b91c1c; border-color:#fecaca; background:#fef2f2; }

@media (max-width: 1100px) {
  .crm-compose-grid { grid-template-columns:1fr; }
  .crm-summarybar { overflow-x:auto; }
  .crm-kpi { min-width:104px; }
}

@media (max-width: 760px) {
  .crm-tabs { padding:0 6px; overflow-x:auto; }
  .crm-tab-btn { padding:0 12px; white-space:nowrap; }
  .crm-summarybar { align-items:stretch; }
  .crm-summary-actions { margin-left:0; }
  .crm-workspace { padding:8px; }
  .crm-row { flex-direction:column; align-items:stretch; }
  .crm-recipient-controls { grid-template-columns:1fr; }
  .crm-wa-current { grid-template-columns:1fr; }
  .crm-wa-actions { justify-content:flex-start; }
}