/* ════════════════════════════════════════════════════════════════════════════
   CRM de Sarance Visión (assets/modulos/crm*.js) · se carga después de calma.css
   Solo variables del tema (--surface, --text, --border, --accent…): sirve igual en oscuro y en claro.
   Nada de colores sueltos. Texto de 12 px o más. En el celular, todo lo que se toca mide al menos 44 px.
   Reglas de contraste: el texto chico sobre --surface2/--surface3 usa --text-2 (el --text-3 no llega a 4,5:1 ahí).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Piezas comunes ───────────────────────────────────────────────────────── */
.crm { display: flex; flex-direction: column; gap: 12px; }
.crm-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.crm [hidden], .crm-overlay [hidden] { display: none !important; }
.crm-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.crm-sub { margin: 0; font-size: 13px; color: var(--text-2); max-width: 760px; line-height: 1.5; }
.crm-rt { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--font-ui); color: var(--text-2); }
.crm-rt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.crm-rt--ok::before { background: var(--success); }
.crm-rt--no::before { background: var(--warning); }
.crm-h3 { margin: 0 0 8px; font: 600 13px var(--font-ui); color: var(--text-2); text-transform: none; letter-spacing: 0; }
.crm-ayuda { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.crm-req { color: var(--danger); }
.crm-error-campo { min-height: 0; margin-top: 4px; font-size: 12.5px; color: var(--danger); }
.crm-error-campo:empty { display: none; }
.form-input[aria-invalid="true"] { border-color: var(--danger) !important; }
.crm-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.crm-link:hover { color: var(--text); }
.crm-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); min-height: 32px; cursor: pointer; }
.crm-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.crm-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.crm-dlg-acc { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.crm-overlay { z-index: 101; }
.crm-modal .modal-body { max-height: calc(90vh - 80px); }
.crm-detalles { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 12px 0; }
.crm-detalles summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.crm-fieldset { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px 10px; margin: 0 0 8px; }
.crm-fieldset legend { padding: 0 6px; }
.crm-radio { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-height: 32px; cursor: pointer; }
.crm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.crm-chip { border: 1px solid var(--border2); background: var(--surface2); color: var(--text); border-radius: 99px; padding: 6px 12px; font: 500 13px var(--font-ui); cursor: pointer; }
.crm-chip:hover { background: var(--surface3); }

/* Avisos y vacíos: siempre con texto, nunca solo color */
.crm-aviso { margin: 8px 0; padding: 10px 14px; border: 1px solid var(--border2); border-left: 4px solid var(--info); border-radius: 10px; background: var(--surface2); color: var(--text); font-size: 13.5px; line-height: 1.5; }
.crm-aviso p { margin: 0 0 6px; } .crm-aviso p:last-child { margin-bottom: 0; }
.crm-aviso--ventana, .crm-aviso--falta, .crm-aviso--tiktok { border-left-color: var(--warning); }
.crm-aviso--error { border-left-color: var(--danger); }
.crm-vacio { padding: 28px 16px; text-align: center; color: var(--text-2); }
.crm-vacio p { margin: 0 0 6px; } .crm-vacio strong { color: var(--text); font-size: 15px; }
.crm-vacio-acc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.crm-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.crm-barra-buscar { flex: 1 1 260px; min-width: 200px; }
.crm-barra .form-input { width: auto; min-width: 150px; }
.crm-barra .crm-barra-buscar .form-input { width: 100%; }
.crm-barra-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.crm-mas-fila { text-align: center; margin: 10px 0; }

/* Etiquetas y píldoras */
.crm-pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font: 600 12px var(--font-ui); background: var(--surface3); color: var(--text-2); white-space: nowrap; }
.crm-pill--abierta { background: rgb(var(--success-rgb) / 0.16); color: var(--success); }
.crm-pill--pendiente { background: rgb(var(--warning-rgb) / 0.16); color: var(--warning); }
.crm-pill--resuelta, .crm-pill--arch { background: rgb(var(--info-rgb) / 0.16); color: var(--info); }
.crm-etqs { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 6px 0 0; padding: 0; }
.crm-etq { display: inline-block; padding: 1px 8px; border-radius: 6px; font: 500 12px var(--font-ui); background: var(--surface3); color: var(--text-2); margin: 0 4px 2px 0; }
.crm-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13.5px; }
.crm-datos dt { color: var(--text-2); font-size: 12.5px; }
.crm-datos dd { margin: 0; overflow-wrap: anywhere; color: var(--text); }
.crm-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.crm-mini-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.crm-mini-btn:hover { background: var(--surface3); }
.crm-mini-btn span, .crm-mini-fila span span { font-size: 12.5px; color: var(--text-2); font-weight: 400; }
.crm-mini-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); font-size: 13px; }
.crm-mini-fila > span { display: flex; flex-direction: column; min-width: 0; }
.crm-linea { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.crm-linea li { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); font-size: 13px; }
.crm-linea p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-linea-tipo { font-weight: 600; } .crm-linea-cuando { font-size: 12.5px; color: var(--text-2); }

/* ── Resumen y pestañas ───────────────────────────────────────────────────── */
.crm-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.crm-resumen-error, .crm-resumen-carga { grid-column: 1 / -1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 13px; color: var(--text-2); }
.crm-resumen-error { border-color: var(--danger); color: var(--text); }
.crm-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.crm-kpi:hover { background: var(--surface2); border-color: var(--border2); }
.crm-kpi-n { font: 700 22px/1.1 var(--font-ui); font-variant-numeric: tabular-nums; }
.crm-kpi-t { font: 600 12.5px var(--font-ui); color: var(--text-2); }
.crm-kpi-s { font-size: 12px; color: var(--text-2); }
.crm-tabs { margin: 4px 0 0; }
.crm-tab-n { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font: 700 12px/18px var(--font-ui); text-align: center; }
.crm-panel { min-width: 0; }

/* ── Bandeja ──────────────────────────────────────────────────────────────── */
.crm-bj { position: relative; display: grid; grid-template-columns: 340px minmax(0, 1fr); border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; height: clamp(520px, calc(100vh - 300px), 880px); }
.crm-bj-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.crm-bj-col[hidden] { display: none !important; }
.crm-bj-lista { border-right: 1px solid var(--border); }
.crm-bj-filtros { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-bottom: 1px solid var(--border); }
.crm-bj-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.crm-bj-selects #crm-bj-estado { grid-column: 1 / -1; }
.crm-bj-selects .form-input { padding: 7px 8px; font-size: 12.5px; min-width: 0; }
.crm-bj-info { margin: 0; padding: 6px 12px; font-size: 12.5px; color: var(--text-2); }
.crm-conv-lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
.crm-conv { display: flex; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; min-height: 64px; }
.crm-conv:hover { background: var(--surface2); }
.crm-conv--sel { background: var(--surface2); box-shadow: inset 3px 0 0 var(--accent); }
.crm-av { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface3); color: var(--text); font: 700 13px var(--font-ui); }
.crm-conv-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crm-conv-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.crm-conv-nombre { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-conv--nueva .crm-conv-nombre { font-weight: 700; }
.crm-conv-hora { flex: none; font-size: 12px; color: var(--text-2); }
.crm-conv-texto { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.crm-conv--nueva .crm-conv-texto { color: var(--text); }
.crm-nl { flex: none; min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font: 700 12px/20px var(--font-ui); text-align: center; }
.crm-conv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; color: var(--text-2); }
.crm-canal { padding: 1px 8px; border-radius: 6px; background: var(--surface3); color: var(--text-2); font: 600 12px var(--font-ui); }
.crm-mas { margin: 8px 12px; width: calc(100% - 24px); justify-content: center; }
#crm-bj-vacio:not(:empty) { padding: 8px 10px; }

.crm-bj-hilo { background: var(--bg); }
.crm-hilo-vacio { margin: auto; padding: 24px; text-align: center; color: var(--text-2); }
.crm-hilo-vacio p { margin: 0 0 4px; }
.crm-hilo-cab { padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.crm-hilo-fila { display: flex; align-items: center; gap: 10px; }
.crm-volver { display: none; }
.crm-hilo-id { flex: 1; min-width: 0; }
.crm-hilo-nombre { margin: 0; font: 700 17px var(--font-ui); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-hilo-nombre:focus { outline: none; }
.crm-hilo-nombre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.crm-hilo-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }
.crm-hilo-acc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.crm-asignar { display: flex; align-items: center; gap: 6px; }
.crm-asignar label { font-size: 12.5px; color: var(--text-2); }
.crm-asignar .form-input { width: auto; min-width: 150px; padding: 6px 8px; font-size: 13px; }
.crm-estados { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-hilo-avisos:not(:empty) { padding: 0 14px; }
.crm-mensajes { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.crm-mensajes:focus-visible { outline-offset: -3px; }
.crm-dia { align-self: center; margin: 8px 0 2px; font: 600 12px var(--font-ui); color: var(--text-2); }
.crm-dia span { padding: 2px 12px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); text-transform: capitalize; }
.crm-msg { display: flex; }
.crm-msg--saliente { justify-content: flex-end; }
.crm-burbuja { max-width: min(560px, 86%); padding: 8px 12px 6px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); }
.crm-msg--saliente .crm-burbuja { background: var(--accent-soft); border-color: rgb(var(--accent-rgb) / 0.35); }
.crm-msg--fallido .crm-burbuja { border-color: var(--danger); }
.crm-msg-quien { display: block; font: 600 12px var(--font-ui); color: var(--text-2); margin-bottom: 2px; }
.crm-msg-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
.crm-msg-media { margin: 0 0 4px; font-size: 13.5px; }
.crm-media-tag { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--surface3); color: var(--text); font: 600 12px var(--font-ui); }
.crm-msg-media-acc { margin: 0 0 4px; font-size: 13px; } .crm-msg-media-acc a { color: var(--accent); }
.crm-msg-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; margin-top: 4px; font-size: 12px; color: var(--text-2); }
.crm-estado { font-weight: 600; }
.crm-estado--leido { color: var(--success); }
.crm-estado--fallido { color: var(--danger); }
.crm-msg-error { flex-basis: 100%; text-align: right; color: var(--danger); font-size: 12.5px; }
.crm-msg-ok { flex-basis: 100%; text-align: right; color: var(--text-2); font-size: 12.5px; }
.crm-nota { align-self: center; width: min(560px, 92%); padding: 8px 12px; border: 1px dashed var(--warning); border-radius: 10px; background: rgb(var(--warning-rgb) / 0.1); color: var(--text); }
.crm-nota-tag { display: block; font: 700 12px var(--font-ui); color: var(--warning); }
.crm-nota-autor { font: 600 12.5px var(--font-ui); color: var(--text-2); }
.crm-sistema { align-self: center; max-width: 92%; text-align: center; font-size: 12.5px; color: var(--text-2); }
.crm-vacio-hilo { margin: auto; color: var(--text-2); font-size: 13.5px; }
.crm-mas-msgs { text-align: center; }
.crm-bajar { position: sticky; bottom: 4px; align-self: center; }
.crm-compositor { border-top: 1px solid var(--border); background: var(--surface); padding: 8px 14px 12px; }
.crm-comp-modos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.crm-modo { border: 1px solid var(--border2); background: transparent; color: var(--text-2); border-radius: 99px; padding: 5px 14px; font: 600 13px var(--font-ui); cursor: pointer; min-height: 32px; }
.crm-modo[aria-pressed="true"] { background: var(--surface3); color: var(--text); }
.crm-rapidas-btn { margin-left: auto; }
.crm-comp-campo { position: relative; }
.crm-comp-campo textarea { resize: vertical; min-height: 72px; max-height: 220px; }
.crm-sugerencias { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: 4px; z-index: 5; display: flex; flex-direction: column; border: 1px solid var(--border2); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden; }
.crm-sugerencias .crm-ayuda { padding: 8px 12px; margin: 0; }
.crm-sugerencia { display: flex; gap: 8px; align-items: baseline; padding: 8px 12px; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; font-size: 13.5px; cursor: pointer; min-height: 40px; }
.crm-sugerencia:hover { background: var(--surface2); }
.crm-sugerencia span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-comp-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 12px; margin-top: 6px; }
.crm-comp-pie .crm-ayuda { margin: 0; }

/* Panel del contacto: tercera columna en pantallas anchas; en las demás, una hoja encima del hilo */
.crm-bj-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 100%); z-index: 4; padding: 12px 14px 16px; overflow-y: auto; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.crm-panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.crm-panel-nombre { margin: 0; font: 700 16px var(--font-ui); letter-spacing: 0; overflow-wrap: anywhere; }
.crm-panel-acc { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.crm-panel-sec { margin-top: 14px; }
.crm-panel-sec-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.crm-panel-sec-cab .crm-h3 { margin: 0; }
@media (min-width: 1500px) {
  .crm-bj { grid-template-columns: 340px minmax(0, 1fr) 340px; }
  .crm-bj-panel { position: static; width: auto; box-shadow: none; z-index: auto; }
}
.crm-rapidas-lista { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.crm-rapida { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); }
.crm-rapida p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.crm-rapida-acc { display: flex; gap: 6px; flex: none; }

/* ── Contactos ────────────────────────────────────────────────────────────── */
.crm-tabla-caja { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.crm-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.crm-tabla th, .crm-tabla td { padding: 9px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); }
.crm-tabla thead th { font: 600 12px var(--font-ui); color: var(--text-2); background: var(--surface2); white-space: nowrap; }
.crm-tabla tbody th { font-weight: 400; }
.crm-tabla tbody tr:last-child th, .crm-tabla tbody tr:last-child td { border-bottom: 0; }
.crm-tabla tbody tr:hover { background: var(--surface2); }
.crm-fila-arch { opacity: .85; }
.crm-det-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; }
.crm-det-titulo { flex: 1 1 260px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crm-det-titulo h2 { margin: 0; font: 700 20px var(--font-ui); letter-spacing: 0; overflow-wrap: anywhere; }
.crm-det-titulo h2:focus { outline: none; } .crm-det-titulo h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.crm-det-acc { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-det-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.crm-det-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.crm-det-sec { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.crm-dup-lista { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.crm-dup-lista > li { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); }
.crm-dup-lista p { margin: 0 0 4px; }

/* ── Tratos ───────────────────────────────────────────────────────────────── */
.crm-tr-ayuda { margin: 0 0 10px; }
.crm-tablero { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 8px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.crm-col { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.crm-col--sobre { outline: 2px dashed var(--accent); outline-offset: -2px; }
.crm-col-cab { padding: 10px 12px 6px; }
.crm-col-cab h3 { margin: 0; font: 700 13.5px var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--text); }
.crm-col-n { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 99px; background: var(--surface3); color: var(--text-2); font: 600 12px/18px var(--font-ui); }
.crm-col-total { margin: 2px 0 0; font: 600 13px var(--font-ui); color: var(--text-2); font-variant-numeric: tabular-nums; }
.crm-col-lista { list-style: none; margin: 0; padding: 4px 6px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.crm-col-vacio { padding: 12px 6px; text-align: center; font-size: 12.5px; color: var(--text-2); }
.crm-col-mas { text-align: center; }
.crm-trato { padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); cursor: grab; }
.crm-trato--vence { border-color: var(--warning); }
.crm-trato--arrastrando { opacity: .45; }
.crm-trato-titulo { display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--text); font: 600 13.5px/1.35 var(--font-ui); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.crm-trato-titulo:hover { text-decoration: underline; }
.crm-trato p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.crm-trato .crm-trato-monto { font: 700 13.5px var(--font-ui); color: var(--text); font-variant-numeric: tabular-nums; }
.crm-trato-cierre--vencido { color: var(--warning); font-weight: 600; }
.crm-trato-pie { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; }
.crm-trato-resp { flex: 1; min-width: 0; text-align: center; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-mover { flex: none; width: 34px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border2); border-radius: 8px; background: var(--surface); color: var(--text); font: 600 15px var(--font-ui); cursor: pointer; }
.crm-mover:hover { background: var(--surface3); }
.crm-mover--no { border-color: transparent; background: none; cursor: default; }

/* ── Tareas ───────────────────────────────────────────────────────────────── */
.crm-tk-grupo { margin: 0 0 16px; }
.crm-tk-grupo h3 { margin: 0 0 8px; font: 700 14px var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--text); }
.crm-tk-grupo--vencida h3 { color: var(--danger); }
.crm-tk-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.crm-tarea { display: flex; align-items: center; gap: 4px; padding: 4px 10px 4px 2px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.crm-tarea--vencida { border-left: 4px solid var(--danger); }
.crm-tarea--hoy { border-left: 4px solid var(--warning); }
.crm-tarea-chk { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; min-height: 40px; cursor: pointer; }
.crm-tarea-chk input { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
.crm-tarea-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 4px 0; }
.crm-tarea-cuerpo b { font-size: 14px; overflow-wrap: anywhere; }
.crm-tachado { text-decoration: line-through; color: var(--text-2); }
.crm-tarea-meta { font-size: 12.5px; color: var(--text-2); }
.crm-tarea-contacto { font-size: 12.5px; }

/* ── Canales ──────────────────────────────────────────────────────────────── */
.crm-cn .crm-sub { margin-bottom: 12px; }
.crm-cn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.crm-canal-card { padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.crm-canal-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.crm-canal-cab h3 { margin: 0; font: 700 16px var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--text); }
.crm-estado-canal { padding: 2px 10px; border-radius: 99px; font: 700 12px var(--font-ui); background: var(--surface3); color: var(--text-2); white-space: nowrap; }
.crm-estado-canal--ok { background: rgb(var(--success-rgb) / 0.16); color: var(--success); }
.crm-estado-canal--error { background: rgb(var(--danger-rgb) / 0.16); color: var(--danger); }
.crm-estado-canal--pendiente, .crm-estado-canal--pausa { background: rgb(var(--warning-rgb) / 0.16); color: var(--warning); }
.crm-canal-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.crm-canal-res { margin-top: 8px; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.crm-canal-res:empty { display: none; }
.crm-canal-res--ok { color: var(--success); }
.crm-canal-res--error { color: var(--danger); }

/* Los botones flotantes (Editor IA, Sala del equipo) quedan fijos abajo a la derecha: en el CRM no deben tapar la caja de respuesta.
   En pantalla ancha el CRM deja un margen abajo; en el celular se esconden mientras se está en el CRM. */
.crm { padding-bottom: 84px; }

/* ── Pantallas medianas y celular ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .crm-det-grid { grid-template-columns: minmax(0, 1fr); }
  .crm-bj { grid-template-columns: 300px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body[data-current-view="crm"] .fab-editor-ia, body[data-current-view="crm"] .fab-chat { display: none !important; }
  .crm { padding-bottom: 8px; gap: 8px; }
  .crm-sub { display: none; }
  .crm-cab { justify-content: flex-end; }
  /* Resumen y pestañas en una sola fila que se desliza, para que la lista quede a la vista */
  .crm-resumen { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 2px; }
  .crm-kpi { flex: 0 0 132px; min-height: 60px; padding: 8px 12px; }
  .crm-kpi-n { font-size: 20px; }
  .crm-resumen-error, .crm-resumen-carga { flex: 1 0 100%; }
  .crm-tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; margin: 0; }
  .crm-tabs .pst-tab { flex: 0 0 auto; padding: 9px 12px; white-space: nowrap; }
  .crm[data-vista-bj="hilo"] .crm-cab, .crm[data-vista-bj="hilo"] .crm-resumen, .crm[data-vista-bj="hilo"] .crm-tabs,
  .crm[data-vista-bj="panel"] .crm-cab, .crm[data-vista-bj="panel"] .crm-resumen, .crm[data-vista-bj="panel"] .crm-tabs { display: none; }
  .crm-barra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .crm-barra-buscar, .crm-barra-acc, .crm-barra .crm-check { grid-column: 1 / -1; }
  .crm-barra .form-input { min-width: 0; }
  .crm-volver { flex: 0 0 100%; justify-content: flex-start; }
  .crm-bj { display: block; height: auto; border: 0; background: transparent; overflow: visible; }
  .crm-bj-col { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
  .crm-bj-hilo { background: var(--bg); }
  .crm-bj[data-vista="lista"] .crm-bj-hilo, .crm-bj[data-vista="lista"] .crm-bj-panel { display: none; }
  .crm-bj[data-vista="hilo"] .crm-bj-lista, .crm-bj[data-vista="hilo"] .crm-bj-panel { display: none; }
  .crm-bj[data-vista="panel"] .crm-bj-lista, .crm-bj[data-vista="panel"] .crm-bj-hilo { display: none; }
  .crm-bj-panel { position: static; width: auto; box-shadow: none; }
  .crm-conv-lista { max-height: none; overflow: visible; }
  .crm-mensajes { max-height: calc(100dvh - 400px); min-height: 220px; }
  .crm-volver { display: inline-flex; }
  .crm-hilo-fila { flex-wrap: wrap; }
  .crm-bj-selects { grid-template-columns: 1fr; }
  .crm-bj-selects .form-input, .crm-bj-filtros .form-input { font-size: 16px; padding: 11px 12px; }
  .crm-2col { grid-template-columns: minmax(0, 1fr); }
  .crm-tablero { grid-template-columns: minmax(0, 1fr); overflow-x: visible; }
  .crm-barra .form-input { width: 100%; }
  .crm-barra-acc { margin-left: 0; width: 100%; }
  /* La tabla de contactos deja solo lo esencial: nombre, teléfono y tipo (el resto está en la ficha) */
  .crm-tabla th:nth-child(3), .crm-tabla td:nth-child(3), .crm-tabla th:nth-child(4), .crm-tabla td:nth-child(4),
  .crm-tabla th:nth-child(6), .crm-tabla td:nth-child(6), .crm-tabla th:nth-child(7), .crm-tabla td:nth-child(7),
  .crm-tabla th:nth-child(8), .crm-tabla td:nth-child(8) { display: none; }
  .crm-burbuja { max-width: 92%; }
  .crm-canal-res, .crm-datos { font-size: 14px; }
}
/* Toques de al menos 44 px en el celular y en pantallas táctiles */
@media (pointer: coarse), (max-width: 760px) {
  .crm-kpi { min-height: 64px; }
  .crm-conv { min-height: 72px; }
  .crm-tab, .pst-tab.crm-tab { min-height: 44px; }
  .crm-modo, .crm-chip, .crm-sugerencia, .crm-link, .crm-mini-btn, .crm-trato-titulo { min-height: 44px; }
  .crm-link, .crm-trato-titulo { display: inline-flex; align-items: center; min-width: 44px; }
  .crm-mover { width: 44px; height: 44px; }
  .crm-check, .crm-radio { min-height: 44px; }
  .crm-check input, .crm-radio input { width: 22px; height: 22px; }
  .crm-tarea-chk { width: 44px; min-height: 44px; }
  .crm-tarea-chk input { width: 24px; height: 24px; }
  .crm-detalles summary { min-height: 44px; }
  .crm-msg-media-acc a { display: inline-flex; align-items: center; min-height: 44px; }
  .crm .btn, .crm-overlay .btn { min-height: 44px; min-width: 44px; justify-content: center; }
  .crm-tabla tbody th .crm-link { min-height: 44px; }
}