/* =====================================================================
   Chat interno — burbuja flotante (actualizacion102)
   Autocontenido: usa los tokens de general.css (`--surface-*`, `--ink-*`,
   `--edge-*`, `--btn-primary-*`), que ya cambian solos en modo oscuro. Sin
   Tailwind: no depende del CDN ni suma reglas a las páginas.
   z-index 45-48: por ENCIMA del contenido y del menú móvil (burbuja y ventanas 45,
   panel y avisos 46, modales del chat 47, visor 48), por DEBAJO de los modales de
   las páginas (z-50) y del cajón de notificaciones (z-99): un modal nunca queda
   tapado por la burbuja ni esta le roba los botones de abajo a la derecha.
   ===================================================================== */

.rgmchat, .rgmchat * { box-sizing: border-box; }
.rgmchat {
  --chat-propio-a: var(--btn-primary-hover-top);
  --chat-propio-b: var(--btn-primary-hover-bottom);
  --chat-propio-texto: var(--btn-primary-ink);
  --chat-acento: var(--btn-primary-hover-top);
  --chat-ausente: #d29a00;   /* amarillo de «en línea, sin el chat a la vista» */
  --chat-w: 336px;
  --chat-h: 480px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-primary);
}
/* En oscuro el primario es crema: el texto del globo propio pasa a tinta (--btn-primary-ink). */
.dark .rgmchat {
  --chat-propio-a: var(--btn-primary-top);
  --chat-propio-b: var(--btn-primary-bottom);
  --chat-propio-texto: var(--btn-primary-ink);
  --chat-acento: var(--btn-primary-top);
  --chat-ausente: #f0bf2e;
}
/* :where() = especificidad cero: este reseteo no le gana a los estilos de cada botón. */
:where(.rgmchat) button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
.rgmchat button:focus-visible, .rgmchat textarea:focus-visible, .rgmchat input:focus-visible {
  outline: 2px solid var(--chat-acento); outline-offset: 1px;
}
.rgmchat i[class*="ph-"] { line-height: 1; }
/* El atributo hidden gana a los `display:flex` de aquí, sin tocar el resto de las páginas. */
.rgmchat [hidden], .rgmchat-fondo [hidden] { display: none !important; }

/* ---------- Burbuja ---------- */
.rgmchat-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--chat-propio-texto);
  background: linear-gradient(135deg, var(--chat-propio-a), var(--chat-propio-b));
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--edge-default);
  transition: transform .15s ease, box-shadow .15s ease;
}
.rgmchat-fab:hover { transform: translateY(-2px) scale(1.04); }
.rgmchat-fab > i { font-size: 27px; }
.rgmchat-fab.nuevo { animation: rgmchat-rebote .7s ease 1; }
.rgmchat-fab.desconectado::after {
  content: ''; position: absolute; left: 3px; bottom: 3px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--ink-muted); border: 2px solid var(--surface-primary);
}
.rgmchat-badge {
  position: absolute; top: -4px; right: -4px; min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 11px; background: var(--danger); color: #fff; font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface-canvas); box-shadow: var(--shadow-sm);
}
@keyframes rgmchat-rebote {
  0% { transform: scale(1); } 30% { transform: scale(1.22) rotate(-6deg); }
  60% { transform: scale(.94) rotate(4deg); } 100% { transform: scale(1); }
}

@keyframes rgmchat-entra { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Avatares ---------- */
.rgmchat-avatar {
  position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: #fff; letter-spacing: .02em; user-select: none;
}
.rgmchat-avatar.g { font-size: 18px; }
.rgmchat-avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.rgmchat-avatar.xs { width: 30px; height: 30px; font-size: 12px; }
.rgmchat-punto {
  position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink-muted); border: 2px solid var(--surface-primary);
}
.rgmchat-punto.on { background: var(--success); }
/* Conectado pero sin el chat a la vista (cambió de pestaña o de ventana, minimizó). */
.rgmchat-punto.on.ausente { background: var(--chat-ausente); }
.rgmchat-en-linea { color: var(--success); font-weight: 600; }
.rgmchat-en-linea.ausente, .rgmchat-v-tit small.en-linea.ausente { color: var(--chat-ausente); }
.rgmchat-v-tit small.en-linea { color: var(--success); font-weight: 600; }
/* El navegador bloqueó el sonido (no hubo clic en esta pestaña): marca en la burbuja. */
.rgmchat-fab.sin-sonido::before {
  content: "\e45a"; font-family: "Phosphor-Light"; position: absolute; left: -3px; top: -3px; width: 21px; height: 21px;
  border-radius: 50%; background: var(--chat-ausente); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--surface-primary);
}

/* ---------- Panel (lista de chats y personas) ---------- */
.rgmchat-panel {
  position: fixed; right: 20px; bottom: 88px; z-index: 46; width: 360px;
  max-width: calc(100vw - 24px); height: min(580px, calc(100vh - 110px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-primary); border: 1px solid var(--edge-emphasis);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  transform-origin: bottom right; animation: rgmchat-abre .18s ease both;
}
@keyframes rgmchat-abre { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.rgmchat-panel-cab { display: flex; align-items: center; gap: 6px; padding: 14px 14px 8px 16px; }
.rgmchat-panel-cab h3 { margin: 0; font-size: 17px; font-weight: 700; flex: 1; font-family: var(--font-sans); }
.rgmchat-estado { font-size: 11px; color: var(--ink-tertiary); display: flex; align-items: center; gap: 5px; margin-right: 4px; }
.rgmchat-estado::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.rgmchat-estado.off::before { background: var(--warning); }
.rgmchat-ib {
  width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-secondary); font-size: 18px; transition: background .12s;
}
.rgmchat-ib:hover { background: var(--surface-secondary); color: var(--ink-primary); }
.rgmchat-ib:disabled { opacity: .3; cursor: default; background: none; }
.rgmchat-ib.activo { color: var(--chat-acento); }
.rgmchat-buscar { padding: 0 14px 8px; position: relative; }
.rgmchat-buscar input {
  width: 100%; border: 1px solid var(--edge-default); background: var(--surface-secondary); color: var(--ink-primary);
  border-radius: 999px; padding: 8px 14px 8px 36px; font: inherit; outline: none;
}
.rgmchat-buscar > i { position: absolute; left: 26px; top: 9px; color: var(--ink-tertiary); font-size: 16px; }
.rgmchat-tabs { display: flex; gap: 4px; padding: 0 14px 8px; }
.rgmchat-tab {
  flex: 1; padding: 6px 8px; border-radius: 999px; font-weight: 600; font-size: 12.5px; color: var(--ink-secondary);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.rgmchat-tab.activo { background: var(--surface-secondary); color: var(--ink-primary); }
.rgmchat-tab small { background: var(--danger); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 10.5px; line-height: 16px; }
.rgmchat-lista { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 6px 6px; scrollbar-width: thin; }
.rgmchat-item {
  width: 100%; display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--radius-md); text-align: left;
}
.rgmchat-item:hover { background: var(--surface-secondary); }
.rgmchat-item-main { flex: 1; min-width: 0; }
.rgmchat-item-main .n { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.rgmchat-item-main .n span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* `.p` es un <span>: sin `display: block` el «…» no se aplica y un puesto largo
   (pestaña Personas) empujaba el panel de lado. */
.rgmchat-item-main .p { display: block; color: var(--ink-secondary); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgmchat-item.sinleer .n, .rgmchat-item.sinleer .p { font-weight: 700; color: var(--ink-primary); }
.rgmchat-item-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11px; color: var(--ink-tertiary); }
.rgmchat-item-meta .cuenta {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-weight: 700; font-size: 11px; color: var(--chat-propio-texto);
  background: linear-gradient(135deg, var(--chat-propio-a), var(--chat-propio-b)); display: flex; align-items: center; justify-content: center;
}
.rgmchat-item-meta .cuenta.mudo { background: var(--ink-muted); color: var(--surface-primary); }
.rgmchat-vacio { text-align: center; color: var(--ink-tertiary); padding: 36px 24px; }
.rgmchat-vacio i { font-size: 40px; display: block; margin-bottom: 8px; color: var(--ink-muted); }
.rgmchat-seccion { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-tertiary); }
.rgmchat-pie { padding: 8px 14px; border-top: 1px solid var(--edge-subtle); font-size: 11px; color: var(--ink-tertiary); display: flex; gap: 6px; align-items: center; }

/* ---------- Ventanas de chat (a la izquierda de la burbuja) ---------- */
.rgmchat-ventanas {
  position: fixed; right: 92px; bottom: 0; z-index: 45; display: flex; flex-direction: row-reverse;
  align-items: flex-end; gap: 10px; pointer-events: none;
}
.rgmchat-ventana {
  pointer-events: auto; position: relative; width: var(--chat-w); height: var(--chat-h); max-height: calc(100vh - 24px);
  display: flex; flex-direction: column; background: var(--surface-primary);
  border: 1px solid var(--edge-emphasis); border-bottom: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-lg); animation: rgmchat-entra .2s ease; transition: height .18s ease;
}
.rgmchat-ventana.min { height: 54px; }
/* Se abrió sola al llegar un mensaje y nadie la ha tocado: resaltada (sin animar transform: el arrastre lo usa). */
.rgmchat-ventana.sin-atender { box-shadow: 0 0 0 2px var(--chat-acento), var(--shadow-lg); animation: rgmchat-llama 1.4s ease-in-out 3; }
.rgmchat-ventana.sin-atender .rgmchat-v-cab { background: color-mix(in srgb, var(--chat-acento) 13%, var(--surface-primary)); }
@keyframes rgmchat-llama { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--chat-acento) 45%, transparent), var(--shadow-lg); } }
.rgmchat-ventana.min .rgmchat-v-cuerpo, .rgmchat-ventana.min .rgmchat-v-pie { display: none; }
.rgmchat-ventana.arrastrando { z-index: 3; box-shadow: 0 14px 40px rgba(0,0,0,.35); transition: none; opacity: .96; }
.rgmchat-v-cab {
  flex: none; height: 54px; display: flex; align-items: center; gap: 9px; padding: 0 6px 0 10px; cursor: grab; touch-action: none;
  border-bottom: 1px solid var(--edge-subtle); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.rgmchat-ventana.arrastrando .rgmchat-v-cab { cursor: grabbing; }
.rgmchat-v-tit { flex: 1; min-width: 0; line-height: 1.2; }
.rgmchat-v-tit b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgmchat-v-tit small { display: block; font-size: 11.5px; color: var(--ink-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgmchat-v-tit small.escribiendo { color: var(--chat-acento); font-weight: 600; }
.rgmchat-v-acc { display: flex; align-items: center; flex: none; }
.rgmchat-v-acc .rgmchat-ib { width: 28px; height: 28px; font-size: 16px; }
.rgmchat-v-cuerpo { position: relative; flex: 1; min-height: 0; background: var(--surface-canvas); }
.rgmchat-msgs { position: absolute; inset: 0; overflow-y: auto; padding: 10px 10px 6px; scrollbar-width: thin; overscroll-behavior: contain; }
.rgmchat-mas { display: block; margin: 0 auto 8px; font-size: 12px; color: var(--chat-acento); font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.rgmchat-mas:hover { background: var(--surface-secondary); }
.rgmchat-nuevos {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2; font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; box-shadow: var(--shadow-md); display: flex; gap: 5px; align-items: center;
  color: var(--chat-propio-texto); background: linear-gradient(135deg, var(--chat-propio-a), var(--chat-propio-b));
}
.rgmchat-drop {
  position: absolute; inset: 6px; z-index: 3; border: 2px dashed var(--chat-acento); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-primary) 88%, transparent); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; font-weight: 600; color: var(--chat-acento); pointer-events: none;
}
.rgmchat-drop i { font-size: 34px; }

/* ---------- Mensajes ---------- */
.rgmchat-dia { text-align: center; margin: 10px 0 8px; }
.rgmchat-dia span { display: inline-block; font-size: 11px; font-weight: 600; color: var(--ink-secondary); background: var(--surface-secondary);
  padding: 3px 11px; border-radius: 999px; border: 1px solid var(--edge-subtle); }
.rgmchat-sistema { text-align: center; margin: 8px 12px; font-size: 11.5px; color: var(--ink-tertiary); }
.rgmchat-fila { display: flex; align-items: flex-end; gap: 6px; margin-top: 2px; animation: rgmchat-msg .14s ease both; }
.rgmchat-fila.primero { margin-top: 9px; }
.rgmchat-fila.propio { flex-direction: row-reverse; }
@keyframes rgmchat-msg { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.rgmchat-col { max-width: 82%; min-width: 0; display: flex; flex-direction: column; }
.rgmchat-fila.propio .rgmchat-col { align-items: flex-end; }
.rgmchat-hueco { width: 26px; flex: none; }
.rgmchat-autor { font-size: 11px; font-weight: 700; color: var(--ink-secondary); margin: 0 0 2px 10px; }
.rgmchat-burbuja {
  padding: 7px 11px; border-radius: 17px; word-wrap: break-word; overflow-wrap: anywhere; min-width: 0;
  background: var(--surface-primary); border: 1px solid var(--edge-default); border-bottom-left-radius: 5px;
  box-shadow: var(--shadow-xs);
}
.rgmchat-fila.propio .rgmchat-burbuja {
  background: linear-gradient(135deg, var(--chat-propio-a), var(--chat-propio-b)); color: var(--chat-propio-texto);
  border-color: transparent; border-radius: 17px; border-bottom-right-radius: 5px;
}
.rgmchat-fila.error .rgmchat-burbuja { opacity: .6; }
.rgmchat-texto { white-space: pre-wrap; }
.rgmchat-texto a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rgmchat-fila:not(.propio) .rgmchat-texto a { color: var(--brand); }
.rgmchat-hora { font-size: 10.5px; color: var(--ink-tertiary); margin: 2px 6px 0; display: flex; gap: 4px; align-items: center; }
.rgmchat-hora .reintentar { color: var(--danger); font-weight: 600; text-decoration: underline; }

/* ---------- Reacciones (actualizacion106) ----------
   Barra discreta encima de la burbuja: aparece al pasar el mouse (con una pausa,
   para no saltar al recorrer la conversación) o al tocar la burbuja en el celular.
   La mía va resaltada; tocarla otra vez la quita. Debajo, el resumen. */
.rgmchat-caja { position: relative; max-width: 100%; }
/* Cada reacción con su color, siempre (8-oct-2026: «que tengan color cada uno»). */
[data-reac="like"], [data-r="like"] { --c: #2f6fec; }
[data-reac="amor"], [data-r="amor"] { --c: #e5484d; }
[data-reac="risa"], [data-r="risa"] { --c: #e8a200; }
[data-reac="sorprendido"], [data-r="sorprendido"] { --c: #f07a1a; }
[data-reac="triste"], [data-r="triste"] { --c: #2aa3c4; }
[data-reac="dislike"], [data-r="dislike"] { --c: #8b5cf6; }
.dark [data-reac="like"], .dark [data-r="like"] { --c: #6f9cff; }
.dark [data-reac="dislike"], .dark [data-r="dislike"] { --c: #a98bff; }
.rgmchat-svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex: none; }
.rgmchat-reac-barra {
  position: absolute; bottom: calc(100% - 6px); left: 4px; z-index: 3; display: flex; gap: 1px; padding: 3px;
  border-radius: 999px; background: var(--surface-primary); border: 1px solid var(--edge-default); box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; transform: translateY(4px) scale(.94); transform-origin: bottom left;
  transition: opacity .12s ease, transform .12s ease;
}
.rgmchat-fila.propio .rgmchat-reac-barra { left: auto; right: 4px; transform-origin: bottom right; }
@media (hover: hover) {
  .rgmchat-fila:hover .rgmchat-reac-barra { opacity: 1; pointer-events: auto; transform: none; transition-delay: .35s; }
}
.rgmchat-fila.reac-abierta .rgmchat-reac-barra,
.rgmchat-reac-barra:focus-within { opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s; }
.rgmchat .rgmchat-reac {
  width: 30px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--c); transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.rgmchat .rgmchat-reac:hover { transform: scale(1.2); background: color-mix(in srgb, var(--c) 12%, transparent); }
.rgmchat .rgmchat-reac.activo { background: color-mix(in srgb, var(--c) 20%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent); }
.rgmchat .rgmchat-reacs {
  display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; position: relative; z-index: 2;
  margin: -7px 0 0 10px; padding: 2px 7px 2px 5px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--surface-primary); border: 1px solid var(--edge-default); box-shadow: var(--shadow-xs);
  color: var(--ink-secondary); line-height: 1;
}
.rgmchat-fila.propio .rgmchat-reacs { align-self: flex-end; margin: -7px 10px 0 0; }
.rgmchat-reacs i, .rgmchat-reac-ico { font-size: 14px; color: var(--c); display: inline-flex; }
.rgmchat-reacs span { margin-left: 2px; }
.rgmchat .rgmchat-reacs.mia { border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
@media (prefers-reduced-motion: reduce) { .rgmchat-reac-barra, .rgmchat .rgmchat-reac { transition: none; } }

/* ---------- Instalar la app en el celular (actualizacion107) ---------- */
.rgmchat-app { display: flex; gap: 16px; align-items: center; margin-bottom: 6px; }
.rgmchat-app p { margin: 0 0 6px; color: var(--ink-secondary); font-size: 13px; }
/* QR y código de un solo uso (8-oct-2026): el QR siempre en blanco y negro, también en oscuro. */
.rgmchat-qr {
  flex: none; width: 168px; height: 168px; border-radius: var(--radius-md); background: #fff; padding: 6px; box-sizing: border-box;
  border: 1px solid var(--edge-default); display: flex; align-items: center; justify-content: center; text-align: center;
}
.rgmchat-qr svg { width: 100%; height: 100%; display: block; }
.rgmchat-qr.vencido, .rgmchat-qr.listo { background: var(--surface-secondary); }
.rgmchat-qr-msg { font-size: 13px; color: var(--ink-secondary); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px; }
.rgmchat-qr.listo .rgmchat-qr-msg { color: var(--ink-primary); }
.rgmchat-qr-msg i { font-size: 34px; color: #2e7d6b; }
.rgmchat-app-txt { min-width: 0; flex: 1; }
.rgmchat-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 24px; font-weight: 600; letter-spacing: 0.12em;
  color: var(--ink-primary); margin: 2px 0 8px; user-select: all;
}
.rgmchat-vence { height: 4px; border-radius: 2px; background: var(--surface-secondary); overflow: hidden; }
.rgmchat-vence span { display: block; height: 100%; width: 100%; background: var(--chat-acento, #2e7d6b); transition: width 1s linear; }
.rgmchat-vence-txt { display: block; margin-top: 5px; font-size: 12px; color: var(--ink-tertiary); font-variant-numeric: tabular-nums; }
.rgmchat-seguro { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 4px; padding: 9px 11px; border-radius: var(--radius-md); background: var(--surface-secondary); font-size: 12.5px; color: var(--ink-secondary); }
.rgmchat-seguro i { font-size: 17px; color: #2e7d6b; flex: none; }
.rgmchat-modal h4 { margin: 14px 0 6px; font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.rgmchat-modal h4 i { font-size: 18px; }
.rgmchat-modal h4 small { font-weight: 500; color: var(--ink-tertiary); font-size: 12px; }
.rgmchat-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.rgmchat-pasos li { display: flex; gap: 8px; align-items: flex-start; }
.rgmchat-pasos .n { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--surface-secondary); color: var(--ink-secondary); }
.rgmchat-pasos i { vertical-align: -2px; }
@media (max-width: 480px) { .rgmchat-app { flex-direction: column; text-align: center; } }
/* «Visto»: un tick = enviado; dos en azul = visto por todos; dos en gris con n/m = visto por algunos (grupos). */
.rgmchat-visto { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.rgmchat-visto i { font-size: 17px; }
.rgmchat-visto.enviado { color: var(--ink-muted); }
.rgmchat-visto.parcial { color: var(--ink-secondary); }
.rgmchat-visto.visto { color: var(--brand); }
.rgmchat-visto[data-visto] { cursor: pointer; }
.rgmchat-burbuja > * + * { margin-top: 6px; }

/* Archivos */
.rgmchat-adj {
  display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 12px; min-width: 190px; max-width: 100%;
  background: rgba(0, 0, 0, .07); text-align: left; width: 100%;
}
.dark .rgmchat-adj { background: rgba(255, 255, 255, .07); }
.rgmchat-fila.propio .rgmchat-adj { background: rgba(255, 255, 255, .18); }
.dark .rgmchat-fila.propio .rgmchat-adj { background: rgba(0, 0, 0, .14); }
.rgmchat-adj > i { font-size: 26px; flex: none; }
.rgmchat-adj-d { min-width: 0; flex: 1; }
.rgmchat-adj-d b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgmchat-adj-d small { display: block; font-size: 11px; opacity: .85; }
.rgmchat-adj.vencido { opacity: .65; cursor: default; }
.rgmchat-adj.vencido .rgmchat-adj-d small { color: var(--danger); font-weight: 700; opacity: 1; }
.rgmchat-fila.propio .rgmchat-adj.vencido .rgmchat-adj-d small { color: inherit; text-decoration: underline wavy; }
.rgmchat-adj.pronto .rgmchat-adj-d small { font-weight: 700; }
.rgmchat-img { display: block; max-width: 100%; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: rgba(0,0,0,.07); min-height: 60px; }
.rgmchat-img img { display: block; max-width: 100%; max-height: 220px; width: auto; height: auto; margin: 0 auto; }
.rgmchat-img.vencido { cursor: default; min-height: 0; }
.rgmchat-img small { display: block; padding: 5px 9px; font-size: 11px; }
.rgmchat-img.vencido small { color: var(--danger); font-weight: 700; }

/* Menciones (orden de compra, requisición, cliente…) */
.rgmchat-ref {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 12px; text-align: left; width: 100%; min-width: 200px;
  background: var(--surface-secondary); color: var(--ink-primary); border: 1px solid var(--edge-default); text-decoration: none;
}
.rgmchat-ref > i { font-size: 22px; color: var(--chat-acento); flex: none; }
.rgmchat-ref b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgmchat-ref small { display: block; font-size: 11px; color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgmchat-ref .tipo { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-tertiary); font-weight: 700; }
a.rgmchat-ref:hover { border-color: var(--chat-acento); }
.rgmchat-ref.sinacceso { opacity: .8; }

/* ---------- Compositor ---------- */
.rgmchat-v-pie { flex: none; border-top: 1px solid var(--edge-subtle); background: var(--surface-primary); padding: 8px 8px 6px; position: relative; }
.rgmchat-bandeja { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; max-height: 84px; overflow-y: auto; }
.rgmchat-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 9px; border-radius: 999px; font-size: 12px;
  background: var(--surface-secondary); border: 1px solid var(--edge-default); position: relative; overflow: hidden;
}
.rgmchat-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.rgmchat-chip button { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-secondary); }
.rgmchat-chip button:hover { background: var(--edge-emphasis); }
.rgmchat-chip.error { border-color: var(--danger); color: var(--danger); }
.rgmchat-chip .prog { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--chat-acento); transition: width .15s; }
.rgmchat-comp { display: flex; align-items: flex-end; gap: 4px; }
.rgmchat-comp textarea {
  flex: 1; resize: none; min-height: 36px; max-height: 110px; border: 1px solid var(--edge-default); background: var(--surface-secondary);
  color: var(--ink-primary); border-radius: 18px; padding: 8px 13px; font: inherit; line-height: 1.35; outline: none; overflow-y: auto;
}
.rgmchat-comp textarea:focus { border-color: var(--chat-acento); }
.rgmchat-comp textarea::placeholder { color: var(--ink-tertiary); }
.rgmchat-enviar {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
  color: var(--chat-propio-texto); background: linear-gradient(135deg, var(--chat-propio-a), var(--chat-propio-b));
}
.rgmchat-enviar:disabled { opacity: .4; cursor: not-allowed; }
.rgmchat-nota { font-size: 10.5px; color: var(--ink-tertiary); padding: 4px 6px 0; display: flex; gap: 5px; align-items: center; }

/* ---------- Menús y buscadores flotantes ---------- */
.rgmchat-menu {
  position: absolute; z-index: 6; min-width: 210px; max-width: 300px; background: var(--surface-primary); border: 1px solid var(--edge-emphasis);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 5px; animation: rgmchat-entra .12s ease both;
}
.rgmchat-menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); text-align: left; }
.rgmchat-menu button:hover, .rgmchat-menu button.sel { background: var(--surface-secondary); }
.rgmchat-menu button i { font-size: 18px; color: var(--ink-secondary); flex: none; }
.rgmchat-menu button.peligro, .rgmchat-menu button.peligro i { color: var(--danger); }
.rgmchat-menu hr { border: 0; border-top: 1px solid var(--edge-subtle); margin: 4px 0; }
.rgmchat-menu .sub { display: block; font-size: 11px; color: var(--ink-tertiary); }
.rgmchat-menu .tit { padding: 5px 10px 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-tertiary); }
.rgmchat-buscador { width: 300px; padding: 8px; }
.rgmchat-buscador input {
  width: 100%; border: 1px solid var(--edge-default); background: var(--surface-secondary); color: var(--ink-primary);
  border-radius: 999px; padding: 7px 13px; font: inherit; outline: none; margin-bottom: 6px;
}
.rgmchat-buscador .res { max-height: 230px; overflow-y: auto; }
.rgmchat-buscador .res button { padding: 7px 8px; }
.rgmchat-buscador .res .t { min-width: 0; flex: 1; }
.rgmchat-buscador .res .t b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgmchat-buscador .res .t small { display: block; font-size: 11px; color: var(--ink-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgmchat-buscador .vacio { padding: 12px; text-align: center; color: var(--ink-tertiary); font-size: 12px; }

/* ---------- Modales (nuevo grupo, miembros) ---------- */
.rgmchat-fondo {
  position: fixed; inset: 0; z-index: 47; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; padding: 16px;
}
.rgmchat-modal {
  width: 420px; max-width: 100%; max-height: min(640px, calc(100vh - 32px)); display: flex; flex-direction: column;
  background: var(--surface-primary); color: var(--ink-primary); border: 1px solid var(--edge-emphasis); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); overflow: hidden; font-family: var(--font-sans); font-size: 13.5px;
}
.rgmchat-modal * { box-sizing: border-box; }
.rgmchat-modal header { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--edge-subtle); }
.rgmchat-modal header h3 { margin: 0; flex: 1; font-size: 16px; font-weight: 700; font-family: var(--font-sans); }
.rgmchat-modal .cuerpo { padding: 12px 16px; overflow-y: auto; flex: 1; }
.rgmchat-modal footer { padding: 12px 16px; border-top: 1px solid var(--edge-subtle); display: flex; justify-content: flex-end; gap: 8px; }
.rgmchat-modal label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-secondary); margin: 0 0 4px; }
.rgmchat-modal input[type=text], .rgmchat-modal input[type=search] {
  width: 100%; border: 1px solid var(--edge-default); background: var(--surface-secondary); color: var(--ink-primary);
  border-radius: var(--radius-md); padding: 8px 12px; font: inherit; outline: none; margin-bottom: 10px;
}
.rgmchat-modal input:focus { border-color: var(--chat-acento); }
.rgmchat-pers, .rgmchat-modal label.rgmchat-pers { display: flex; align-items: center; gap: 10px; padding: 6px 4px; margin: 0; border-radius: var(--radius-md); cursor: pointer; font-size: inherit; font-weight: inherit; color: inherit; }
.rgmchat-pers:hover { background: var(--surface-secondary); }
.rgmchat-pers .d { flex: 1; min-width: 0; }
.rgmchat-pers .d b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgmchat-pers .d small { color: var(--ink-tertiary); font-size: 11.5px; }
.rgmchat-pers input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--chat-acento); flex: none; }
.rgmchat-btn { padding: 8px 16px; border-radius: var(--radius-md); font-weight: 600; border: 1px solid var(--edge-emphasis); background: var(--surface-secondary); color: var(--ink-primary); }
.rgmchat-btn:hover { background: var(--edge-default); }
.rgmchat-btn.primario { border-color: transparent; color: var(--chat-propio-texto); background: linear-gradient(135deg, var(--chat-propio-a), var(--chat-propio-b)); }
.rgmchat-btn.peligro { color: var(--danger); }
.rgmchat-btn:disabled { opacity: .5; cursor: not-allowed; }
.rgmchat-modal .ayuda { color: var(--ink-tertiary); font-size: 11.5px; margin: -4px 0 10px; }

/* Visor de imágenes */
.rgmchat-visor { position: fixed; inset: 0; z-index: 48; background: rgba(0, 0, 0, .85); display: flex; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; }
.rgmchat-visor img { max-width: 100%; max-height: 100%; border-radius: 6px; }

/* ---------- Móvil: todo a pantalla completa, una conversación a la vez ---------- */
@media (max-width: 640px) {
  .rgmchat-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; }
  .rgmchat-panel { inset: 0; right: 0; bottom: 0; width: auto; max-width: none; height: auto; border-radius: 0; border: 0; z-index: 49; }
  .rgmchat-ventanas { inset: 0; right: 0; display: block; z-index: 48; }
  .rgmchat-fondo { z-index: 50; }
  .rgmchat-visor { z-index: 51; }
  .rgmchat-ventana { position: absolute; inset: 0; width: auto; height: auto; max-height: none; border: 0; border-radius: 0; }
  .rgmchat-ventana:not(:first-child) { display: none; }
  .rgmchat-v-cab { border-radius: 0; cursor: default; }
  .rgmchat-v-acc .solo-escritorio { display: none; }
  .rgmchat-col { max-width: 86%; }
  .rgmchat-comp textarea { font-size: 16px; } /* iOS no hace zoom al enfocar */
}
@media (prefers-reduced-motion: reduce) {
  .rgmchat *, .rgmchat-modal, .rgmchat-fondo * { animation: none !important; transition: none !important; }
}