/* ═══════════════════════════════════════════════════════
   SEGUIMIENTO — seg-mensajes.css
   La campana del panel y la pantalla «Mensajes programados» de la empresa

   ── BITÁCORA ──
   [v2026.10.05-1] seg-mensajes.css — archivo nuevo
   2026-10-05 | Vista previa aprobada por Alberto el 05-10 (pestaña 4), con seg-mensajes.js y
     seguimiento.html [v2026.10.05-2]:
     + .seg-lp-mp-btn / .seg-lp-mp-cnt: la campana junto al título del panel, con cuántos
       mensajes quedan pendientes (con candado, sin la cuenta). Con el botón de colapsar al lado,
       ese ya no empuja.
     + .seg-mp-modal y sus partes: el subtítulo, la barra (filtros por estado y buscador),
       la tabla con su propio scroll y el pie. La tabla y los filtros son los de la lista de
       cada paciente (.seg-agenda-rec-*, seg-agenda-modal.css), también en celular.
═══════════════════════════════════════════════════════ */

/* ── La campana ── */
.seg-lp-mp-btn {
  margin-left: auto;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid #e0e7ff;
  background: #f5f3ff;
  color: #9961FF;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.seg-lp-mp-btn:hover { background: #ede9fe; border-color: #c4b5fd; }
.seg-lp-mp-btn + .seg-lp-collapse-btn { margin-left: 0; }
.seg-lp-mp-btn.hvy-bloqueado .seg-lp-mp-cnt { display: none; }   /* con candado no hay cuenta que mostrar */
.seg-lp-mp-cnt {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #9961FF;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-sizing: border-box;
}

/* ── La pantalla ── */
.seg-modal.seg-mp-modal {
  width: min(940px, 96vw);
  max-width: none;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.seg-mp-modal .seg-modal-header { padding: 16px 24px 6px; }
.seg-mp-titulo-ico { color: #9961FF; margin-right: 6px; }
.seg-mp-sub { font-size: 11.5px; color: #6b7280; padding: 0 24px 8px; }
.seg-mp-barra { display: flex; align-items: center; gap: 12px; padding: 0 24px 10px; flex-wrap: wrap; }
.seg-mp-barra .seg-agenda-rec-filtros { margin: 0; }
.seg-mp-buscar { margin: 0 0 0 auto; width: 220px; }
.seg-mp-tabla { padding: 0 24px; flex: 1 1 auto; min-height: 120px; max-height: 420px; overflow: auto; overscroll-behavior: contain; }
.seg-mp-pac {
  color: #5b21b6;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
}
.seg-mp-pac:hover { text-decoration: underline; }
.seg-mp-tabla td:nth-child(2) { white-space: nowrap; }
.seg-mp-pie { padding: 8px 24px 14px; }
.seg-mp-cargando { font-size: 12px; color: #9961FF; padding: 14px 0; }
.seg-mp-cargando i { margin-right: 6px; }

@media (max-width: 768px) {
  .seg-mp-modal .seg-modal-header,
  .seg-mp-sub, .seg-mp-barra, .seg-mp-tabla, .seg-mp-pie { padding-left: 14px; padding-right: 14px; }
  .seg-mp-buscar { width: 100%; margin-left: 0; }
  .seg-mp-tabla td:nth-child(2) { white-space: normal; }
  .seg-mp-tabla { max-height: none; }
}