/* =========================================================
   Módulo CRM (dentro do Artefato)
   ========================================================= */
.crm {
  /* mapeado para os tokens do DS (tokens.css) */
  --crm-bg: var(--ds-sunken); --crm-panel: var(--ds-surface); --crm-line: var(--ds-line); --crm-muted: var(--ds-text-muted);
  --crm-hover: var(--ds-hover); --crm-accent: var(--ds-accent);
  --due-overdue: #ef4444; --due-today: var(--ds-success); --due-upcoming: var(--ds-info); --due-none: var(--ds-warning);
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--crm-bg); font-size: 14px; container-type: inline-size; container-name: crm;
}
.crm-muted { color: var(--crm-muted); }

/* ---------- Barra ---------- */
.crm-bar { flex-shrink: 0; background: var(--crm-panel); border-bottom: 1px solid var(--crm-line); }
.crm-bar-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; flex-wrap: wrap; }
.crm-funnel {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--crm-line); font-weight: 600; cursor: pointer;
}
.crm-funnel:hover { background: var(--crm-hover); }
.crm-funnel select { appearance: none; background: transparent; font-weight: 600; outline: none; cursor: pointer; padding-right: 2px; max-width: 160px; color: inherit; }
.dark .crm-funnel select option { background: #2f2f2f; }
.crm-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.crm-tabs::-webkit-scrollbar { display: none; }
.crm-tab {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 9px;
  font-size: 13.5px; font-weight: 500; color: var(--crm-muted); transition: background-color .2s, color .2s;
}
.crm-tab:hover { background: var(--crm-hover); color: inherit; }
.crm-tab.active { background: rgb(124 58 237 / .1); color: rgb(109 40 217); }
.dark .crm-tab.active { background: rgb(167 139 250 / .15); color: rgb(196 181 253); }
.crm-tab span { display: inline-flex; align-items: center; gap: 6px; }
.crm-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 600; display: grid; place-items: center; background: var(--due-overdue); color: #fff; }
.crm-bar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.crm-search { display: flex; align-items: center; gap: 6px; height: 36px; width: 210px; padding: 0 10px; border-radius: 10px; background: rgb(0 0 0 / .04); color: var(--crm-muted); }
.dark .crm-search { background: rgb(255 255 255 / .05); }
.crm-search input { flex: 1; min-width: 0; background: transparent; outline: none; color: rgb(38 38 38); }
.dark .crm-search input { color: #f5f5f5; }

@container crm (max-width: 760px) {
  .crm-tab span { display: none; }
  .crm-tab { padding: 0 9px; }
  .crm-bar-end { width: 100%; margin-left: 0; }
  .crm-search { flex: 1; width: auto; }
}
@container crm (max-width: 420px) { .crm-btn.primary span { display: none; } }

/* ---------- Botões / chips ---------- */
.crm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; flex-shrink: 0;
  border-radius: 10px; border: 1px solid var(--crm-line); background: var(--crm-panel); font-size: 13px; font-weight: 500;
  white-space: nowrap; transition: background-color .2s, border-color .2s, opacity .2s;
}
.crm-btn:hover { background: var(--crm-hover); }
.crm-btn:active { transform: scale(.98); }
.crm-btn.primary { background: #0d0d0d; border-color: #0d0d0d; color: #fff; }
.crm-btn.primary:hover { opacity: .88; }
.dark .crm-btn.primary { background: #fff; border-color: #fff; color: #0d0d0d; }
.crm-btn.danger { color: rgb(220 38 38); border-color: rgb(220 38 38 / .25); }
.crm-btn.danger:hover { background: rgb(220 38 38 / .06); }
.crm-btn.won { color: rgb(21 128 61); border-color: rgb(34 197 94 / .35); background: rgb(34 197 94 / .08); }
.crm-btn.lost { color: rgb(185 28 28); border-color: rgb(239 68 68 / .3); background: rgb(239 68 68 / .06); }
.dark .crm-btn.won { color: rgb(74 222 128); }
.dark .crm-btn.lost { color: rgb(248 113 113); }

.crm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.crm-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--crm-line); background: var(--crm-panel); font-size: 12.5px; font-weight: 500; color: var(--crm-muted);
}
.crm-chip span { font-size: 11px; opacity: .75; }
.crm-chip:hover { color: inherit; }
.crm-chip.active { background: #0d0d0d; border-color: #0d0d0d; color: #fff; }
.dark .crm-chip.active { background: #fff; border-color: #fff; color: #0d0d0d; }
.crm-pill { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgb(0 0 0 / .06); color: var(--crm-muted); }
.dark .crm-pill { background: rgb(255 255 255 / .08); }

/* ---------- Avatar ---------- */
/* avatares: componente ui-av (ds.css) via Liloo.ui.avatar */

/* ---------- Vista ---------- */
.crm-view { flex: 1; min-height: 0; overflow: auto; position: relative; }
.crm-view[data-tab="board"] { display: flex; flex-direction: column; overflow: hidden; }
.crm-pad { padding: 16px; }
.crm-narrow { max-width: 860px; margin: 0 auto; }

/* ---------- Kanban ---------- */
.crm-board { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 14px; overflow-x: auto; align-items: stretch; }
.crm-col {
  flex: 0 0 272px; display: flex; flex-direction: column; min-height: 0; border-radius: 16px;
  background: rgb(0 0 0 / .025); border: 1px solid transparent; animation: fade-up .35s var(--ease-out) both;
  animation-delay: calc(var(--i) * 40ms);
}
.dark .crm-col { background: rgb(255 255 255 / .025); }
.crm-col-head { position: relative; padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.crm-col-total { font-size: 12px; color: var(--crm-muted); }
.crm-col-bar { position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; border-radius: 3px; background: rgb(0 0 0 / .06); overflow: hidden; }
.dark .crm-col-bar { background: rgb(255 255 255 / .06); }
.crm-col-bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: linear-gradient(90deg, #a78bfa, #7c3aed); }
.crm-col-body { flex: 1; min-height: 60px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; border-radius: 12px; transition: background-color .15s; }
.crm-col-body.drag-over { background: rgb(124 58 237 / .08); box-shadow: inset 0 0 0 2px rgb(124 58 237 / .35); }
.crm-col-empty { padding: 18px 8px; text-align: center; font-size: 12.5px; color: var(--crm-muted); border: 1.5px dashed var(--crm-line); border-radius: 12px; }
.crm-col-add { display: flex; align-items: center; gap: 6px; margin: 0 8px 8px; padding: 8px 10px; border-radius: 10px; font-size: 13px; color: var(--crm-muted); }
.crm-col-add:hover { background: var(--crm-hover); color: inherit; }

.crm-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 11px 12px 10px 14px; border-radius: 13px;
  background: var(--crm-panel); border: 1px solid var(--crm-line); cursor: grab; user-select: none;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04); transition: box-shadow .2s, transform .2s var(--ease-out), opacity .2s, border-color .2s;
}
.crm-card::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--due-none); }
.crm-card.due-overdue::before { background: var(--due-overdue); }
.crm-card.due-today::before { background: var(--due-today); }
.crm-card.due-upcoming::before { background: var(--due-upcoming); }
.crm-card:hover { box-shadow: 0 6px 18px -8px rgb(0 0 0 / .22); transform: translateY(-1px); }
.crm-card:active { cursor: grabbing; }
.crm-card.dragging { opacity: .35; transform: rotate(1.5deg); }
.crm-card.rotten { border-color: rgb(249 115 22 / .35); }
.crm-card-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-card-sub { font-size: 12px; color: var(--crm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-card-value { font-size: 13px; font-weight: 600; }
.crm-card-foot { display: flex; align-items: center; gap: 6px; justify-content: space-between; }

.crm-due { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-due.overdue { color: var(--due-overdue); }
.crm-due.today { color: var(--due-today); }
.crm-due.upcoming { color: var(--crm-muted); }
.crm-due.none { color: rgb(217 119 6); }
.crm-rot { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 600; color: rgb(234 88 12); background: rgb(249 115 22 / .1); }
.crm-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.crm-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 500; background: rgb(124 58 237 / .09); color: rgb(109 40 217); }
.dark .crm-tag { background: rgb(167 139 250 / .14); color: rgb(196 181 253); }
.crm-tag.lg { padding: 4px 6px 4px 10px; font-size: 12.5px; border-radius: 8px; }
.crm-tag button { display: grid; place-items: center; height: 18px; width: 18px; border-radius: 5px; opacity: .6; }
.crm-tag button:hover { opacity: 1; background: rgb(124 58 237 / .15); }

.crm-dropzones {
  position: absolute; left: 50%; bottom: 52px; z-index: 5; display: flex; gap: 10px; transform: translate(-50%, 20px);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s var(--ease-out);
}
.crm-dropzones.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.crm-dz {
  display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 26px; border-radius: 16px; font-weight: 600;
  background: var(--crm-panel); border: 2px dashed; box-shadow: 0 10px 30px -10px rgb(0 0 0 / .3); transition: transform .15s, background-color .15s;
}
.crm-dz.won { color: rgb(21 128 61); border-color: rgb(34 197 94 / .6); }
.crm-dz.lost { color: rgb(185 28 28); border-color: rgb(239 68 68 / .55); }
.crm-dz.drag-over { transform: scale(1.06); }
.crm-dz.won.drag-over { background: rgb(34 197 94 / .12); }
.crm-dz.lost.drag-over { background: rgb(239 68 68 / .1); }

.crm-legend { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 9px 16px; font-size: 12px; color: var(--crm-muted); border-top: 1px solid var(--crm-line); background: var(--crm-panel); }
.crm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dot { display: inline-block; height: 8px; width: 8px; border-radius: 999px; background: var(--due-none); }
.dot.overdue { background: var(--due-overdue); } .dot.today { background: var(--due-today); } .dot.upcoming { background: var(--due-upcoming); }
@container crm (max-width: 600px) { .crm-legend { display: none; } }

/* ---------- Lista ---------- */
.crm-table-wrap { border: 1px solid var(--crm-line); border-radius: 16px; overflow: auto; background: var(--crm-panel); }
.crm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.crm-table th { position: sticky; top: 0; z-index: 1; background: var(--crm-panel); text-align: left; padding: 0; border-bottom: 1px solid var(--crm-line); }
.crm-table th button { display: inline-flex; align-items: center; gap: 4px; width: 100%; padding: 10px 14px; font-size: 12px; font-weight: 500; color: var(--crm-muted); white-space: nowrap; }
.crm-table th button.on { color: inherit; }
.crm-table th.num button { justify-content: flex-end; }
.crm-table td { padding: 10px 14px; border-bottom: 1px solid var(--crm-line); vertical-align: middle; max-width: 240px; }
.crm-table tr:last-child td { border-bottom: 0; }
.crm-table tbody tr { cursor: pointer; transition: background-color .15s; }
.crm-table tbody tr:hover { background: var(--crm-hover); }
.crm-table .num { text-align: right; white-space: nowrap; }
.crm-stage { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; background: rgb(0 0 0 / .05); white-space: nowrap; }
.dark .crm-stage { background: rgb(255 255 255 / .07); }
@container crm (max-width: 640px) { .crm-table .hide-sm { display: none; } }

/* ---------- Atividades / arquivados ---------- */
.crm-task-group { margin-bottom: 22px; }
.crm-task-group h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 4px 10px; font-size: 14px; font-weight: 600; }
.crm-task-group h3 small { flex-basis: 100%; font-size: 12px; font-weight: 400; color: var(--crm-muted); }
.crm-card-list { display: flex; flex-direction: column; border: 1px solid var(--crm-line); border-radius: 16px; background: var(--crm-panel); overflow: hidden; }
.crm-task { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; transition: background-color .15s; }
.crm-task + .crm-task { border-top: 1px solid var(--crm-line); }
.crm-task:hover { background: var(--crm-hover); }
.crm-task .crm-muted { font-size: 12.5px; }
@container crm (max-width: 520px) { .crm-task .crm-btn span { display: none; } }
.crm-outcome { flex-shrink: 0; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.crm-outcome.won { background: rgb(34 197 94 / .12); color: rgb(21 128 61); }
.crm-outcome.lost { background: rgb(239 68 68 / .1); color: rgb(185 28 28); }
.dark .crm-outcome.won { color: rgb(74 222 128); } .dark .crm-outcome.lost { color: rgb(248 113 113); }

/* ---------- Relatório ---------- */
.crm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.crm-kpi { padding: 14px 16px; border-radius: 16px; background: var(--crm-panel); border: 1px solid var(--crm-line); }
.crm-kpi-top { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--crm-muted); }
.crm-kpi-val { margin: 4px 0 2px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.crm-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.crm-panel { padding: 16px; border-radius: 16px; background: var(--crm-panel); border: 1px solid var(--crm-line); margin-bottom: 12px; }
.crm-report-grid .crm-panel { margin-bottom: 0; }
.crm-panel h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.crm-panel h3 small { font-size: 12px; font-weight: 400; color: var(--crm-muted); }
.crm-panel h4 { margin: 18px 0 8px; font-size: 13px; font-weight: 600; }
.crm-funnel-chart .row, .crm-hbar { display: grid; grid-template-columns: minmax(70px, 120px) 1fr auto; align-items: center; gap: 10px; padding: 5px 0; font-size: 12.5px; }
.crm-funnel-chart .bar, .crm-hbar .track { position: relative; height: 10px; border-radius: 999px; background: rgb(0 0 0 / .05); overflow: hidden; }
.dark .crm-funnel-chart .bar, .dark .crm-hbar .track { background: rgb(255 255 255 / .06); }
.crm-funnel-chart .bar span, .crm-hbar .track span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #a78bfa, #7c3aed); }
.crm-hbar .track span:first-child { background: rgb(124 58 237 / .3); }
.crm-hbar .track span.won { background: linear-gradient(90deg, #34d399, #16a34a); }
.crm-funnel-chart .val, .crm-hbar .val { font-weight: 600; white-space: nowrap; text-align: right; }
.crm-funnel-chart .val em { font-style: normal; font-weight: 400; color: var(--crm-muted); margin-left: 4px; }
.crm-reason { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--crm-line); }
.crm-reason:last-child { border-bottom: 0; }

/* ---------- Configurar / formulários ---------- */
.crm-settings { max-width: 900px; margin: 0 auto; }
.crm-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@container crm (max-width: 480px) { .crm-form-grid { grid-template-columns: 1fr; } }
.crm-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.crm-field.span2 { grid-column: 1 / -1; }
.crm-field > span { font-size: 12.5px; font-weight: 500; }
.crm-field > span em { color: rgb(220 38 38); font-style: normal; }
.crm-field > span small { font-weight: 400; color: var(--crm-muted); }
.crm-field input, .crm-field select, .crm-stage-list input, .crm-inline-add input, .crm-modal input, .crm-modal select {
  width: 100%; height: 38px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--crm-line); background: transparent;
  font-size: 13.5px; outline: none; color: inherit; transition: border-color .2s, box-shadow .2s;
}
.crm-modal input[type="date"] { width: auto; }
.crm-modal .crm-field input, .crm-modal .crm-field select { border-color: rgb(0 0 0 / .12); }
.dark .crm-modal .crm-field input, .dark .crm-modal .crm-field select { border-color: rgb(255 255 255 / .14); }
.dark .crm-field select option, .dark .crm-modal select option { background: #2f2f2f; }
.crm-field input:focus, .crm-field select:focus, .crm-stage-list input:focus, .crm-inline-add input:focus, .crm-modal input:focus {
  border-color: rgb(124 58 237 / .55); box-shadow: 0 0 0 3px rgb(124 58 237 / .12);
}
.crm .invalid, .crm-modal .invalid { border-color: rgb(239 68 68) !important; box-shadow: 0 0 0 3px rgb(239 68 68 / .12) !important; }
.crm-modal { max-width: 460px; text-align: left; }
.crm-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--crm-line); border-bottom: 1px solid var(--crm-line); cursor: pointer; }
.crm-switch-row b { display: block; font-size: 13.5px; font-weight: 500; }
.crm-switch-row small { display: block; font-size: 12px; color: var(--crm-muted); }
.crm-stage-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.crm-stage-list li { display: flex; align-items: center; gap: 8px; }
.crm-stage-list .btn-icon { height: 32px; width: 32px; flex-shrink: 0; }
.crm-stage-list .btn-icon:disabled { opacity: .3; pointer-events: none; }
.crm-taglist { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.crm-inline-add { display: flex; gap: 6px; }
.crm-inline-add .crm-btn { height: 38px; }

/* ---------- Gaveta do lead ---------- */
.crm-scrim { position: absolute; inset: 0; z-index: 9; background: rgb(0 0 0 / .18); opacity: 0; pointer-events: none; transition: opacity .25s; }
.crm-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 10; width: min(460px, 100%); display: flex; flex-direction: column;
  background: var(--crm-panel); border-left: 1px solid var(--crm-line); box-shadow: -20px 0 40px -20px rgb(0 0 0 / .25);
  transform: translateX(105%); transition: transform .4s var(--ease-out);
}
.crm.drawer-open .crm-drawer { transform: none; }
.crm.drawer-open .crm-scrim { opacity: 1; pointer-events: auto; }
.crm-drawer-head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--crm-line); }
.crm-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }

.crm-stepper { display: flex; gap: 3px; }
.crm-stepper button {
  position: relative; flex: 1; min-width: 0; height: 30px; padding: 0 8px 0 14px; font-size: 11.5px; font-weight: 500; color: var(--crm-muted);
  background: rgb(0 0 0 / .05); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
  transition: background-color .2s, color .2s;
}
.crm-stepper button:first-child { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); border-radius: 8px 0 0 8px; padding-left: 10px; }
.crm-stepper button span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dark .crm-stepper button { background: rgb(255 255 255 / .06); }
.crm-stepper button:hover { background: rgb(124 58 237 / .15); color: inherit; }
.crm-stepper button.done { background: rgb(124 58 237 / .22); color: rgb(91 33 182); }
.crm-stepper button.cur { background: var(--crm-accent); color: #fff; }
.dark .crm-stepper button.done { color: rgb(221 214 254); }
.dark .crm-stepper button.cur { color: #1b1b1b; }

.crm-next { padding: 12px 14px; border-radius: 14px; border: 1px solid; }
.crm-next.overdue { border-color: rgb(239 68 68 / .3); background: rgb(239 68 68 / .06); }
.crm-next.overdue > div:first-child { color: var(--due-overdue); }
.crm-next.today { border-color: rgb(34 197 94 / .3); background: rgb(34 197 94 / .06); }
.crm-next.today > div:first-child { color: var(--due-today); }
.crm-next.upcoming { border-color: rgb(14 165 233 / .25); background: rgb(14 165 233 / .05); }
.crm-next.upcoming > div:first-child { color: var(--due-upcoming); }
.crm-next.none { border-color: rgb(245 158 11 / .35); background: rgb(245 158 11 / .07); }
.crm-next.none > div:first-child { color: rgb(217 119 6); }
.crm-next.won { border-color: rgb(34 197 94 / .3); background: rgb(34 197 94 / .07); }
.crm-next.lost { border-color: rgb(239 68 68 / .3); background: rgb(239 68 68 / .06); }
.crm-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-lead-form { display: flex; flex-direction: column; }
.crm-outcome-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-outcome-actions .crm-btn { height: 40px; }
.crm-h4 { margin-top: 4px; font-size: 13px; font-weight: 600; }
.crm-timeline { position: relative; display: flex; flex-direction: column; gap: 12px; padding-left: 4px; }
.crm-timeline::before { content: ''; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 1px; background: var(--crm-line); }
.crm-timeline li { position: relative; display: flex; gap: 10px; }
.crm-timeline .ico { display: grid; place-items: center; height: 24px; width: 24px; flex-shrink: 0; border-radius: 999px; background: var(--crm-panel); border: 1px solid var(--crm-line); color: var(--crm-muted); }
.crm-timeline .t-outcome .ico { color: rgb(234 179 8); border-color: rgb(234 179 8 / .4); }
.crm-timeline .t-action .ico { color: rgb(22 163 74); border-color: rgb(34 197 94 / .4); }
.crm-timeline .t-note .ico { color: rgb(124 58 237); border-color: rgb(124 58 237 / .35); }

/* ---------- Vazio ---------- */

/* --- auditoria: kanban no celular --- */
@container crm (max-width: 560px) {
  .crm-board { scroll-snap-type: x mandatory; scroll-padding: 0 14px; }
  .crm-col { flex-basis: calc(100cqw - 64px); scroll-snap-align: start; }
}