/* ── BITÁCORA ──
   [v2026.09.29-2] conversaciones.css
   2026-09-29 (2) | + .conv-dup-chip-linea: en la lista, "posible duplicado" pasa a su propia
     línea bajo el último mensaje (conv-render.js [v2026.09.29-2]). Al lado del nombre, en la
     lista angosta, le quitaba todo el espacio: el nombre desaparecía y la marca tapaba la hora.
   [v2026.09.29-1] conversaciones.css
   2026-09-29 | Chat de la página, una persona un contacto (conv-render.js [v2026.09.29-1]):
     + .conv-dup-chip, la marca "posible duplicado" en la lista; + .conv-mail, el correo
     verificado bajo el teléfono del contacto; + .conv-dup, el recuadro con los otros contactos
     de la página con el mismo WhatsApp y su botón "Abrir". Ámbar suave, como los avisos que
     piden mirar algo sin ser un error.
   [v2026.09.21-1] conversaciones.css
   2026-09-21 | + .conv-comp-accion y .conv-comp-revisado: el boton "Marcar como revisado"
     de la franja del comprobante y lo que queda una vez revisado (conv-render
     [v2026.09.21-2]). Revisada, la franja se ATENUA: sigue diciendo que hubo un problema,
     pero ya no pide atencion. El candado lo pone hvyCandado con su estilo de siempre.
   [v2026.09.20-1] conversaciones.css
   2026-09-20 | + .conv-comp: el aviso del comprobante dentro del globo de la imagen
     (conv-render.js [v2026.09.20-1]; preview aprobado por Alberto el 20-09). Verde
     cuando se leyo bien, ambar cuando hay que mirarlo con atencion, rojo suave cuando
     no parece un comprobante. Los mismos colores que ya significan eso en el calendario
     y en la campanita (#1D8A63, #C98A16, #B3261E), para no inventar un codigo nuevo.
   [v2026.08.24-1] conversaciones.css
   2026-08-24 | + .conv-punto-urg: el punto de urgencia junto al nombre. Vive aparte del
     circulo de no leidos porque ese desaparece al abrir la conversacion, y una
     conversacion urgente sigue urgente despues de mirarla.
   [v2026.08.23-2] conversaciones.css
   2026-08-23 (2) | Los colores de urgencia pasan a los del calendario (#B3261E y
     #C98A16): mas frios y, sobre todo, los mismos que ya significan lo mismo alla.
   [v2026.08.23-1] conversaciones.css
   2026-08-23 | + los colores de urgencia del circulo de no atendida.
   ────────────────────────────────────────────────────────────────── */
/* ============================================
   conversaciones.css
   Estilos del módulo de Conversaciones
   Extraído de conversaciones.html
============================================ */

/* ── Panel toggle tabs ── */
.panel-tab {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 48px;
  background: #C9D9FF;
  border: 1px solid #b2c4fb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: background .15s;
  font-size: 9px;
  color: #7D84C1;
}
.panel-tab:hover { background: #b2c4fb; }
.panel-tab-left {
  right: -18px;
  border-radius: 0 6px 6px 0;
  border-left: none;
}
.panel-tab-right {
  left: -18px;
  border-radius: 6px 0 0 6px;
  border-right: none;
}
#convLeftPanel.collapsed {
  width: 0 !important;
  overflow: hidden;
  border: none;
}
#contactPanel.panel-collapsed {
  width: 0 !important;
  overflow: hidden;
  border: none;
}
@media (max-width: 900px) {
  #btnCloseContactPanel { display: block !important; }
}

#convLeftPanel  { transition: width .25s ease; overflow: hidden !important; flex-shrink: 0; }
#convLeftPanel.panel-hidden { width: 0 !important; min-width: 0 !important; border: none !important; }
#contactPanel.panel-hidden  { width: 0 !important; min-width: 0 !important; border: none !important; overflow: hidden !important; }

[data-tooltip] {
  position: relative;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: white;
  color: #374151;
  border: 0.5px solid #e0e7ff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  font-size: 10px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
}
[data-tooltip]::after {
  content: '';
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: white;
  pointer-events: none;
  z-index: 100;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after { display: block; }

/* ── Filter chips — estilo tag violeta Heavensy ── */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  height: 20px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  border: 1.5px solid #e0e7ff;
  background: #f5f3ff;
  color: #7D84C1;
  transition: background .15s, border-color .15s, color .15s;
  flex-shrink: 0;
  outline: none;
}
.filter-chip:hover { background: #ede9fe; border-color: #ede9fe; color: #6D28D9; }
.filter-chip.active { background: #ede9fe; border-color: #ede9fe; color: #6D28D9; }
.filter-chip .filter-count {
  font-size: 9px; font-weight: 700;
  border-radius: 999px; padding: 0 5px; line-height: 1.6;
  background: #ede9fe; color: #7D84C1;
}
.filter-chip.active .filter-count { background: rgba(109,40,217,0.15); color: #6D28D9; }

/* ── Botón refresh panel derecho ── */
.rp-refresh-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid #d0dcf5;
  background: #eff4fe;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .4s ease;
  flex-shrink: 0;
  outline: none;
  position: relative;
  box-shadow: 0 1px 4px rgba(125,132,193,0.10);
}
.rp-refresh-btn:hover { background: #e5edfb; border-color: #c0cef0; }
.rp-refresh-btn.spinning svg { animation: rp-spin .4s ease forwards; }
@keyframes rp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Botón filtros avanzados hover */
#advancedFiltersToggle:hover { background: #e5edfb !important; border-color: #c0cef0 !important; }

#filterChipsContainer::-webkit-scrollbar { display: none; }

@media (max-height: 500px) and (orientation: landscape) {
  #convLeftPanel {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
  }
  #conversationsList {
    overflow-y: visible !important;
    height: auto !important;
    flex: none !important;
  }
  #convLeftPanel > div:first-child {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ── URGENCIA: el color del circulo de no atendida  [23-08-2026] ──────────────
   Clases propias y no las de Tailwind: bg-red-500 traeria el rojo generico del
   framework, y aca el rojo significa "necesita respuesta hoy" — conviene que sea el
   mismo de la campanita y de los chips del calendario, no otro parecido.
   ────────────────────────────────────────────────────────────────────────── */
.conv-urg-rojo  { background: #B3261E; }
.conv-urg-ambar { background: #C98A16; color: #fff !important; }

/* El ambar necesita texto oscuro: sobre amarillo, el blanco no se lee. El !important
   es por el text-white que trae la clase de Tailwind en el mismo elemento. */

/* [24-08-2026] Punto de urgencia en la lista. Chico y antes del nombre: se ve al barrer
   la lista con la vista, sin competir con el contenido. */
.conv-punto-urg {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0; display: inline-block;
}
.conv-punto-rojo  { background: #B3261E; }
.conv-punto-ambar { background: #C98A16; }

/* ── EL AVISO DEL COMPROBANTE  [20-09-2026] ──────────────────────────────────
   Va DENTRO del globo, debajo de la imagen: es donde la persona la esta mirando.
   Solo aparece cuando el sistema tiene algo que decir; un comprobante normal no
   agrega nada a la pantalla. */
.conv-comp {
  margin-top: 8px;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.conv-comp i { margin-top: 1px; }
.conv-comp b { display: block; }
.conv-comp .conv-comp-leido { display: block; margin-top: 4px; opacity: .85; }
.conv-comp.ok   { background: #E1F5EE; color: #12684A; }
.conv-comp.duda { background: #FAEEDA; color: #854F0B; }
.conv-comp.no   { background: #FDECEA; color: #8a1f18; }

/* [21-09-2026] "Marcar como revisado" y lo que queda después. */
.conv-comp .conv-comp-accion {
  display: inline-block;
  margin-top: 7px;
  border: 1px solid currentColor;
  border-radius: 7px;
  padding: 3px 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: inherit;
  background: rgba(255, 255, 255, .6);
  cursor: pointer;
}
.conv-comp .conv-comp-accion:hover:not([disabled]) { background: #fff; }
.conv-comp .conv-comp-accion[disabled] { opacity: .6; cursor: default; }
.conv-comp .conv-comp-revisado { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; }
/* Revisada: se atenúa. El problema queda registrado, pero ya no pide atención. */
.conv-comp.revisado { opacity: .62; }

/* ── [29-09-2026] Chat de la página: una persona, un contacto ── */
.conv-dup-chip{display:inline-flex;align-items:center;gap:3px;background:#fff7ed;color:#b45309;border:1px solid #fed7aa;border-radius:999px;font-size:9.5px;font-weight:700;padding:0 6px;white-space:nowrap;flex-shrink:0}
.conv-dup-chip i{font-size:8px}
.conv-dup-chip-linea{align-self:flex-start;margin-top:3px}
.conv-mail{align-items:center;justify-content:center;gap:5px;font-size:11.5px;color:#6b7280;margin:0 0 8px;max-width:100%}
.conv-mail span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-mail .conv-mail-ok{color:#16a34a}
.conv-dup{border:1px solid #fed7aa;background:#fffbf5;border-radius:10px;padding:8px 10px;margin:0 0 10px;text-align:left;font-size:11.5px;color:#7c4a03;line-height:1.5}
.conv-dup-t{font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:#b45309;margin-bottom:4px}
.conv-dup-f{display:flex;flex-direction:column;gap:6px}
.conv-dup-f + .conv-dup-f{border-top:1px dashed #fed7aa;margin-top:6px;padding-top:6px}
.conv-dup-f b{color:#7c2d12}
.conv-dup-abrir{align-self:flex-start;border:none;border-radius:8px;padding:5px 12px;background:#9961FF;color:#fff;font:600 11.5px 'Poppins',sans-serif;cursor:pointer}
.conv-dup-abrir:hover{background:#7c3aed}