/* ===================================================================
   FLOWDEX · CRM SKIN (piel neón) — capa ADITIVA y REVERSIBLE
   Se carga desde index.html con 1 <link>. No modifica el HTML original.
   Todo va scopeado a #p-crm y a clases .fx-* para no tocar otras pestañas.
   =================================================================== */
:root{ --fx-neon:#00E676; --fx-glow:rgba(0,230,118,.45); }

/* ---- layout: 3 columnas (buscador+lista | chat | anuncios) con grid-areas ----
   IMPORTANTE: NO envolvemos #crm-list en otro div; sigue siendo hijo directo de
   .crm-wrap para que el toggle móvil de la app (chat-open en list.parentNode) funcione. */
body.crm-full .main{max-width:none !important}
#p-crm .crm-wrap{
  grid-template-columns:290px 1fr minmax(360px,24%) !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  grid-template-areas:"search chat ads" "list chat ads" !important;
  gap:10px 14px !important;
}
#p-crm #fx-search-box{ grid-area:search }
#p-crm #crm-list{ grid-area:list; min-height:0; overflow-y:auto; padding-right:2px }
#p-crm .crm-wrap > .chat{ grid-area:chat; min-height:0 }
#p-crm #fx-ads-col{ grid-area:ads }
#p-crm #lbl-bar{display:none !important}   /* el embudo ahora es un menú desplegable */

/* ---- buscador ---- */
.fx-search{display:flex;align-items:center;gap:9px;background:var(--bg3);border:1px solid var(--brd);border-radius:12px;padding:10px 13px;flex-shrink:0}
.fx-search:focus-within{border-color:var(--fx-neon);box-shadow:0 0 0 2px rgba(0,230,118,.12)}
.fx-search .fx-si{color:var(--tx3);font-size:14px}
.fx-search input{background:transparent!important;border:0!important;padding:0!important;width:100%;color:var(--tx);font-size:13.5px;outline:none}

/* ---- item de contacto: avatar redondo (con foto), etiqueta DEBAJO ---- */
#p-crm .crm-item{align-items:center;gap:11px;background:var(--bg2);border:1px solid transparent;border-left:3px solid transparent}
#p-crm .crm-item.on{border-color:rgba(0,230,118,.4);box-shadow:0 0 16px rgba(0,230,118,.12)}
#p-crm .crm-av{width:44px;height:44px;position:relative;overflow:visible}
#p-crm .crm-av img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
#p-crm .crm-av .fx-on{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:var(--fx-neon);border:2px solid var(--bg2)}
.fx-c1{display:flex;align-items:center;gap:6px}
.fx-nm{font-weight:700;font-size:13.5px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.fx-tm{font-size:10px;color:var(--tx3);flex-shrink:0}
.fx-pv{font-size:11.5px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.fx-tagrow{margin-top:5px;display:flex;align-items:center;gap:6px}

/* ---- botón Embudo + menú desplegable (reemplaza la barra de fases) ---- */
.fx-embudo-wrap{position:relative;display:inline-block}
#fx-embudo-btn{cursor:pointer;white-space:nowrap}
#fx-embudo-btn.on{border-color:var(--fx-neon)!important;color:var(--fx-neon)!important;box-shadow:0 0 12px var(--fx-glow)}
.fx-embudo-pop{display:none;position:absolute;top:calc(100% + 10px);left:0;z-index:60;width:360px;max-width:88vw;background:var(--bg2);border:1px solid var(--brd);border-radius:16px;padding:12px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.fx-embudo-pop.open{display:block}
.fx-ep-head{font-size:11px;font-weight:800;letter-spacing:.4px;color:var(--tx);margin:2px 6px 10px}
.fx-ep-head span{font-weight:600;color:var(--tx3)}
.fx-ep-row{display:flex;align-items:flex-start;gap:10px;padding:9px 8px;border-radius:11px;cursor:pointer}
.fx-ep-row:hover{background:var(--bg3)}
.fx-ep-row.act{background:rgba(0,230,118,.08);box-shadow:inset 0 0 0 1px rgba(0,230,118,.3)}
.fx-ep-row .fx-d{width:9px;height:9px;border-radius:50%;margin-top:4px;flex-shrink:0}
.fx-ep-tx{flex:1;min-width:0}
.fx-ep-tx b{display:block;font-size:13px;font-weight:700}
.fx-ep-tx span{display:block;font-size:11.5px;color:var(--tx2);line-height:1.4;margin-top:1px}
.fx-ep-n{font-size:10.5px;font-weight:800;color:#04140c;border-radius:100px;padding:1px 8px;min-width:20px;text-align:center;margin-top:2px;flex-shrink:0}

/* ---- columna de anuncios (solo desktop) ---- */
.fx-ads{display:flex;flex-direction:column;gap:12px;min-height:0}
.fx-ads .fx-ads-lbl{font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--tx3);text-transform:uppercase;text-align:center}
.fx-adcard{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;background:linear-gradient(160deg,rgba(0,230,118,.12),rgba(0,230,118,.02));border:1.5px dashed rgba(0,230,118,.55);border-radius:18px;padding:22px 16px;box-shadow:0 0 26px rgba(0,230,118,.07)}
.fx-adcard .fx-badge{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:1px;color:#04140c;background:var(--fx-neon);border-radius:100px;padding:4px 12px;margin-bottom:14px;box-shadow:0 0 12px var(--fx-glow)}
.fx-adcard .fx-ad-ic{font-size:34px;margin-bottom:6px}
.fx-adcard h3{font-size:17px;margin:0 0 8px;color:#fff;font-weight:800}
.fx-adcard p{font-size:12.5px;color:var(--tx2);line-height:1.55;margin:0 0 16px}
.fx-adcard p b{color:var(--fx-neon)}
.fx-adcard .fx-ad-btn{background:var(--fx-neon);color:#04140c;font-weight:800;font-size:12.5px;border:0;border-radius:11px;padding:11px 18px;box-shadow:0 0 16px var(--fx-glow);cursor:pointer}

/* ---- emojis ---- */
#p-crm .chat-in{position:relative}
.fx-emoji-btn{cursor:pointer}
.fx-emoji-pop{display:none;position:absolute;bottom:calc(100% + 8px);left:0;z-index:40;width:274px;background:var(--bg2);border:1px solid var(--brd);border-radius:14px;padding:8px;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.fx-emoji-pop.open{display:block}
.fx-emoji-pop .fx-eg{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.fx-emoji-pop .fx-eg span{cursor:pointer;text-align:center;border-radius:7px;padding:5px 0;font-size:18px}
.fx-emoji-pop .fx-eg span:hover{background:var(--bg3)}

/* ---- encabezado del chat: no romperse en columnas angostas ---- */
#p-crm #chat-head{flex-wrap:wrap;gap:8px 10px}
#p-crm #chat-head > div:first-child{min-width:0;flex:1}
#p-crm #chat-ph{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
#p-crm #chat-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#p-crm #chat-tools{flex-wrap:wrap;justify-content:flex-end}

/* ---- pulido chat / calificación ---- */
#p-crm #chat-qual:not(:empty){background:linear-gradient(135deg,rgba(0,230,118,.1),rgba(0,230,118,.03));border:1px solid rgba(0,230,118,.35);border-radius:14px;padding:12px 14px;margin-bottom:8px}
/* =========================================================================
   PIEL NEÓN — igualar la propuesta: negro con verde (sacar el tono azulado),
   bordes y sombras verdes, y burbujas de chat diferenciadas.
   ========================================================================= */
/* Fondo general del CRM (adiós al azul). Solo cuando estás en el CRM (body.crm-full). */
body.crm-full{background:#06090a !important}
body.crm-full .main{background:#06090a !important}
body.crm-full .side{background:linear-gradient(180deg,#0a120f,#070c0a) !important}

/* Repintar la paleta SOLO dentro del CRM: todo lo que use estas variables se vuelve negro-verde */
#p-crm{ --bg:#06090a; --bg2:#0a110e; --bg3:#0e1714; --brd:#1b2b24; }

/* Paneles (lista · chat · anuncios): borde y sombra verdes */
#p-crm .crm-list, #p-crm .chat, #p-crm .fx-ads{
  background:#0a110e !important;
  border:1px solid rgba(0,230,118,.16) !important;
  box-shadow:0 0 0 1px rgba(0,230,118,.03), 0 10px 34px rgba(0,0,0,.45) !important;
}

/* Tarjetas de contacto: fondo sutil, borde de color a la izquierda (lo pone el JS) y glow al activo */
#p-crm .crm-item{background:#0c1512 !important}
#p-crm .crm-item:hover{background:#132019 !important}
#p-crm .crm-item.on{background:rgba(0,230,118,.08) !important;border-color:rgba(0,230,118,.45) !important;box-shadow:0 0 18px rgba(0,230,118,.16) !important}

/* Chat: fondo oscuro con grilla de puntos verde (id doble para ganarle al <style> que inyecta la app) */
#p-crm #chat-msgs{
  background-color:#06090a !important;
  background-image:radial-gradient(rgba(0,230,118,.05) 1px, transparent 1px) !important;
  background-size:22px 22px !important;
}
/* Burbuja ENTRANTE (cliente): GRIS tipo WhatsApp, sin sombra verde; fecha/hora bien visible */
#p-crm .msg.user{ background:#212d34 !important; border:1px solid rgba(255,255,255,.05) !important; box-shadow:0 1px 3px rgba(0,0,0,.45) !important; color:#eef3f6 !important }
#p-crm .msg.user .t{ color:#a7b7c1 !important; font-weight:600 !important }
/* Burbuja SALIENTE (vos/IA): verde más oscuro; fecha bien visible */
#p-crm .msg.ia, #p-crm .msg.agent{ background:#0a3a27 !important; border:1px solid rgba(0,230,118,.42) !important; box-shadow:0 0 12px rgba(0,230,118,.16) !important; color:#eafff4 !important }
#p-crm .msg.ia .t, #p-crm .msg.agent .t{ color:rgba(216,255,233,.78) !important; font-weight:600 !important }

/* Buscador con el mismo negro-verde */
#p-crm .fx-search{ background:#0e1714 !important; border-color:rgba(0,230,118,.16) !important }

/* Ficha de calificación del lead (verde con glow) */
#p-crm #chat-qual:not(:empty){background:linear-gradient(135deg,rgba(0,230,118,.12),rgba(0,230,118,.03)) !important;border:1px solid rgba(0,230,118,.35) !important;border-radius:14px;padding:12px 14px;margin-bottom:8px;box-shadow:0 2px 14px rgba(0,230,118,.08)}

/* ---- responsive ---- */
/* Pantallas medianas: sin anuncios, 2 columnas (buscador+lista | chat) */
@media(max-width:1200px){
  #p-crm .crm-wrap{ grid-template-columns:300px 1fr !important; grid-template-areas:"search chat" "list chat" !important }
  #fx-ads-col{ display:none !important }
}
/* Móvil: UNA vista a la vez (lista ↔ chat), respetando el toggle nativo de la app.
   .crm-wrap pasa a display:block y la app muestra/oculta lista o chat con .chat-open. */
@media(max-width:860px){
  #p-crm .crm-wrap{ display:block !important; height:auto !important }
  #fx-ads-col{ display:none !important }
  #p-crm #crm-list{ max-height:none !important; height:auto !important; overflow-y:visible !important }
  #p-crm #fx-search-box{ margin-bottom:10px }
  /* en vista de chat, ocultar el buscador (la app ya oculta la lista) */
  #p-crm .crm-wrap.chat-open #fx-search-box{ display:none !important }
}

/* ===================================================================
   ETAPA 2 — botón "Flujo" por chat + cabecera móvil estilo WhatsApp
   =================================================================== */
/* base (desktop): kebab oculto, subtools en línea, nombre ocupa el espacio */
.fx-kebab{ display:none; align-items:center; justify-content:center; width:40px; height:40px; margin-left:auto; background:var(--bg3); border:1px solid var(--brd2); border-radius:10px; color:var(--tx); font-size:22px; line-height:1; cursor:pointer; flex:none }
#p-crm #fx-subtools{ display:flex; align-items:center; gap:10px }
.fx-flujo-lbl{ margin-left:2px }
#p-crm #chat-head{ gap:10px }
#p-crm #chat-head > div:first-of-type{ flex:1 1 auto; min-width:0 }
#p-crm #chat-ph{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#p-crm #chat-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

@media(max-width:860px){
  /* barra superior: sin título, todo detrás de ⋮ */
  #p-crm .topbar h1{ display:none !important }
  #p-crm .topbar{ position:relative; padding:8px 12px !important; margin-bottom:8px }
  .fx-kebab{ display:inline-flex !important }
  #p-crm .topbar > div{ position:absolute; right:12px; top:100%; margin-top:4px; z-index:70; flex-direction:column; align-items:stretch !important; gap:8px !important; background:var(--bg2); border:1px solid var(--brd2); border-radius:12px; padding:10px; box-shadow:0 16px 40px rgba(0,0,0,.6); display:none !important; min-width:220px }
  #p-crm .topbar.fx-open > div{ display:flex !important }
  #p-crm .topbar > div > *{ width:100%; justify-content:flex-start; text-align:left }
  #p-crm .topbar > div > button:first-of-type{ display:flex !important }   /* revertir el hide de Catálogo */
  #p-crm .topbar > div .muted{ display:inline !important }                 /* "IA Vendedora" visible en el menú */
  #p-crm .topbar .fx-embudo-wrap{ width:100% }
  #p-crm .topbar #fx-embudo-btn{ width:100% }
  /* DENTRO de un chat: ocultar toda la barra superior (⋮ + Embudo/Config/Remarketing/Catálogo).
     Esas opciones quedan solo en la LISTA de chats. */
  body.chat-view #p-crm .topbar{ display:none !important }

  /* DENTRO de un chat: pantalla fija (no se desliza el fondo). Sólo scrollea la lista de mensajes. */
  body.chat-view{ overflow:hidden !important; height:100dvh; overscroll-behavior:none }
  body.chat-view .main{ height:100dvh !important; overflow:hidden !important; padding:8px !important }
  body.chat-view #p-crm, body.chat-view #p-crm .crm-wrap{ height:100% !important; min-height:0 }
  body.chat-view #p-crm .crm-wrap.chat-open .chat{ height:100% !important; max-height:100%; min-height:0 }
  body.chat-view #p-crm #chat-msgs{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch }

  /* cabecera del chat estilo WhatsApp: [←] nombre  [IA][Flujo] ; abajo Remk + Estado */
  #p-crm #chat-head{ flex-wrap:wrap !important; gap:6px 8px; align-items:center }
  #p-crm #crm-back{ order:-2; display:inline-flex !important; align-items:center; justify-content:center; width:36px; height:36px; padding:0 !important; margin:0 !important; font-size:23px !important; background:transparent !important; border:0 !important; color:var(--neon) !important; flex:none }
  #p-crm #chat-head > div:first-of-type{ order:-1; flex:1 1 0; min-width:0 }   /* basis 0: deja lugar a IA+Flujo en el MISMO renglón del nombre */
  #p-crm #chat-tools{ order:0; flex:none !important; display:flex !important; gap:7px; align-items:center }
  #p-crm #chat-tools .muted{ font-size:10.5px }
  #p-crm #fx-subtools{ order:5; flex-basis:100%; padding-top:6px; border-top:1px solid var(--brd); margin-top:2px }
  #p-crm #fx-subtools #chat-status{ flex:1; min-width:0 }
  #p-crm #fx-subtools #chat-remk-btn{ flex:none }
}