/* SIMA — CRM SIMA (modules/sales_crm.js)
   Todo el color sale de variables del tema activo (--win-*, --accent,
   --matrix-color): ni un hex plano, igual que el resto de SIMA. */

/* ── Barra de filtros ──────────────────────────────────────────────────── */
#sima-panel .sima-crm-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
#sima-panel .sima-crm-toolbar #sima-crm-q {
  flex: 1 1 240px;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--win-border);
  border-radius: 7px;
  background: var(--win-card);
  color: var(--win-text);
  font: inherit;
}
#sima-panel .sima-crm-toolbar select { max-width: 180px; }
#sima-panel .sima-crm-due { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
#sima-panel .sima-crm-count { margin-left: auto; font-size: .78rem; color: var(--win-muted); white-space: nowrap; }

/* ── Tabla ─────────────────────────────────────────────────────────────── */
/* Contenedor de consulta: las reglas de ancho de abajo miran el ancho de la
   VENTANA, no el de la pantalla. Con @media no se disparaban nunca: una
   ventana de 1000 px dentro de un monitor de 1600 px no cumple max-width. */
#sima-panel #sima-crm-body { container-type: inline-size; min-width: 0; }

/* Envoltura: hereda .sima-tbl-wrap (overflow-x: auto, estándar de la casa).
   La barra se pinta SIEMPRE visible: macOS esconde las barras superpuestas
   hasta que el usuario hace scroll, y en una tabla que se sale por la
   derecha eso deja al usuario sin forma de saber que hay más columnas. */
#sima-panel .sima-crm-scroll { padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--win-text) 30%, transparent) transparent; }
#sima-panel .sima-crm-scroll::-webkit-scrollbar { height: 10px; }
#sima-panel .sima-crm-scroll::-webkit-scrollbar-track { background: color-mix(in srgb, var(--win-text) 6%, transparent); border-radius: 5px; }
#sima-panel .sima-crm-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--win-text) 28%, transparent); border-radius: 5px; }
#sima-panel .sima-crm-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--win-text) 42%, transparent); }

#sima-panel .sima-crm-tbl .sima-crm-sub { font-size: .74rem; color: var(--win-muted); }

/* La columna Lead es la que CEDE: .sima-tbl fuerza nowrap en toda la tabla y
   un nombre como "CardioSalud | Cardiólogo | Infarto | Cateterismo cardíaco"
   empujaba el resto fuera de la ventana. Aquí se parte en líneas dentro de un
   ancho acotado, y las columnas cortas conservan su nowrap. */
#sima-panel .sima-crm-tbl th.col-lead,
#sima-panel .sima-crm-tbl td.col-lead {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 150px;
  max-width: 230px;
}
#sima-panel .sima-crm-tbl td.col-esp,
#sima-panel .sima-crm-tbl td.col-ciudad {
  white-space: normal;
  max-width: 130px;
}
#sima-panel .sima-crm-tbl td,
#sima-panel .sima-crm-tbl th { vertical-align: middle; }
/* Relleno lateral algo menor que el estándar de .sima-tbl (11px): con 7
   columnas son ~30 px que deciden si la tabla cabe o scrollea. */
#sima-panel .sima-crm-tbl thead th,
#sima-panel .sima-crm-tbl tbody td { padding-left: 8px; padding-right: 8px; }
#sima-panel .sima-crm-tbl .col-seq,
#sima-panel .sima-crm-tbl .col-next { white-space: nowrap; font-size: .76rem; color: var(--win-muted); }
#sima-panel .sima-crm-tbl .col-seq.is-replied,
#sima-panel .sima-crm-tbl .col-next.is-due { color: var(--matrix-color); }

/* Las acciones nunca se apilan en columna: eso era lo que inflaba el alto
   de cada fila cuando la columna quedaba estrecha. */
#sima-panel .sima-crm-tbl .sima-crm-acts { flex-wrap: nowrap; }

/* Ventana angosta: se retiran primero las columnas prescindibles. Lead,
   Etapa y Acciones nunca se ocultan. Los cortes salen de MEDIR cuántos px se
   salían a cada ancho de ventana con datos reales de largo (nombres de
   consultorio de 50+ caracteres), no de un número redondo. Lo que aun así no
   quepa, scrollea con la barra visible. */
@container (max-width: 1000px) {
  #sima-panel .sima-crm-tbl .col-ciudad { display: none; }
}
@container (max-width: 940px) {
  #sima-panel .sima-crm-tbl .col-esp { display: none; }
  /* Botones solo en icono (todos mapeados en cima-icons.css); el title
     queda como tooltip. */
  #sima-panel .sima-crm-tbl .sima-crm-acts .btn-lbl { display: none; }
}
@container (max-width: 600px) {
  #sima-panel .sima-crm-tbl .col-next { display: none; }
}
@container (max-width: 500px) {
  #sima-panel .sima-crm-tbl .col-seq { display: none; }
}

/* ── Acciones (compartidas por tabla y tarjetas) ───────────────────────── */
#sima-panel .sima-crm-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
#sima-panel .sima-crm-acts .btn-sm { white-space: nowrap; }
#sima-panel .sima-crm-notel { font-size: .74rem; color: var(--win-muted); }

/* ── Vista de tarjetas (CRM clásico) ───────────────────────────────────── */
#sima-panel .sima-crm-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
#sima-panel .sima-crm-card {
  background: var(--win-card);
  border: 1px solid var(--win-border);
  border-radius: 12px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
#sima-panel .sima-crm-card.is-due { border-color: color-mix(in srgb, var(--matrix-color) 45%, var(--win-border)); }
#sima-panel .sima-crm-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
#sima-panel .sima-crm-card-top b {
  color: var(--win-text);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
#sima-panel .sima-crm-card .sima-crm-sub { font-size: .76rem; color: var(--win-muted); }
#sima-panel .sima-crm-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: .74rem;
  color: var(--win-muted);
  flex-wrap: wrap;
}
#sima-panel .sima-crm-card-meta .is-replied,
#sima-panel .sima-crm-card-meta .is-due { color: var(--matrix-color); }

/* ── Botones del titlebar ──────────────────────────────────────────────── */
#sima-panel .sima-crm-tbtn {
  background: none;
  border: none;
  color: var(--win-muted);
  cursor: pointer;
  padding: 2px 5px;
  font-size: .92rem;
  line-height: 1;
}
#sima-panel .sima-crm-tbtn:hover { color: var(--win-text); }

/* ── Campos de los modales (Respuesta, Etapa) y de la Ráfaga ───────────── */
#sima-panel .sima-crm-field {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--win-bg);
  border: 1px solid var(--win-border);
  color: var(--win-text);
  font: inherit;
}
#sima-panel textarea.sima-crm-field { resize: vertical; }
#sima-panel .sima-crm-field:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Orden en la vista de tarjetas (no tienen encabezados que clickear). */
#sima-panel .sima-crm-sort { max-width: 190px; }

/* ── Ráfaga ────────────────────────────────────────────────────────────── */
/* Vive en un panel intra-ventana (sima.inwin, kind 'sheet'): congela SOLO la
   ventana del CRM. La capa y su posición las pone style/inwin.css. */
#sima-panel .sima-crm-burst-card {
  width: 100%;
  max-width: 520px;
  background: var(--win-card);
  border: 1px solid var(--win-border);
  border-radius: 14px;
  padding: 20px;
  color: var(--win-text);
}
#sima-panel .sima-crm-burst-card h2 { margin: 8px 0 2px; font-size: 1.15rem; }
#sima-panel .sima-crm-burst-progress { font-size: .74rem; color: var(--win-muted); }
#sima-panel .sima-crm-burst-meta { font-size: .76rem; color: var(--win-muted); margin-bottom: 10px; }
#sima-panel .sima-crm-burst-wa {
  display: block;
  text-align: center;
  margin-top: 10px;
  padding: 11px;
  font-size: 1rem;
  text-decoration: none;
}
#sima-panel .sima-crm-burst-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}
#sima-panel .sima-crm-burst-done { max-width: 420px; text-align: center; color: var(--win-text); }
#sima-panel .sima-crm-burst-done i { font-size: 2rem; color: var(--matrix-color); }
#sima-panel .sima-crm-burst-done h2 { margin: 10px 0 6px; }
#sima-panel .sima-crm-burst-done p { color: var(--win-muted); }

/* Pastilla de etapa clickeable (reemplaza el botón "Etapa" de Acciones). */
#sima-panel .sima-crm-stagebtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font: inherit;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
#sima-panel .sima-crm-stagebtn i { font-size: .62rem; opacity: .7; }
#sima-panel .sima-crm-stagebtn:hover { filter: brightness(1.08); }
#sima-panel .sima-crm-stagebtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── WhatsApp: color de MARCA, no del tema ─────────────────────────────────
   Excepción deliberada a "todo color sale del tema activo": WhatsApp se
   reconoce por su verde igual que Facebook por su azul o Instagram por su
   fucsia. Si el botón toma el acento del tema, deja de leerse como WhatsApp.
   Verde oficial de la marca: #25D366.
   Temas oscuros → letra e icono verdes, con un velo verde de fondo.
   Tema claro   → botón relleno verde. La letra va en verde muy oscuro, no en
   blanco: blanco sobre #25D366 no llega a contraste legible (≈2:1), el verde
   oscuro sí (≈7:1). El teal #128C7E pasaba el contraste pero se leía azul. */
#sima-panel {
  --wa-green: #25D366;
  --wa-ink: #06381f;
}
#sima-panel .sima-crm-wa {
  text-decoration: none;
  color: var(--wa-green);
  background: color-mix(in srgb, var(--wa-green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--wa-green) 35%, transparent);
}
#sima-panel .sima-crm-wa:hover { background: color-mix(in srgb, var(--wa-green) 22%, transparent); }
#sima-panel[data-theme="light"] .sima-crm-wa {
  color: var(--wa-ink);
  background: var(--wa-green);
  border-color: color-mix(in srgb, var(--wa-green) 80%, black);
}
#sima-panel[data-theme="light"] .sima-crm-wa:hover { background: color-mix(in srgb, var(--wa-green) 88%, black); }

/* Botón grande "Abrir WhatsApp" de la Ráfaga: siempre relleno verde, en
   todos los temas (es la acción principal de la tarjeta). */
#sima-panel .sima-crm-burst-wa,
#sima-panel .sima-crm-burst-wa.btn-primary-sm {
  background: var(--wa-green);
  color: var(--wa-ink);
  border: none;
  font-weight: 700;
}
#sima-panel .sima-crm-burst-wa:hover { background: color-mix(in srgb, var(--wa-green) 88%, black); }

/* ── Agente vendedor (2026-09-16, de0494): etiqueta de origen del texto y sugerencia ── */
#sima-panel .sima-crm-ai-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
#sima-panel .sima-crm-ai-tag { display: inline-block; padding: 2px 8px; border-radius: 9px; font-size: .72rem; line-height: 1.4; border: 1px solid var(--win-border); color: var(--win-muted); background: var(--win-card); }
#sima-panel .sima-crm-ai-tag.is-ai { color: var(--matrix-color); border-color: rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .12); }
#sima-panel .sima-crm-ai-tag.is-busy { color: var(--win-muted); animation: sima-crm-ai-pulse 1s ease-in-out infinite; }
@keyframes sima-crm-ai-pulse { 0%,100%{opacity:.45} 50%{opacity:1} }
#sima-panel .sima-crm-ai-suggest { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }