/* ==========================================================================
   LeadSync - Multimedia y paneles laterales
   El carrusel del visor, los stickers, el panel de depuracion y la ficha de Odoo.

   OJO CON EL ORDEN: estos ficheros se enlazan en index.html en un orden concreto y
   ese orden ES la cascada. Mover un enlace de sitio cambia que regla gana entre dos
   de la misma especificidad. Si anades uno nuevo, ponlo donde le toque, no al final.
   ========================================================================== */

/* --- Carrusel del visor (item 53) --- */

/* Autor y fecha del archivo que se está viendo, como en fa_27.png. */
.lb-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff;
}
.lb-who b { font-size: 14px; }
.lb-who span {
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
}

/* Flechas de navegación: van sobre el escenario, ancladas a los lados. */
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.lb-nav:hover { background: rgba(255, 255, 255, .24); }
.lb-nav .ic {
  width: 24px;
  height: 24px;
}
.lb-nav.prev { left: 16px; }
.lb-nav.next { right: 16px; }

/* Tira de miniaturas: el historial de multimedia del chat. Scrollea sola en horizontal
   (es la única de la app que puede: son muchos archivos en una fila). */
.lb-strip {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 10px 16px;
  overflow-x: auto;
  overflow-y: hidden;
}
.lb-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255, 255, 255, .1);
  line-height: 0;
}
.lb-thumb.current { border-color: var(--accent); }
.lb-thumb img,
.lb-thumb-vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* item 35: la miniatura de un video es el propio video (pinta su primer fotograma). No
   debe reaccionar al clic: quien manda es el botón que lo envuelve. */
.lb-thumb-vid {
  pointer-events: none;
  background: #000;
}
.lb-thumb-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, .6);
}
.lb-thumb-ph .ic {
  width: 20px;
  height: 20px;
}

/* Marca de video sobre la miniatura, como en fa_27.png. */
.lb-thumb-badge {
  position: absolute;
  left: 3px;
  bottom: 3px;
  display: inline-flex;
  padding: 2px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
}
.lb-thumb-badge .ic {
  width: 11px;
  height: 11px;
}
@media (max-width: 720px) {
  .lb-nav {
    width: 36px;
    height: 36px;
  }
  .lb-nav.prev { left: 6px; }
  .lb-nav.next { right: 6px; }
  .lb-thumb {
    width: 44px;
    height: 44px;
  }
  .lb-strip { justify-content: flex-start; }
}

/* Miniatura de video en la burbuja con botón de reproducir (item 32). */
.media-video-thumb {
  position: relative;
  display: inline-block;
  cursor: pointer;
  line-height: 0;
}
.media-video-thumb .media-video {
  max-width: 260px;
  max-height: 320px;
  border-radius: 8px;
  background: #000;
  display: block;
}
.media-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .5);
  border-radius: 50%;
  color: #fff;
  pointer-events: none;
}
.media-play .ic {
  width: 30px;
  height: 30px;
}

/* Modal de envío de adjunto (item 30). */
.attach-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  max-height: 320px;
  padding: 10px;
  border-radius: 10px;
  background: var(--bg-hover);
  overflow: hidden;
}
.attach-prev-img,
.attach-prev-video {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
}
.attach-prev-audio { width: 100%; }
.attach-prev-file {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}
.attach-prev-file .ic {
  width: 56px;
  height: 56px;
}
.attach-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.attach-meta .attach-name {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attach-meta .attach-size { flex: 0 0 auto; }
.upload-limits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.upload-limits-grid label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.upload-limits-grid input {
  width: 68px;
  padding: 5px 8px;
  border-radius: 6px;
  text-align: right;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.bubble.client {
  align-self: flex-start;
  background: var(--client);
  border-top-left-radius: 2px;
}
.bubble.client .author { color: var(--author-client); }
.bubble.bot {
  align-self: flex-start;
  background: var(--bot);
  border-top-left-radius: 2px;
}
.bubble.bot .author { color: var(--author-bot); }
.bubble.operator {
  align-self: flex-end;
  background: var(--operator);
  border-top-right-radius: 2px;
}
.bubble.operator .author { color: var(--text); }
/* El tono de una persona del equipo (--av-tono), el mismo de su avatar. Lo usa el aviso de
   «Fulana está escribiendo». */
.autor-av-1 { --av-tono: var(--av-1); }
.autor-av-2 { --av-tono: var(--av-2); }
.autor-av-3 { --av-tono: var(--av-3); }
.autor-av-4 { --av-tono: var(--av-4); }
.autor-av-5 { --av-tono: var(--av-5); }
.autor-av-6 { --av-tono: var(--av-6); }
.autor-av-7 { --av-tono: var(--av-7); }
.autor-av-8 { --av-tono: var(--av-8); }

/* --- Stickers (item 32, f_26.png) -----------------------------------------
   En WhatsApp el sticker NO va dentro de una burbuja: se pinta suelto sobre el fondo
   del chat, porque muchos son transparentes y una caja detrás los delataría. Al
   quitarle el fondo, la hora se queda sin sitio legible, así que se despega en su
   propia píldora bajo el sticker (como en la captura).
   OJO: este bloque va DESPUÉS de .bubble.client/.bot/.operator a propósito. Tiene su
   misma especificidad (0,2,0), así que si fuera antes ganarían ellos y el sticker
   seguiría con su caja de color. */
.bubble.sticker {
  background: none;
  padding: 0;
  border-radius: 0;
}
.bubble.sticker .bubble-media {
  margin: 0;
  background: none;
  border-radius: 0;
}

/* contain, NO cover: un sticker no tiene por qué ser cuadrado y cover lo recortaría. */
.bubble.sticker .media-img {
  object-fit: contain;
  border-radius: 0;
}
.bubble.sticker .meta {
  width: fit-content;
  margin: 4px 0 0 auto;

  /* la píldora se pega al borde derecho del sticker */
  padding: 2px 7px;
  border-radius: 8px;
  background: var(--sticker-meta-bg);
}

/* El marcador de descarga sí necesita su caja: sin fondo no se distinguiría el botón. */
.bubble.sticker .bubble-media.placeholder,
.bubble.sticker .bubble-media.loading,
.bubble.sticker .bubble-media.error {
  background: var(--sticker-meta-bg);
  border-radius: 8px;
}
.bubble.system {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: center;
  background: var(--system);
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  max-width: 80%;
  font-weight: 600;
}
.bubble.system .sys-bubble-icon {
  display: inline-flex;
  align-items: center;
  color: inherit;
  flex-shrink: 0;
}
.bubble.system .sys-bubble-icon svg {
  width: 14px;
  height: 14px;
}
.bubble.system .sys-bubble-crown {
  color: inherit;
}


/* SISTEMA TAMBIÉN MANDA MENSAJES, no solo notas al margen (item B39). Cuando WhatsApp no
   entrega lo que el cliente mandó, quien lo cuenta es el sistema —el cliente no escribió esa
   frase— pero ES un mensaje: pasó algo en la conversación y hay un hueco que atender.
   Así que globo normal, a la izquierda como el del bot y el del cliente, firmado "Sistema".

   Se queda con el fondo `--system` para que se reconozca de la misma familia que las notas,
   y recupera todo lo demás: tamaño de texto normal, alineado a la izquierda y `--text`
   en vez de `--text-dim`, porque a tamaño de lectura el atenuado se queda corto de
   contraste sobre este fondo (AA pide 4,5). */
.bubble.system.como-mensaje {
  align-self: flex-start;
  color: var(--text);
  font-size: inherit;
  font-weight: 400;
  text-align: left;
  max-width: 68%;
  display: flex;
  flex-direction: column;
  align-items: start;
}

/* --- Panel de debug (deslizante / fijable) --- */
.debug-panel {
  position: absolute;

  /* El borde SUPERIOR sigue a la cabecera y el INFERIOR al dock (barra de respuesta +
     composer, que crece con el texto). Las dos variables las publican observers que miden
     el elemento de verdad: --chat-header-h en initCabeceraObserver y --dock-h en
     initDockObserver.
     Antes el top era un 60px escrito a mano —el min-height que tenía la cabecera— y en
     cuanto esta cambiaba de alto el panel dejaba de casar: con el acordeón plegado se
     quedaba flotando por debajo, y con tres filas de badges se metía por encima. */
  top: var(--chat-header-h, 60px);
  right: 0;
  bottom: var(--dock-h, 68px);
  width: var(--debug-w);

  /* item 32: sin z-index quedaba en 'auto' y los separadores de día (.date-divider) y
     el botón "ir al final" (.scroll-bottom), ambos z-5, se pintaban ENCIMA del panel.
     z-7 lo sube por encima de ellos y de las barras de búsqueda/selección (z-6), pero
     lo deja por debajo de su propio divisor arrastrable (.resizer z-8), que debe seguir
     agarrable, y de la bandeja de emojis / modales (z-20+). */
  z-index: 7;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  box-shadow: -8px 0 24px var(--shadow);
  transform: translateX(100%);
  transition: transform .25s ease;
  will-change: transform;
}
.debug-panel.open { transform: translateX(0); }

/* Fijado: dock sin sombra (ya no flota sobre el chat). */
.debug-panel.pinned { box-shadow: none; }
.debug-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 8px 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
}
#debug-pin-btn.active {
  color: var(--accent);
  background: var(--accent-dim);
}
.debug-content {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.debug-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.debug-item .tool-name {
  background: var(--bg-elev);
  padding: 6px 10px;
  font-weight: 600;
  color: var(--warn);
  font-size: 13px;
}
.debug-item pre {
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "SFMono-Regular", Consolas, monospace;
}
.debug-item .kv { border-top: 1px solid var(--border); }
.debug-item .kv-label {
  color: var(--accent);
  font-size: 10px;
  padding: 6px 10px 0;
  text-transform: uppercase;
}
.debug-empty {
  color: var(--text-dim);
  text-align: center;
  padding: 20px;
}

/* Cabecera de la pestaña Depuración: cuántas llamadas hay, y a la derecha el botón de copiar
   la conversación (item A56). Estaba arriba junto al pin y al refrescar, donde el sitio es
   escaso y además salía en las cuatro pestañas; copiar para diagnosticar es una acción DE
   depuración y vive aquí. */
.debug-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* Se queda a la vista al bajar por la lista de llamadas: con veinte tool_calls el botón
     quedaba veinte pantallas arriba, que es como no tenerlo. */
  position: sticky;
  top: -12px;
  z-index: 1;
  margin: -12px -16px 0;
  padding: 10px 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
.debug-cab-txt {
  font-size: 11.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* Píldora, no botón de barra: es una acción secundaria y no debe competir con el contenido. */
.debug-copiar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 4px 9px;
  font-size: 11.5px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.debug-copiar:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.debug-copiar .ic {
  width: 13px;
  height: 13px;
}

/* --- Panel "Más información": pestañas Odoo/Depuración (item 21) --- */

/* La cabecera queda fija arriba para que las pestañas no se vayan al hacer scroll de una
   lista larga de pedidos (el panel entero es el que scrollea). */
.debug-header {
  position: sticky;
  top: 0;
  background: var(--bg-panel);
  z-index: 2;
  padding-left: 10px;
}

/* b_6: con 4 pestañas ya no caben — scroll horizontal contenido en su caja (sin
   desbordar sobre actualizar/fijar), con barra finita y la activa siempre a la vista. */
.info-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.info-tabs::-webkit-scrollbar { height: 4px; }
.info-tabs::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}
.info-tab {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  flex: 0 0 auto;
  white-space: nowrap;
}
.info-tab:hover { color: var(--text); }
.info-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.odoo-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* item 18: el botón de actualizar vive en la cabecera del panel, junto al pin. */
#odoo-refresh-btn {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

/* Estados vacíos / error / cargando. */
.odoo-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  color: var(--text-dim);
  padding: 24px 16px;
  font-size: 13px;
}
.odoo-note .ic {
  width: 22px;
  height: 22px;
  opacity: .8;
}
.odoo-note .odoo-hint {
  font-size: 12px;
  opacity: .8;
}
.odoo-err { color: var(--danger); }

/* Ámbar y no rojo: contactos duplicados en Odoo no es un fallo de LeadSync, es un dato que
   hay que ordenar. Rojo diría "esto está roto" sobre algo que funciona y está esperando. */
.odoo-warn { color: var(--warn); }

:root[data-theme="light"] .odoo-warn {
  color: #6d5609; /* el --warn de claro sobre blanco se queda corto de contraste */
}
.odoo-loading .ic { animation: spin 1s linear infinite; }

/* Tarjeta de la ficha del contacto. */
.odoo-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-panel);
}
.odoo-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.odoo-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.odoo-name {
  font-weight: 600;
  color: var(--text);
  font-size: 15px;
  overflow-wrap: anywhere;
}
.odoo-ref {
  font-size: 12px;
  color: var(--text-dim);
}
.odoo-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.odoo-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.odoo-flag .ic {
  width: 13px;
  height: 13px;
}
.odoo-flag.ls {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--accent-dim);
}
.odoo-flag.ai {
  color: var(--info);
  border-color: var(--info-border);
  background: var(--info-bg);
}
.odoo-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.odoo-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.odoo-field-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
}
.odoo-field-val {
  font-size: 13px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.odoo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.odoo-link:hover { background: var(--bg-hover); }
.odoo-link .ic {
  width: 15px;
  height: 15px;
}

/* Resumen (cantidad / acumulado / último). */
.odoo-summary {
  display: flex;
  gap: 8px;
}
.odoo-stat {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 10px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.odoo-stat-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}
.odoo-stat-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-dim);
}

/* Lista de pedidos. */
.odoo-orders-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
  font-weight: 600;
}
.odoo-orders {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.odoo-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: background .15s;
}
.odoo-order:hover { background: var(--bg-hover); }
.odoo-order-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.odoo-order-name {
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.odoo-ls-dot {
  display: inline-flex;
  color: var(--accent);
}
.odoo-ls-dot .ic {
  width: 12px;
  height: 12px;
}
.odoo-order-date {
  font-size: 11px;
  color: var(--text-dim);
}
.odoo-order-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex: 0 0 auto;
}
.odoo-order-total {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.odoo-order-state {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--bg-elev);
  color: var(--text-dim);
}
.odoo-order-state.st-sale {
  color: var(--accent);
  background: var(--accent-dim);
}
.odoo-order-state.st-draft {
  color: var(--warn);
  background: var(--warn-bg);
}
.odoo-order-state.st-sent {
  color: var(--info);
  background: var(--info-bg);
}
.odoo-order-state.st-cancel {
  color: var(--danger);
  background: var(--bg-elev);
}

/* Vincular contacto de Odoo por ID (item 43). */
.odoo-linkbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.odoo-link-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.odoo-id-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 13px;
}
.odoo-id-input:focus {
  outline: none;
  border-color: var(--accent);
}
.odoo-link-form .modal-btn.sm { flex: 0 0 auto; }
.odoo-relink {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.odoo-relink summary,
.cfg-advanced summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-dim);
  list-style: none;
  padding: 2px 0;
}
.odoo-relink summary:hover,
.cfg-advanced summary:hover {
  color: var(--text);
}
.odoo-relink summary::-webkit-details-marker,
.cfg-advanced summary::-webkit-details-marker {
  display: none;
}
.odoo-relink[open] summary,
.cfg-advanced[open] summary {
  margin-bottom: 8px;
  color: var(--accent);
}
.odoo-unlink-btn {
  margin-top: 8px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.odoo-unlink-btn:hover { background: var(--bg-hover); }
.odoo-unlink-btn .ic {
  width: 14px;
  height: 14px;
}