/* [Pulso-Supabase] 🐙 Pulpo Chat: el WhatsApp oficial del negocio dentro de Pulso (public/pulpo.js) */
:root { --pp-a: #f43f5e; --pp-b: #a855f7; --pp-c: #e879f9; --pp-d: #c084fc; --pp-e: #fb7185; }   /* 🎨 colores de Pulpo: 🎨 Apariencia los cambia (estetica.js recolorea estas variables) */
html.cf-hx-listo #cf-app .cf-header-actions [data-ico="pulpo"]::before, .cf-mmenu-ico[data-ico="pulpo"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203.5h14a3%203%200%200%201%203%203v8.5a3%203%200%200%201-3%203h-7.5L7%2021.5V18H5a3%203%200%200%201-3-3V6.5a3%203%200%200%201%203-3z%22/%3E%3Cpath%20d%3D%22M5.5%2011h2.6l1.4-3.4%202.6%206.8%201.7-3.4H18.5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203.5h14a3%203%200%200%201%203%203v8.5a3%203%200%200%201-3%203h-7.5L7%2021.5V18H5a3%203%200%200%201-3-3V6.5a3%203%200%200%201%203-3z%22/%3E%3Cpath%20d%3D%22M5.5%2011h2.6l1.4-3.4%202.6%206.8%201.7-3.4H18.5%22/%3E%3C/svg%3E"); }
#cf-btn-pulpo { position: relative; }
#cf-btn-pulpo.pp-hay::after { content: attr(data-pp-n); position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: #22c55e; color: #04220f;
  font: 800 10.5px/17px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
html.pp-abierto { overflow: hidden; }
.pp { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; background: var(--bg); color: var(--t1); }
.pp[hidden] { display: none; }
.pp-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.pp-logo { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; }
.pp-tit { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.pp-tit b { font-size: 16px; } .pp-tit small { color: var(--t2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-x { border: 0; background: var(--bg); color: var(--t1); width: 36px; height: 36px; border-radius: 50%; font-size: 16px; cursor: pointer; }
.pp-body { flex: 1; display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 0; }
.pp-lista, .pp-chat { min-width: 0; }
.pp-body[hidden] { display: none; }
.pp-lista { display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--surface); min-height: 0; }
.pp-buscar { padding: 10px; } .pp-buscar .cf-input { width: 100%; }
.pp-chats { overflow-y: auto; flex: 1; }
.pp-it { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--t1); text-align: left; font: inherit; cursor: pointer; }
.pp-it:hover { background: var(--bg); } .pp-it.on { background: var(--accent-bg); }
.pp-av { position: relative; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, #0ea5a4, #6366f1); }
.pp-v { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--border-2); box-shadow: 0 0 0 2px var(--surface); }
.pp-v.on { background: #22c55e; }
.pp-it-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-it-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.pp-it-t small { color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.pp-nuevo .pp-it-t small { color: var(--t1); font-weight: 600; }
.pp-it-d { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .pp-it-d small { color: var(--t2); font-size: 11px; }
.pp-it-d em { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #22c55e; color: #04220f; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; }
.pp-nuevo .pp-it-d small { color: #16a34a; font-weight: 700; }
.pp-chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pp-cab { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.pp-cab:empty { display: none; }
.pp-cab-t { display: flex; flex-direction: column; min-width: 0; margin-right: auto; } .pp-cab-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-cab-t small { color: var(--t2); font-size: 12px; }
.pp-atras { display: none; border: 0; background: transparent; color: var(--t1); font-size: 22px; cursor: pointer; padding: 0 4px; }
.pp-ventana { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-bd); white-space: nowrap; }
.pp-ventana.on { background: var(--green-bg); color: var(--green); border-color: var(--green-bd); }
.pp-peds { display: flex; gap: 8px; align-items: center; padding: 8px 14px; overflow-x: auto; background: var(--surface); border-bottom: 1px solid var(--border); }
.pp-peds:empty { display: none; }
.pp-peds-t { font-size: 12px; font-weight: 800; color: var(--t2); white-space: nowrap; } .pp-peds-no { font-weight: 600; }
.pp-ped { display: flex; flex-direction: column; flex-shrink: 0; max-width: 230px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--t1); text-align: left; font: inherit; cursor: pointer; }
.pp-ped b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-ped small { font-size: 11px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-ped:hover { border-color: var(--accent); }
.pp-msgs { flex: 1; overflow-y: auto; padding: 14px 4% 18px; display: flex; flex-direction: column; gap: 4px;
  background: radial-gradient(circle at 20% 10%, color-mix(in srgb, #22c55e 6%, transparent), transparent 40%), var(--bg); }
.pp-dia { text-align: center; margin: 10px 0 6px; } .pp-dia span { font-size: 11.5px; font-weight: 700; color: var(--t2); background: var(--surface); padding: 4px 10px; border-radius: 99px; border: 1px solid var(--border); text-transform: capitalize; }
.pp-m { max-width: min(72%, 560px); padding: 7px 10px 5px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 1px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 4px; }
.pp-in { align-self: flex-start; border-top-left-radius: 4px; }
.pp-out { align-self: flex-end; border-top-right-radius: 4px; background: color-mix(in srgb, #22c55e 16%, var(--surface)); border-color: color-mix(in srgb, #22c55e 30%, var(--border)); }
.pp-falla { border-color: var(--red-bd); background: var(--red-bg); }
.pp-tx { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; }
.pp-meta { align-self: flex-end; font-size: 10.5px; color: var(--t2); white-space: nowrap; }
.pp-tk { font-style: normal; letter-spacing: -2px; margin-left: 2px; } .pp-tk-leido { color: #38bdf8; } .pp-tk-mal { letter-spacing: 0; }
.pp-err { font-size: 11.5px; color: var(--red); }
.pp-img { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; object-fit: cover; } .pp-sticker { max-width: 130px; background: transparent; }
.pp-audio { width: 260px; max-width: 100%; height: 40px; } .pp-video { max-width: 100%; max-height: 320px; border-radius: 10px; }
.pp-doc { color: var(--accent); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.pp-md-no { font-size: 12.5px; color: var(--t2); }
.pp-anuncio { font-size: 11.5px; font-weight: 700; color: var(--pp-b); text-decoration: none; }
.pp-reac { align-self: flex-start; font-size: 18px; } .pp-reac.pp-out { align-self: flex-end; } .pp-reac small { font-size: 11px; color: var(--t2); }
.pp-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; background: var(--surface); border-top: 1px solid var(--border); }
.pp-form[hidden] { display: none; }
.pp-form textarea { flex: 1; resize: none; min-height: 42px; max-height: 140px; line-height: 1.35; padding: 10px 12px; border-radius: 20px; }
.pp-form textarea:disabled { opacity: .75; font-size: 12.5px; }
.pp-enviar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 0; background: linear-gradient(135deg, #22c55e, #0ea5a4); color: #fff; font-size: 18px; cursor: pointer; }
.pp-enviar:disabled { opacity: .4; cursor: not-allowed; }
.pp-vacio { margin: auto; padding: 30px 20px; text-align: center; color: var(--t2); display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 360px; }
.pp-vacio span { font-size: 46px; } .pp-vacio b { color: var(--t1); font-size: 16px; } .pp-vacio .cf-btn { margin-top: 6px; }
.pp-aj { flex: 1; overflow-y: auto; } .pp-aj[hidden] { display: none; }
.pp-aj-in { max-width: 760px; margin: 0 auto; padding: 18px 14px 40px; display: flex; flex-direction: column; gap: 14px; }
.pp-sec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.pp-sec h3 { margin: 0; font-size: 15px; }
.pp-fila { display: flex; gap: 8px; flex-wrap: wrap; } .pp-fila .cf-input { flex: 1; min-width: 220px; }
.pp-nums { display: grid; gap: 8px; }
.pp-num-b { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--t1); font: inherit; cursor: pointer; }
.pp-num-b:hover, .pp-num-b.on { border-color: #22c55e; } .pp-num-b small { color: var(--t2); font-size: 12px; }
.pp-ok { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--green-bg); border: 1px solid var(--green-bd); }
.pp-ok span { font-size: 18px; } .pp-ok div { display: flex; flex-direction: column; gap: 2px; } .pp-ok small { color: var(--t2); }
.pp-peligro { color: var(--red) !important; }
.pp-det summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--t2); } .pp-det code { overflow-wrap: anywhere; }
.pp-acc-l { display: grid; gap: 6px; }   /* lista de quién usa Pulpo (.pp-acc son los botones 📎 📄 del chat) */
.pp-acc-i { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg); }
.pp-acc-i span { display: flex; flex-direction: column; } .pp-acc-i small { color: var(--t2); font-size: 12px; } .pp-acc-i em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--green); }
.pp-pronto ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--t2); font-size: 13.5px; } .pp-pronto b { color: var(--t1); }
@media (max-width: 759px) {
  .pp-body { grid-template-columns: minmax(0, 1fr); }
  .pp-chat { display: none; } .pp-en-chat .pp-chat { display: flex; } .pp-en-chat .pp-lista { display: none; }
  .pp-atras { display: block; }
  .pp-m { max-width: 86%; }
  .pp-ventana { font-size: 10.5px; padding: 4px 8px; white-space: normal; text-align: center; max-width: 120px; }
  .pp-tit small { max-width: 140px; }
}
/* Negocios → funciones y Conexiones */
.cf-neg-fun-b[data-neg-fun="pulpo"].on { color: #fff; background: linear-gradient(135deg, #22c55e, #0ea5a4); }
.pp-ig { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px; border-radius: var(--r); border: 1px solid color-mix(in srgb, #22c55e 40%, var(--border)); background: color-mix(in srgb, #22c55e 7%, var(--surface)); }
.pp-ig > span { font-size: 30px; } .pp-ig > div { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; } .pp-ig small { color: var(--t2); }
.pp-cerrada { padding: 9px 14px; font-size: 12.5px; line-height: 1.4; color: var(--amber); background: var(--amber-bg); border-top: 1px solid var(--amber-bd); }
.pp-cerrada[hidden] { display: none; }
/* ── fases 2-4: pestañas, hoja flotante, adjuntos, plantillas, vendedor, biblioteca, voz ── */
.pp-buscar { display: flex; gap: 6px; } .pp-buscar .cf-input { flex: 1; min-width: 0; }
.pp-nuevo-b { flex-shrink: 0; width: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--t1); font-size: 16px; cursor: pointer; }
.pp-nuevo-b:hover { border-color: #22c55e; }
.pp-hoja { position: absolute; inset: 0; z-index: 5; background: rgba(5, 8, 20, .55); display: flex; align-items: center; justify-content: center; padding: 14px; }
.pp-hoja[hidden] { display: none; }
.pp-hoja-in { position: relative; width: min(560px, 100%); max-height: 88vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.pp-hoja-bib .pp-hoja-in { width: min(820px, 100%); }
.pp-hoja-in h3 { margin: 0 34px 0 0; font-size: 16px; }
.pp-hoja-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; }
.pp-acc { flex-shrink: 0; width: 38px; height: 42px; border: 0; background: transparent; font-size: 19px; cursor: pointer; border-radius: 10px; }
.pp-acc:hover:not(:disabled) { background: var(--bg); } .pp-acc:disabled { opacity: .35; cursor: not-allowed; }
.pp-acc[hidden] { display: none; }
.pp-cerrada .cf-btn { margin-left: 6px; padding: 4px 10px; font-size: 12px; }
.pp-cab-b { flex-shrink: 0; border: 1px solid var(--border); background: var(--bg); color: var(--t1); border-radius: 99px; padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pp-cab-b:hover { border-color: #22c55e; }
.pp-etq { display: inline-block; margin-top: 3px; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--bg); color: var(--t2); border: 1px solid var(--border); width: fit-content; }
.pp-etq-confirmo { background: var(--green-bg); color: var(--green); border-color: var(--green-bd); } .pp-etq-cancelar, .pp-etq-humano { background: var(--red-bg); color: var(--red); border-color: var(--red-bd); }
.pp-etq-cambios, .pp-etq-esperando { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-bd); } .pp-etq-pedido, .pp-etq-sug { background: var(--accent-bg); color: var(--accent); border-color: transparent; }
.pp-it-humano { box-shadow: inset 3px 0 0 var(--red); }
.pp-etq-t { font-weight: 700; color: var(--t1); } .pp-etq-x { border: 0; background: transparent; color: var(--t2); cursor: pointer; font-size: 11px; }
.pp-plantilla { border-style: dashed; } .pp-plt { font-size: 11px; font-weight: 800; color: var(--accent); }
.pp-plt-bts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .pp-plt-bts span { font-size: 12px; font-weight: 700; color: #0ea5a4; border: 1px solid color-mix(in srgb, #0ea5a4 40%, transparent); border-radius: 99px; padding: 3px 10px; }
.pp-trans { font-size: 12.5px; color: var(--t2); font-style: italic; border-left: 2px solid var(--border-2); padding-left: 8px; }
.pp-trans-b { align-self: flex-start; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; }
.pp-sug { padding: 10px 14px; background: var(--accent-bg); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; } .pp-sug[hidden] { display: none; }
.pp-sug-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pp-sug textarea { width: 100%; resize: vertical; }
.pp-plts { display: grid; gap: 8px; }
.pp-plt-i { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--t1); font: inherit; cursor: pointer; }
.pp-plt-i:hover { border-color: #22c55e; } .pp-plt-i small { color: var(--t2); font-size: 11.5px; } .pp-plt-i span { font-size: 13px; color: var(--t2); white-space: pre-wrap; }
.pp-plt-form { display: flex; flex-direction: column; gap: 10px; } .pp-plt-prev { background: var(--bg); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; } .pp-plt-prev .pp-m { max-width: 100%; }
.pp-campo { display: flex; flex-direction: column; gap: 4px; } .pp-campo > span { font-size: 12.5px; font-weight: 700; color: var(--t2); } .pp-campo small { color: var(--t2); font-size: 11.5px; }
.pp-campo .cf-input { width: 100%; } .pp-campo textarea.cf-input { resize: vertical; }
.pp-ancho { max-width: 1180px; }
.pp-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pp-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 14px; align-items: start; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-chip { border: 1px solid var(--border); background: var(--bg); color: var(--t1); border-radius: 99px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; } .pp-chip.on { background: #22c55e; color: #04220f; border-color: transparent; font-weight: 700; }
.pp-vars { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: var(--bg); } .pp-vars > b { font-size: 12.5px; }
.pp-var { display: grid; grid-template-columns: 44px 1fr 1fr; gap: 6px; align-items: center; } .pp-var > span { font-weight: 800; font-size: 12px; color: var(--accent); }
.pp-sugs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.pp-sug-i { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--t1); text-align: left; font: inherit; cursor: pointer; } .pp-sug-i:hover { border-color: #22c55e; } .pp-sug-i small { color: var(--t2); font-size: 11.5px; }
.pp-prev-t { font-size: 12.5px; color: var(--t2); }
.pp-pl-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.pp-pl { border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--bg); }
.pp-pl header { display: flex; justify-content: space-between; gap: 6px; align-items: center; flex-wrap: wrap; } .pp-pl p { margin: 0; font-size: 13px; } .pp-pl small { color: var(--t2); font-size: 11.5px; }
.pp-badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; } .pp-badge-ok { background: var(--green-bg); color: var(--green); } .pp-badge-esp { background: var(--amber-bg); color: var(--amber); } .pp-badge-mal { background: var(--red-bg); color: var(--red); }
.pp-mini { align-self: flex-start; border: 1px solid var(--border); background: transparent; color: var(--t1); border-radius: 99px; padding: 3px 10px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.pp-auto { border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pp-auto-h { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .pp-auto-h span { display: flex; flex-direction: column; gap: 3px; } .pp-auto-h small { color: var(--t2); font-size: 12px; line-height: 1.4; }
.pp-log { margin: 6px 0 0; padding-left: 16px; font-size: 12px; color: var(--t2); display: grid; gap: 3px; }
.pp-bt { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; } .pp-bt-cfg { display: flex; flex-direction: column; gap: 14px; }
.pp-bt-prueba { position: sticky; top: 0; }
.pp-modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pp-modo { display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--t1); text-align: left; font: inherit; cursor: pointer; } .pp-modo small { color: var(--t2); font-size: 11.5px; }
.pp-modo.on { border-color: transparent; background: linear-gradient(135deg, #22c55e, #0ea5a4); color: #fff; } .pp-modo.on small { color: rgba(255,255,255,.85); }
.pp-prod { border: 1px solid var(--border); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; } .pp-off { opacity: .55; }
.pp-prod-h { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .pp-prod-h .cf-input { flex: 1; min-width: 160px; } .pp-prod-h .pp-precio { flex: 0 0 110px; min-width: 0; }
.pp-mini-sw { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: var(--t2); }
.pp-prod-media { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pp-pm { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--bg); display: grid; place-items: center; flex-shrink: 0; }
.pp-pm img, .pp-pm video { width: 100%; height: 100%; object-fit: cover; } .pp-pm i { position: absolute; color: #fff; font-style: normal; text-shadow: 0 1px 4px #000; }
.pp-pm button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; cursor: pointer; }
.pp-pm-add { height: 64px; padding: 0 12px; border-radius: 10px; border: 1px dashed var(--border-2); background: transparent; color: var(--t2); font: inherit; font-size: 12px; cursor: pointer; }
.pp-id { color: var(--t2); font-size: 10.5px; }
.pp-guardar { position: sticky; bottom: 0; z-index: 2; padding: 10px 12px; margin: 0 -12px; background: var(--bg); border-top: 1px solid var(--border); box-shadow: 0 -8px 18px -12px rgba(0,0,0,.6); }
.pp-prueba { height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: var(--bg); }
.pp-prueba .pp-m { max-width: 92%; } .pp-ped-prueba { font-size: 12px; font-weight: 700; color: var(--green); background: var(--green-bg); border-radius: 8px; padding: 6px 8px; }
.pp-escribiendo { color: var(--t2); font-style: italic; }
.pp-bib { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.pp-bib-i { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--t1); text-align: left; font: inherit; cursor: pointer; min-width: 0; }
.pp-bib-i > a, .pp-bib-i > img, .pp-bib-i > video { display: block; } .pp-bib-i img, .pp-bib-i video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--surface); }
.pp-bib-i > a { position: relative; } .pp-bib-i i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 22px; text-shadow: 0 1px 6px #000; pointer-events: none; }
button.pp-bib-i { position: relative; } button.pp-bib-i > i { top: 8px; left: 8px; right: 8px; aspect-ratio: 1; bottom: auto; }
.pp-bib-i b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-bib-i small { font-size: 11px; color: var(--t2); }
.pp-bib-ico { display: grid; place-items: center; width: 100%; aspect-ratio: 1; font-size: 34px; background: var(--surface); border-radius: 8px; }
.pp-voces { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.pp-voz { display: flex; gap: 6px; align-items: center; padding: 6px; border-radius: 10px; border: 1px solid var(--border); } .pp-voz.on { border-color: #22c55e; background: var(--green-bg); }
.pp-voz-el { flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: left; border: 0; background: transparent; color: var(--t1); font: inherit; cursor: pointer; min-width: 0; } .pp-voz-el small { color: var(--t2); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1000px) { .pp-bt { grid-template-columns: minmax(0, 1fr); } .pp-bt-prueba { position: static; } }
@media (max-width: 759px) {
  .pp-tit small { display: none; }
  .pp-cab { flex-wrap: wrap; } .pp-cab-b { font-size: 11px; padding: 4px 8px; }
  .pp-modos { grid-template-columns: 1fr; } .pp-var { grid-template-columns: 38px 1fr; } .pp-var input { grid-column: 2; }
  .pp-acc { width: 32px; font-size: 17px; }
}
.cf-pp-pedido { border: 1px solid color-mix(in srgb, #22c55e 45%, transparent) !important; background: color-mix(in srgb, #22c55e 12%, transparent) !important; font-weight: 700; }
/* los avisos de Pulso se ven encima de Pulpo */
html.pp-abierto .cf-toast, html.pp-abierto #cf-toast { z-index: 9800; }
.pp-tema { font-size: 16px; }
/* ── 🤖 vendedor: el producto primero ── */
.pp-bt-top { gap: 8px; } .pp-bt-tit { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pp-seg { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--bg); border: 1px solid var(--border); }
.pp-seg button { border: 0; background: transparent; color: var(--t2); font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 99px; cursor: pointer; }
.pp-seg button.on { background: linear-gradient(135deg, #22c55e, #0ea5a4); color: #fff; }
.pp-subtabs { display: flex; gap: 4px; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; overflow-x: auto; }
.pp-subtabs button { border: 0; background: transparent; color: var(--t2); font: inherit; font-size: 14px; font-weight: 700; padding: 8px 12px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.pp-subtabs button.on { background: var(--accent-bg); color: var(--accent); }
.pp-empieza { align-items: center; text-align: center; padding: 34px 20px; } .pp-empieza > span { font-size: 52px; } .pp-empieza .cf-sub { max-width: 520px; }
.pp-prods { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 14px; align-items: start; }
.pp-plist { position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 220px); overflow-y: auto; padding-right: 2px; }
.pp-pi { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--t1); text-align: left; font: inherit; cursor: pointer; }
.pp-pi:hover { border-color: #22c55e; } .pp-pi.on { border-color: transparent; box-shadow: 0 0 0 2px #22c55e; background: var(--green-bg); }
.pp-pi-f { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; background: var(--bg); font-size: 22px; } .pp-pi-f img { width: 100%; height: 100%; object-fit: cover; }
.pp-pi-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .pp-pi-t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-pi-t small { font-size: 11.5px; color: var(--t2); }
.pp-barra { display: block; height: 5px; border-radius: 99px; background: var(--bg); overflow: hidden; } .pp-barra > i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #0ea5a4); }
.pp-pe { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pp-pe-nom { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pp-pe-nombre { flex: 1; min-width: 200px; font-size: 18px !important; font-weight: 800; }
.pp-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.pp-estructura { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px !important; line-height: 1.5; }
.pp-ia-b { background: linear-gradient(135deg, #8b5cf6, #ec4899) !important; border: 0 !important; color: #fff !important; }
.pp-obj { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(200px, 2fr) auto; gap: 6px; align-items: start; }
.pp-obj .cf-input { width: 100%; } .pp-obj textarea { resize: vertical; }
.pp-guardar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pp-probar .pp-prueba { height: 56vh; }
@media (max-width: 900px) {
  .pp-prods { grid-template-columns: minmax(0, 1fr); } .pp-plist { position: static; max-height: none; flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .pp-plist > .pp-fila { flex-direction: column; flex-shrink: 0; } .pp-pi { min-width: 220px; flex-shrink: 0; }
  .pp-obj { grid-template-columns: minmax(0, 1fr) auto; } .pp-obj textarea { grid-column: 1 / -1; grid-row: 2; }
}

/* ── 🫧 fase 1: navegación (barra lateral en computador · barra de abajo en celular), varios números y bots, salud ── */
.pp-pulso { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; border: 1px solid var(--border); background: var(--bg); color: var(--t1); border-radius: 99px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.pp-pulso:hover { border-color: var(--pp-a); }
.pp-main { flex: 1; display: flex; min-height: 0; }
.pp-centro { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pp-side { width: 196px; flex-shrink: 0; display: flex; flex-direction: column; gap: 3px; padding: 10px 8px; background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; transition: width .18s ease; }
.pp-nav { display: flex; align-items: center; gap: 14px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--t2); font: inherit; font-size: 13.5px; font-weight: 700; text-align: left; cursor: pointer; white-space: nowrap; }
.pp-nav:hover { background: var(--bg); color: var(--t1); }
.pp-nav.on { background: color-mix(in srgb, var(--pp-b) 14%, var(--surface)); color: var(--t1); box-shadow: inset 3px 0 0 var(--pp-b); }
.pp-nav:focus-visible, .pp-pulso:focus-visible { outline: 2px solid var(--pp-b); outline-offset: 1px; }
.pp-nav-i { position: relative; flex-shrink: 0; width: 24px; font-style: normal; font-size: 18px; line-height: 1; text-align: center; }
.pp-nav-i em { position: absolute; top: -7px; right: -11px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: #22c55e; color: #04220f; font: 800 10px/17px system-ui, sans-serif; box-shadow: 0 0 0 2px var(--surface); }
.pp-nav span { overflow: hidden; text-overflow: ellipsis; }
.pp-nav-mas { display: none; }
.pp-nav-plegar { margin-top: auto; }
.pp-plegado .pp-side { width: 60px; }
.pp-plegado .pp-nav span { display: none; }
.pp-plegado .pp-nav-plegar .pp-nav-i { transform: rotate(180deg); }
.pp-mas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pp-mas-i { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg); color: var(--t1); font: inherit; cursor: pointer; }
.pp-mas-i span { font-size: 24px; } .pp-mas-i.on { border-color: var(--pp-b); }
.pp-mas-pulso { grid-column: 1 / -1; flex-direction: row; justify-content: center; }
/* chats: filtros, bot y asesor de cada chat */
.pp-filtros { display: flex; gap: 6px; padding: 0 10px 8px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; } .pp-filtros::-webkit-scrollbar { display: none; }
.pp-filtros .pp-chip { flex-shrink: 0; }
.pp-f-bot { flex-shrink: 0; max-width: 170px; border: 1px solid var(--border); background: var(--bg); color: var(--t1); border-radius: 99px; padding: 4px 8px; font: inherit; font-size: 12px; }
.pp-it-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 1px; }
.pp-chip-m { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--bg); border: 1px solid var(--border); color: var(--t2); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-cab-ico { padding: 4px 8px; }
/* ajustes: números conectados con su bot */
.pp-numl { display: grid; gap: 8px; }
.pp-numc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); }
.pp-numc.pp-off { opacity: .6; }
.pp-numc-t { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; } .pp-numc-t small { color: var(--t2); font-size: 12px; }
.pp-numc-bot { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; } .pp-numc-bot select { min-width: 150px; }
/* vendedor: varios bots */
.pp-bots { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-bottom: 10px; border-bottom: 1px dashed var(--border); }
.pp-bots-sel { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; font-size: 12.5px; font-weight: 800; color: var(--t2); } .pp-bots-sel select { flex: 1; min-width: 0; }
/* 🩺 salud */
.pp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pp-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.pp-kpi span { font-size: 18px; } .pp-kpi b { font-size: 20px; } .pp-kpi small { color: var(--t2); font-size: 12px; }
.pp-kpi-mal { border-color: var(--red-bd); background: var(--red-bg); }
.pp-tabla-w { overflow-x: auto; }
.pp-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-tabla th, .pp-tabla td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.pp-tabla th:first-child, .pp-tabla td:first-child { text-align: left; } .pp-tabla th { color: var(--t2); font-size: 11.5px; font-weight: 800; }
.pp-barras { display: flex; align-items: flex-end; gap: 8px; height: 140px; }
.pp-barra-d { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; min-width: 0; }
.pp-barra-d i { width: 100%; max-width: 42px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--pp-a), var(--pp-b)); }
.pp-barra-d b { font-size: 11px; } .pp-barra-d small { font-size: 10.5px; color: var(--t2); }
@media (max-width: 759px) {
  .pp-main { flex-direction: column; }
  .pp-side { order: 2; width: auto; flex-direction: row; gap: 2px; padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); border-right: 0; border-top: 1px solid var(--border); overflow: visible; }
  .pp-plegado .pp-side { width: auto; }
  .pp-nav { flex: 1; min-width: 0; flex-direction: column; gap: 3px; padding: 6px 2px; font-size: 10.5px; text-align: center; }
  .pp-nav.on { box-shadow: inset 0 3px 0 var(--pp-b); }
  .pp-plegado .pp-nav span, .pp-nav span { display: block; max-width: 100%; }
  .pp-nav-s, .pp-nav-plegar { display: none; }
  .pp-nav-mas { display: flex; }
  .pp-en-chat .pp-side { display: none; }   /* dentro de un chat, todo el espacio para escribir */
  .pp-pulso { padding: 7px 11px; } .pp-pulso span { display: none; } .pp-cab-ico span { display: none; }
  .pp-numc-bot { width: 100%; } .pp-numc-bot select { flex: 1; }
}
@media (min-width: 760px) and (max-width: 1100px) {   /* tableta: el menú queda en íconos para darle espacio al chat */
  .pp-side { width: 60px; } .pp-nav span { display: none; } .pp-nav-plegar { display: none; }
  .pp-body { grid-template-columns: 290px minmax(0, 1fr); }
  .pp-cab { flex-wrap: wrap; } .pp-cab-t { min-width: 150px; } .pp-cab-ico span { display: none; }
}
/* ── 🚪 fase 2: estructura de entrada (bloques + vista de celular), INVIMA, anuncios ── */
.pp-invima { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--border); }
.pp-cuenta { align-self: flex-end; }
.pp-fila-x { flex-wrap: nowrap; } .pp-fila-x .cf-input { min-width: 0; }
.pp-chip-x { border: 0; background: transparent; color: inherit; font-size: 11px; padding: 0 0 0 4px; cursor: pointer; opacity: .75; }
.pp-entrada { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.pp-blqs { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pp-blq { display: flex; gap: 8px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); transition: border-color .12s, opacity .12s; }
.pp-blq.pp-arrastra { opacity: .45; } .pp-blq.pp-sobre { border-color: var(--pp-b); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pp-b) 30%, transparent); }
.pp-blq-asa { cursor: grab; color: var(--t2); font-size: 18px; line-height: 1; padding: 4px 2px; user-select: none; }
.pp-blq-asa:active { cursor: grabbing; }
.pp-blq-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pp-blq-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pp-blq-h b { margin-right: auto; font-size: 13px; }
.pp-blq-esp { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--t2); } .pp-blq-esp input { width: 58px; padding: 4px 6px; }
.pp-blq-c textarea { resize: vertical; }
.pp-blq-add { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px; border-radius: 12px; border: 1px dashed var(--border); } .pp-blq-add > span { font-size: 12.5px; font-weight: 700; color: var(--t2); }
.pp-cel { position: sticky; top: 8px; border-radius: 26px; border: 6px solid color-mix(in srgb, var(--t1) 14%, var(--surface)); background: var(--bg); overflow: hidden; display: flex; flex-direction: column; max-height: 560px; }
.pp-cel-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 12.5px; }
.pp-cel-chat { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 5px; min-height: 260px;
  background: radial-gradient(circle at 20% 10%, color-mix(in srgb, #22c55e 6%, transparent), transparent 40%), var(--bg); }
.pp-cel-chat .pp-m { max-width: 88%; } .pp-cel-chat .pp-tx { font-size: 13px; }
.pp-cel-esp { align-self: center; font-size: 10.5px; color: var(--t2); padding: 1px 8px; border-radius: 99px; border: 1px dashed var(--border); }
.pp-cel-md { position: relative; display: inline-block; width: 100%; } .pp-cel-md img, .pp-cel-md video { width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; display: block; }
.pp-cel-md .pp-bib-ico { display: block; font-size: 30px; text-align: center; padding: 10px 0; } .pp-cel-md i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; color: #fff; font-size: 26px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.pp-cel-ad { font-size: 10.5px; color: var(--pp-b); font-weight: 700; } .pp-cel-vacio { text-align: center; margin: auto; }
.pp-adl { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; margin-bottom: 10px; }
.pp-adi { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; }
.pp-adi.pp-off { opacity: .5; cursor: not-allowed; }
.pp-adi img, .pp-adi-i { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; display: grid; place-items: center; background: var(--surface); }
.pp-adi > span { display: flex; flex-direction: column; min-width: 0; } .pp-adi small { color: var(--t2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-ped-adimg { flex-direction: row; align-items: center; gap: 8px; padding-left: 5px; } .pp-ped-adimg > span { display: flex; flex-direction: column; min-width: 0; } .pp-ped-adimg b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-ad-mini { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; flex-shrink: 0; background: var(--bg2, rgba(127,127,127,.15)); }
.pp-anuncio-card { display: flex; align-items: center; gap: 9px; width: 100%; max-width: 300px; margin-bottom: 6px; padding: 5px 8px 5px 5px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--pp-b) 35%, transparent); background: color-mix(in srgb, var(--pp-b) 8%, transparent); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.pp-anuncio-card > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pp-anuncio-card b { color: var(--pp-b); font-size: 11.5px; } .pp-anuncio-card small { font-size: 12px; font-weight: 500; color: var(--t1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-anuncio-mini { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--bg2, rgba(127,127,127,.15)); }
.pp-ped-ad { border-color: color-mix(in srgb, var(--pp-b) 45%, var(--border)); } .pp-ped-ad small { color: var(--pp-b); font-weight: 700; }
.pp-estr-v { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--pp-b); padding: 5px 10px; border-radius: 99px; background: color-mix(in srgb, var(--pp-b) 12%, transparent); }
.pp-estr-i { display: flex; align-items: center; gap: 10px; flex-direction: row; text-align: left; }
.pp-estr-i img, .pp-estr-i > span:first-child { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex-shrink: 0; display: grid; place-items: center; font-size: 22px; background: var(--bg); }
.pp-estr-i > span:last-child { display: flex; flex-direction: column; } .pp-estr-i:disabled { opacity: .5; cursor: not-allowed; }
.pp-anu { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .pp-anu img { width: 160px; max-width: 100%; border-radius: 12px; object-fit: cover; }
.pp-anu > div { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; } .pp-anu p { margin: 0; font-size: 13.5px; white-space: pre-wrap; } .pp-anu small { color: var(--t2); }
@media (max-width: 1100px) { .pp-entrada { grid-template-columns: minmax(0, 1fr); } .pp-cel { position: static; max-height: 460px; } }
#cf-pulpo .pp-blq-esp .cf-input { width: 62px; height: 30px; min-height: 0; padding: 2px 6px; font-size: 13px; }
.pp-pre { white-space: pre-wrap; font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin: 6px 0 0; max-height: 320px; overflow-y: auto; color: var(--t1); }
/* ── 🛒 fase 4: pedido manual, huella y programados ── */
.pp-hoja-ped .pp-hoja-in, .pp-hoja-ads .pp-hoja-in { width: min(760px, 100%); }
.pp-hoja-ped .pp-sec-h h3 { margin-right: 0; } .pp-hoja-ped .pp-sec-h { padding-right: 40px; }
.pp-ped-acc { border-style: dashed; } .pp-ped-acc small { color: var(--accent); font-weight: 700; }
.pp-prog-v { color: #0ea5a4; background: color-mix(in srgb, #0ea5a4 12%, transparent); }
.pp-aviso-ped { margin: 0; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-bd); }
.pp-hu-l li { font-size: 12.5px; }
/* ── 🏷️ fase 5: bandeja profesional ── */
.pp-chat { position: relative; }
.pp-etq-c { --c: #64748b; display: inline-block; font-style: normal; font-size: 10.5px; font-weight: 800; padding: 1px 8px; border-radius: 99px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); white-space: nowrap; }
.pp-cab-etq { flex-basis: 100%; display: flex; gap: 4px; flex-wrap: wrap; padding-left: 52px; }
.pp-mas-f { flex-basis: 100%; display: flex; gap: 6px; flex-wrap: wrap; padding-top: 2px; }
.pp-filtros { flex-wrap: nowrap; } .pp-filtros:has(.pp-mas-f) { flex-wrap: wrap; }
input.pp-f-bot { max-width: 150px; }
.pp-otros { padding: 6px 14px; font-size: 12.5px; color: var(--t2); background: color-mix(in srgb, #3b82f6 10%, var(--surface)); border-bottom: 1px solid var(--border); }
.pp-otros[hidden] { display: none; } .pp-otros-esc { color: var(--amber); background: var(--amber-bg); font-weight: 600; }
.pp-nota { align-self: center; width: min(560px, 92%); padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, #eab308 14%, var(--surface)); border: 1px dashed color-mix(in srgb, #eab308 55%, var(--border)); display: flex; flex-direction: column; gap: 3px; }
.pp-nota > b { font-size: 11.5px; color: #a16207; } [data-theme="dark"] .pp-nota > b { color: #facc15; }
.pp-form.pp-en-nota { background: color-mix(in srgb, #eab308 12%, var(--surface)); } .pp-form.pp-en-nota textarea { border-color: #eab308; }
.pp-nota-b.on { background: color-mix(in srgb, #eab308 25%, transparent); }
.pp-pop { position: absolute; left: 10px; right: 10px; bottom: 70px; z-index: 4; max-height: 300px; overflow-y: auto; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.pp-pop[hidden] { display: none; }
.pp-emo { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; } .pp-emo small { grid-column: 1 / -1; color: var(--t2); font-size: 11px; }
.pp-emo button { border: 0; background: transparent; font-size: 22px; padding: 4px; border-radius: 8px; cursor: pointer; } .pp-emo button:hover { background: var(--bg); }
.pp-rap-i { display: flex; align-items: center; gap: 8px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--t1); font: inherit; cursor: pointer; }
.pp-rap-i span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t2); font-size: 12.5px; } .pp-rap-i small { color: var(--accent); font-weight: 700; }
.pp-grab { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border-top: 1px solid var(--border); }
.pp-grab[hidden] { display: none; } .pp-grab > span:nth-of-type(2) { margin-right: auto; color: var(--t2); font-size: 13px; }
.pp-grab-p { animation: pp-latido 1s infinite; } @keyframes pp-latido { 50% { opacity: .25; } }
.pp-acc-mas { display: none; }
.pp-etq-l { display: flex; flex-direction: column; gap: 6px; } .pp-etq-i { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: var(--bg); cursor: pointer; }
.pp-etq-i .pp-etq-c { font-size: 12.5px; padding: 3px 10px; }
.pp-etqs { display: flex; flex-direction: column; gap: 6px; }
.pp-etq-ed { display: flex; align-items: center; gap: 8px; } .pp-etq-ed .cf-input { flex: 1; min-width: 0; } .pp-etq-ed input[type="color"] { width: 38px; height: 34px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.pp-regla { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pp-regla .cf-input { flex: 1; min-width: 160px; } .pp-regla > span { font-size: 12.5px; color: var(--t2); font-weight: 700; }
.pp-rap-ed { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); }
.pp-rap-slash { font-weight: 800; font-size: 18px; color: var(--accent); align-self: center; }
@media (max-width: 759px) {
  .pp-acc-x { display: none; } .pp-acc-mas { display: inline-block; }
  .pp-pop { bottom: 64px; left: 6px; right: 6px; }
  .pp-cab-etq { padding-left: 0; }
}
/* ── 📣 fase 6: seguimientos, ofertas y avisos ── */
.pp-sg-nom { flex: 1; min-width: 160px; font-weight: 800; }
.pp-paso { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; border: 1px dashed var(--border); background: var(--bg); }
.pp-paso > b { font-size: 12.5px; } .pp-paso { position: relative; } .pp-paso > .pp-blq-esp { position: absolute; top: 8px; right: 44px; } .pp-paso > [data-sp-x] { position: absolute; top: 6px; right: 8px; }
.pp-cam { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); }
.pp-aviso { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px dashed var(--border); } .pp-hora { max-width: 120px; min-width: 0 !important; flex: 0 0 120px !important; }
.pp-optsi { color: var(--green); background: var(--green-bg); } .pp-optno { color: var(--red); background: var(--red-bg); }
@media (max-width: 759px) { .pp-paso > .pp-blq-esp { position: static; } }
/* ── 🧪 fase 7: A/B, catálogo general ── */
.pp-numc-ab { flex-basis: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; } .pp-numc-ab select { max-width: 220px; } .pp-ab-pct { width: 74px; }
.pp-ganador { margin: 4px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--green-bg); border: 1px solid var(--green-bd); font-size: 13px; }
.pp-kb { display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow-y: auto; }
.pp-kb-i { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); } .pp-kb-i.pp-off { opacity: .55; }
.pp-kb-nom { flex: 2 !important; font-weight: 700; } .pp-kb-pre { flex: 0 0 120px !important; min-width: 0 !important; }
.pp-sin-g { color: var(--amber); font-size: 12px; }
.pp-av-dest { flex: 1; min-width: 200px; resize: vertical; font-family: inherit; }
.pp-pulso img { width: 22px; height: 22px; border-radius: 7px; display: block; } .pp-mas-pulso img { border-radius: 8px; }
/* 🐙 Pulpo destacado en la barra de Pulso (computador): logo + nombre con el borde de la marca */
html.cf-hx-listo #cf-app .cf-header-actions #cf-btn-pulpo .cf-hide-sm { display: none !important; }   /* solo el logo: así no le quita espacio a los módulos */
html.cf-hx-listo #cf-app .cf-header-actions #cf-btn-pulpo { padding: 0 4px; width: 42px; justify-content: center; gap: 0; color: var(--t1); font-weight: 800;
  background: linear-gradient(color-mix(in srgb, var(--pp-b) 9%, var(--surface)), color-mix(in srgb, var(--pp-b) 9%, var(--surface))) padding-box, linear-gradient(135deg, var(--pp-a), var(--pp-b)) border-box;
  border: 1.5px solid transparent !important; box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--pp-b) 95%, transparent); }
html.cf-hx-listo #cf-app .cf-header-actions #cf-btn-pulpo::before { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; background: url(pulpo-logo.svg) center / cover no-repeat; -webkit-mask-image: none !important; mask-image: none !important; }
html.cf-hx-listo #cf-app .cf-header-actions #cf-btn-pulpo:hover { filter: brightness(1.07); }
.cf-mmenu-item[data-mm="cf-btn-pulpo"] { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--pp-a), var(--pp-b)) border-box; border: 1.5px solid transparent; }
/* ── 🎨 Pulpo con la esencia de Pulso: degradado rosado → morado en lo principal (el verde queda solo para "en línea" y la ventana de 24 h) ── */
.pp-enviar, .pp-seg button.on, .pp-modo.on, .cf-neg-fun-b[data-neg-fun="pulpo"].on, .pp-chip.on { background: linear-gradient(135deg, var(--pp-a), var(--pp-b)) !important; color: #fff !important; border-color: transparent !important; }
.pp-enviar { box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--pp-b) 90%, transparent); }
.pp-it-d em, .pp-nav-i em, #cf-btn-pulpo.pp-hay::after { background: linear-gradient(135deg, var(--pp-a), var(--pp-b)) !important; color: #fff !important; }
.pp-nuevo .pp-it-d small { color: var(--pp-c) !important; }
.pp-out { background: color-mix(in srgb, var(--pp-b) 14%, var(--surface)) !important; border-color: color-mix(in srgb, var(--pp-b) 30%, var(--border)) !important; }
.pp-msgs, .pp-cel-chat { background: radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--pp-a) 6%, transparent), transparent 42%), radial-gradient(circle at 85% 90%, color-mix(in srgb, var(--pp-b) 7%, transparent), transparent 45%), var(--bg) !important; }
.pp-nuevo-b:hover, .pp-cab-b:hover, .pp-plt-i:hover, .pp-pi:hover, .pp-num-b:hover, .pp-num-b.on, .pp-voz.on { border-color: var(--pp-b) !important; }
.pp-pi.on { box-shadow: 0 0 0 2px var(--pp-b) !important; background: color-mix(in srgb, var(--pp-b) 10%, var(--surface)) !important; }
.pp-barra > i { background: linear-gradient(90deg, var(--pp-a), var(--pp-b)) !important; }
.pp-plt-bts span { color: var(--pp-d) !important; border-color: color-mix(in srgb, var(--pp-b) 40%, var(--border)) !important; }
.pp-av { background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); }
/* filtros de los chats: en varias filas (se ven todos, sin tener que deslizar) */
.pp-filtros { flex-wrap: wrap !important; overflow: visible !important; gap: 6px; padding: 0 10px 10px; }
.pp-filtros .pp-chip { padding: 5px 11px; font-size: 12px; }
.pp-mas-f { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; }
.pp-mas-f .pp-f-bot, .pp-mas-f input.pp-f-bot { max-width: none !important; width: 100%; min-width: 0; padding: 6px 10px; border-radius: 10px; }
.pp-mas-f .pp-chip { grid-column: 1 / -1; justify-self: start; }
.pp-cie { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--pp-b) 30%, var(--border)); background: color-mix(in srgb, var(--pp-b) 4%, var(--bg)); }
.pp-cie.pp-off { opacity: .6; } .pp-cie-n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12.5px; color: #fff; background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); }
.pp-vacio-logo { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--pp-b) 90%, transparent); }
/* ── 🎨 Pulpo con la cara de Pulso: logotipo con degradado, íconos de línea (iconos.js), barra y menú como los de Pulso ── */
#cf-pulpo .pp-top { gap: 12px; padding: 9px 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--pp-b) 12%, var(--surface)), color-mix(in srgb, var(--pp-b) 5%, var(--surface)));
  border-bottom: 1px solid color-mix(in srgb, var(--pp-c) 30%, var(--border)); box-shadow: 0 10px 30px -24px color-mix(in srgb, var(--pp-b) 80%, transparent); position: relative; z-index: 2; }
#cf-pulpo .pp-logo { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--pp-b) 90%, transparent); }
#cf-pulpo .pp-tit { flex-direction: row; align-items: center; gap: 14px; }
.pp-wm { display: inline-flex; flex-direction: column; align-items: stretch; gap: 4px; line-height: 1; flex-shrink: 0; }
.pp-wm-n { font-size: 23px; font-weight: 900; letter-spacing: -.5px; background: linear-gradient(90deg, var(--pp-e), var(--pp-c) 55%, var(--pp-d)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pp-wm-s { display: flex; justify-content: space-between; font-size: 7.5px; font-weight: 800; padding: 0 1px; color: rgba(255, 255, 255, .82); }
.pp-wm-s i { font-style: normal; }
#cf-pulpo .pp-tit small { padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--t2); background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid color-mix(in srgb, var(--pp-b) 20%, var(--border)); }
#cf-pulpo .pp-tit small:empty { display: none; }
#cf-pulpo .pp-pulso { border-color: color-mix(in srgb, var(--pp-b) 30%, var(--border)); background: var(--surface); }
#cf-pulpo .pp-pulso:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a) 14%, transparent), color-mix(in srgb, var(--pp-b) 18%, transparent)); border-color: color-mix(in srgb, var(--pp-c) 50%, transparent); }
#cf-pulpo .pp-x { background: var(--surface); border: 1px solid color-mix(in srgb, var(--pp-b) 22%, var(--border)); display: inline-grid; place-items: center; }
#cf-pulpo .pp-tema .cf-ic { width: 18px; height: 18px; margin: 0; }
/* menú lateral: íconos con el degradado de Pulso; el activo es una píldora rosada → morada como en la barra de Pulso */
#cf-pulpo .pp-side { background: linear-gradient(180deg, color-mix(in srgb, var(--pp-b) 6%, var(--surface)), var(--surface) 60%); gap: 4px; }
#cf-pulpo .pp-nav { border-radius: 12px; transition: background .15s, color .15s, box-shadow .15s; }
#cf-pulpo .pp-nav:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a) 8%, transparent), color-mix(in srgb, var(--pp-b) 10%, transparent)); color: var(--t1); }
#cf-pulpo .pp-nav.on { color: var(--t1); background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a) 16%, transparent), color-mix(in srgb, var(--pp-b) 22%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pp-c) 38%, transparent), 0 8px 22px -14px color-mix(in srgb, var(--pp-b) 90%, transparent); }
#cf-pulpo .pp-nav-i { display: inline-grid; place-items: center; height: 24px; }
#cf-pulpo .pp-nav-i .cf-ic { width: 21px; height: 21px; margin: 0; vertical-align: 0; }
#cf-pulpo .pp-nav-plegar .pp-nav-i .cf-ic { width: 18px; height: 18px; }
/* buscar con lupa de línea */
#cf-pulpo #pp-q { padding-left: 38px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c084fc' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 13px 50% / 17px; }
#cf-pulpo .pp-nuevo-b { display: inline-grid; place-items: center; }
#cf-pulpo .pp-nuevo-b .cf-ic { width: 20px; height: 20px; margin: 0; }
/* chips, botones de la cabecera y etiquetas: ícono pequeño; sobre fondo de color, blanco */
#cf-pulpo :is(.pp-chip, .pp-cab-b, .pp-mini, .pp-pm-add, .pp-seg > button) .cf-ic { width: 1.1em; height: 1.1em; margin-right: .3em; vertical-align: -.2em; }
#cf-pulpo :is(.pp-chip.on, .pp-seg > button.on, .pp-modo.on) .cf-ic, #cf-pulpo .cf-btn-primary .cf-ic { stroke: #fff; }
#cf-pulpo .pp-etq .cf-ic { stroke: currentColor; width: 1.05em; height: 1.05em; margin-right: .25em; vertical-align: -.18em; }
#cf-pulpo .pp-cab-ico .cf-ic { margin-right: 0; } #cf-pulpo .pp-cab-ico span { margin-left: .3em; }
#cf-pulpo .pp-cab-b { display: inline-flex; align-items: center; background: var(--surface); border-color: color-mix(in srgb, var(--pp-b) 22%, var(--border)); }
#cf-pulpo .pp-cab-b:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a) 10%, transparent), color-mix(in srgb, var(--pp-b) 14%, transparent)); }
#cf-pulpo .pp-ped-acc > b .cf-ic, #cf-pulpo .pp-peds-t .cf-ic { margin-right: .3em; }
#cf-pulpo .pp-sug-h > b .cf-ic, #cf-pulpo .pp-sec h3 .cf-ic, #cf-pulpo .pp-hoja-in h3 .cf-ic { width: 1.15em; height: 1.15em; }
#cf-pulpo .pp-mas-i > span .cf-ic { width: 26px; height: 26px; margin: 0; }
/* barra de escribir: íconos de línea, hover con el tinte de Pulso y botón de enviar con su degradado */
#cf-pulpo .pp-acc .cf-ic { width: 22px; height: 22px; margin: 0; vertical-align: middle; }
#cf-pulpo .pp-acc:hover:not(:disabled) { background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a) 10%, transparent), color-mix(in srgb, var(--pp-b) 14%, transparent)); }
#cf-pulpo .pp-enviar { display: inline-grid; place-items: center; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--pp-b) 90%, transparent); }
#cf-pulpo .pp-enviar svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-left: -2px; }
#cf-pulpo .pp-form textarea { border-color: color-mix(in srgb, var(--pp-b) 20%, var(--border)); }
#cf-pulpo .pp-form textarea:focus { border-color: var(--pp-d); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-b) 18%, transparent); }
/* lista de chats: el abierto con la franja de Pulso */
#cf-pulpo .pp-it.on { background: linear-gradient(90deg, color-mix(in srgb, var(--pp-b) 16%, transparent), color-mix(in srgb, var(--pp-a) 4%, transparent)); box-shadow: inset 3px 0 0 var(--pp-d); }
#cf-pulpo .pp-it.on.pp-it-humano { box-shadow: inset 3px 0 0 var(--red); }
/* tarjetas de configuración como las de Pulso */
#cf-pulpo .pp-sec { border-color: color-mix(in srgb, var(--pp-b) 18%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, var(--pp-b) 5%, var(--surface)), var(--surface) 55%); box-shadow: 0 12px 30px -26px color-mix(in srgb, var(--pp-b) 80%, transparent); }
#cf-pulpo .pp-sec h3 { font-size: 15.5px; font-weight: 800; letter-spacing: -.1px; }
/* modo claro */
html[data-theme="light"] #cf-pulpo .pp-top { background: linear-gradient(180deg, #fff, #faf5ff); }
html[data-theme="light"] .pp-wm-s { color: #5b6478; }
@media (prefers-color-scheme: light) { html:not([data-theme]) #cf-pulpo .pp-top { background: linear-gradient(180deg, #fff, #faf5ff); } html:not([data-theme]) .pp-wm-s { color: #5b6478; } }
/* 📱 celular: cabecera del chat en una sola línea (las acciones quedan en íconos) y barra de escribir sin apretujar */
@media (max-width: 759px) {
  #cf-pulpo .pp-top { padding: 8px 12px; }
  #cf-pulpo .pp-logo { width: 36px; height: 36px; border-radius: 11px; }
  .pp-wm-n { font-size: 21px; } #cf-pulpo .pp-tit small { display: none; }
  #cf-pulpo .pp-cab { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  #cf-pulpo .pp-cab .pp-av { width: 38px; height: 38px; font-size: 13px; }
  #cf-pulpo .pp-cab-t { flex: 1 1 0; min-width: 60px; } #cf-pulpo .pp-cab-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #cf-pulpo .pp-cab-b { width: 34px; height: 34px; padding: 0; justify-content: center; }
  #cf-pulpo .pp-cab-b span { display: none; } #cf-pulpo .pp-cab-b .cf-ic { width: 17px; height: 17px; margin: 0; }
  #cf-pulpo .pp-ventana { flex-shrink: 0; max-width: none; white-space: nowrap; padding: 4px 8px; }
  #cf-pulpo .pp-vt-l { display: none; }
  #cf-pulpo .pp-cab-etq { flex-basis: 100%; }
  #cf-pulpo .pp-form { gap: 4px; padding: 8px; }
  #cf-pulpo .pp-acc { width: 36px; } #cf-pulpo .pp-acc .cf-ic { width: 21px; height: 21px; }
  #cf-pulpo .pp-form textarea { min-width: 0; }
  #cf-pulpo .pp-peds { scrollbar-width: none; } #cf-pulpo .pp-peds::-webkit-scrollbar { display: none; }
  #cf-pulpo .pp-nav.on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pp-c) 38%, transparent); }
}
#cf-pulpo .pp-kpi > span .cf-ic { width: 22px; height: 22px; margin: 0; }
#cf-pulpo .pp-ok > span .cf-ic { width: 20px; height: 20px; margin: 1px 0 0; }
#cf-pulpo .pp-subtabs > button .cf-ic { width: 1.1em; height: 1.1em; margin-right: .35em; vertical-align: -.18em; }
#cf-pulpo .pp-sug-i > b .cf-ic { width: 1.1em; height: 1.1em; }
#cf-pulpo .pp-subtabs button:hover { color: var(--t1); background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a) 8%, transparent), color-mix(in srgb, var(--pp-b) 10%, transparent)); }
#cf-pulpo .pp-subtabs button.on { color: var(--t1); background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a) 16%, transparent), color-mix(in srgb, var(--pp-b) 22%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pp-c) 38%, transparent); }
@media (max-width: 380px) { #cf-pulpo .pp-acc { width: 32px; } #cf-pulpo .pp-cab-b { width: 32px; height: 32px; } #cf-pulpo .pp-cab { gap: 5px; } }
/* ── 🐙 logo dibujado (toma el color de 🎨 Apariencia) ── */
.pp-logo-d { display: inline-grid; place-items: center; flex-shrink: 0; background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); border-radius: 28%; }
.pp-logo-d svg { width: 100%; height: 100%; display: block; }
.pp-logo-d .pp-logo-l { stroke: var(--pp-b); }
#cf-pulpo .pp-vacio-logo { width: 64px; height: 64px; border-radius: 18px; }
#cf-pulpo .pp-ae .cf-ic { width: 18px; height: 18px; margin: 0; }
/* 🎨 la hoja de Apariencia de Pulso, encima de Pulpo */
html.pp-abierto #ae-ov { z-index: 9400; } html.pp-abierto #ae-hoja { z-index: 9401; }
/* ── 🤖 interruptor del bot en el chat ── */
.pp-bot-sw { flex-shrink: 0; display: inline-flex; align-items: center; gap: 9px; padding: 4px 5px 4px 12px; border-radius: 99px; cursor: pointer; font: inherit; color: var(--t1);
  border: 1px solid color-mix(in srgb, var(--pp-b) 25%, var(--border)); background: var(--surface); transition: background .2s, border-color .2s, box-shadow .2s; }
.pp-bot-sw-t { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.pp-bot-sw-t b { font-size: 12.5px; } .pp-bot-sw-t small { font-size: 10.5px; font-weight: 700; color: var(--t2); }
.pp-bot-sw-k { position: relative; width: 42px; height: 24px; border-radius: 99px; background: color-mix(in srgb, var(--t2) 35%, transparent); transition: background .2s; flex-shrink: 0; }
.pp-bot-sw-k::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); transition: transform .2s cubic-bezier(.3, .7, .3, 1); }
.pp-bot-sw.on { border-color: color-mix(in srgb, var(--pp-c) 45%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a) 12%, var(--surface)), color-mix(in srgb, var(--pp-b) 16%, var(--surface)));
  box-shadow: 0 8px 22px -14px var(--pp-b); }
.pp-bot-sw.on .pp-bot-sw-k { background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); }
.pp-bot-sw.on .pp-bot-sw-k::after { transform: translateX(18px); }
.pp-bot-sw.on .pp-bot-sw-t small { color: color-mix(in srgb, var(--pp-d) 80%, var(--t1)); }
.pp-bot-sw:not(.on) .pp-bot-sw-t small { color: var(--amber); }
.pp-bot-sw:disabled { opacity: .6; cursor: wait; }
.pp-bot-sw:focus-visible { outline: 2px solid var(--pp-b); outline-offset: 2px; }
/* ── 🧬 huella al lado del nombre ── */
.pp-cab-n { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pp-cab-n > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pp-hu-b { flex-shrink: 0; border: 0; padding: 0; background: none; cursor: pointer; font: inherit; border-radius: 99px; line-height: 1; }
.pp-hu-b .cf-badge.cf-hu { font-size: 11.5px; padding: 3px 9px 3px 6px; }
.pp-hu-b:hover .cf-badge { filter: brightness(1.12); box-shadow: 0 6px 16px -10px var(--hu, var(--pp-b)); }
.pp-hu-mini { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-style: normal; font-size: 10.5px; font-weight: 900; color: var(--hu); vertical-align: 1px; font-variant-numeric: tabular-nums; }
.pp-hu-mini .cf-hu-ico { width: 11px; height: 11px; fill: none; stroke: var(--hu); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pp-hoja-hu .pp-hoja-in { width: min(640px, 100%); }
.pp-hoja-hu .cf-huc { margin: 2px 0 4px; }
/* ── 🔁 seguimientos del chat ── */
#cf-pulpo .pp-seg-on b { color: color-mix(in srgb, var(--pp-d) 80%, var(--t1)); }
#cf-pulpo .pp-seg-off { border-color: var(--amber-bd); background: var(--amber-bg); } #cf-pulpo .pp-seg-off b, #cf-pulpo .pp-seg-off small { color: var(--amber); }
#cf-pulpo .pp-chip-off { color: var(--amber); }
/* 📱 celular: interruptor compacto, la huella solo con su %, la voz con IA visible y el cuadro de escribir con espacio */
@media (max-width: 759px) {

  .pp-bot-sw { padding: 3px; gap: 0; } .pp-bot-sw-t { display: none; } .pp-bot-sw-k { width: 38px; height: 22px; } .pp-bot-sw-k::after { width: 16px; height: 16px; } .pp-bot-sw.on .pp-bot-sw-k::after { transform: translateX(16px); }
  .pp-bot-sw::before { content: 'IA'; font-size: 10px; font-weight: 900; margin: 0 5px 0 4px; color: var(--t2); } .pp-bot-sw.on::before { color: var(--pp-d); }
  .pp-hu-b .cf-badge.cf-hu > span { display: none; } .pp-hu-b .cf-badge.cf-hu { padding: 2px 7px 2px 5px; font-size: 11px; }
  #cf-pulpo .pp-pulso { padding: 7px 9px; }
}
@media (max-width: 420px) { #cf-pulpo .pp-acc[data-pp="emojis"] { display: none; } }   /* el teclado del celular ya trae emojis */
#cf-pulpo .pp-eb:not(:has(.pp-cel)) { grid-template-columns: minmax(0, 1fr); }   /* sin bloques todavía: sin vista previa */
#cf-pulpo .pp-eb .pp-cel { max-height: 420px; }
@media (max-width: 759px) { #cf-pulpo .pp-cab .pp-ventana { display: none; } }   /* en el celular: si la ventana se cierra, sale el aviso grande */
/* 🐙 recargar pulso.click/pulpo: la pantalla de Pulpo mientras carga, en vez del inicio de Pulso (si sale el inicio de sesión, se ve normal) */
html.pp-ruta:not(.pp-abierto) #cf-app { visibility: hidden; }
html.pp-ruta:not(.pp-abierto):not(:has(#cf-login:not([hidden]))) body::after { content: ''; position: fixed; inset: 0; z-index: 8990; pointer-events: none;
  background: url("pulpo-logo.svg") center 46% / 76px no-repeat, radial-gradient(600px 400px at 50% 46%, color-mix(in srgb, var(--pp-b) 14%, transparent), transparent 70%), var(--bg); }
#cf-pulpo .pp-ok-info { background: color-mix(in srgb, var(--pp-b) 10%, var(--surface)); border-color: color-mix(in srgb, var(--pp-b) 30%, var(--border)); margin-top: 8px; }
/* 🐙 Pulpo en Conexiones y en Negocios → funciones: su logo y sus colores (los de Pulso) */
.pp-ig-h-logo { width: 22px; height: 22px; border-radius: 7px; vertical-align: -5px; margin-right: 6px; }
.pp-ig { border-color: color-mix(in srgb, var(--pp-b) 35%, var(--border)) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a) 7%, var(--surface)), color-mix(in srgb, var(--pp-b) 9%, var(--surface))) !important; }
.pp-ig-logo { width: 52px; height: 52px; border-radius: 15px; flex-shrink: 0; box-shadow: 0 10px 24px -12px var(--pp-b); }
.pp-fun-logo { width: 18px; height: 18px; border-radius: 5px; vertical-align: -4px; }
.pp-ig-h { display: flex; align-items: center; gap: 4px; margin: 0 0 4px; font-size: 15px; } .pp-ig-h .pp-ig-h-logo { width: 20px; height: 20px; margin-right: 4px; vertical-align: 0; }
/* 💬 cabecera del chat: el nombre y la huella siempre se leen; las acciones van agrupadas a la derecha (y bajan de línea si no caben) */
#cf-pulpo .pp-cab { flex-wrap: wrap; row-gap: 8px; }
#cf-pulpo .pp-cab-t { flex: 1 1 230px; min-width: 200px; }
#cf-pulpo .pp-cab-n > b { flex-shrink: 1; min-width: 70px; }
#cf-pulpo .pp-cab-n > b { font-size: 15.5px; }
#cf-pulpo .pp-cab-acc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
#cf-pulpo .pp-cab-t .pp-cab-etq { flex-basis: auto; padding-left: 0; margin-top: 4px; }
@media (max-width: 759px) {
  #cf-pulpo .pp-cab-t { flex: 1 1 0; min-width: 60px; }
  #cf-pulpo .pp-cab-acc { flex-wrap: nowrap; gap: 6px; }
}
/* la fila de pedidos del cliente: sin barra de desplazamiento a la vista y con un borde que se desvanece */
#cf-pulpo .pp-peds { scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
#cf-pulpo .pp-peds::-webkit-scrollbar { display: none; }
/* 🎤 nota de voz como en WhatsApp */
.pp-nv { display: flex; align-items: center; gap: 10px; min-width: 230px; max-width: 320px; padding: 2px 0; }
.pp-nv-b { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); box-shadow: 0 6px 16px -8px var(--pp-b); position: relative; }
.pp-nv-b::before { content: ''; position: absolute; left: 14px; top: 11px; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.pp-nv.on .pp-nv-b::before { left: 13px; top: 12px; width: 4px; height: 14px; border: 0; background: #fff; box-shadow: 8px 0 0 #fff; }
.pp-nv-barra { flex: 1; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--t2) 25%, transparent); cursor: pointer; overflow: hidden; }
.pp-nv-barra i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--pp-a), var(--pp-b)); transition: width .15s linear; }
.pp-nv-t { flex-shrink: 0; font-size: 11.5px; color: var(--t2); font-variant-numeric: tabular-nums; min-width: 34px; }
.pp-nv-vel { flex-shrink: 0; border: 1px solid var(--border); background: var(--surface); color: var(--t1); border-radius: 99px; font: inherit; font-size: 11px; font-weight: 800; padding: 2px 7px; cursor: pointer; }
/* ▶️ audio que se escucha en la miniatura (estructura, cierres, seguimientos, biblioteca y "Así le llega") */
.pp-nv.pp-nv-mini { min-width: 0; max-width: none; width: 100%; height: 100%; flex-direction: column; justify-content: center; gap: 4px; padding: 0; background: color-mix(in srgb, var(--pp-b) 10%, var(--bg)); }
.pp-nv-mini .pp-nv-t { min-width: 0; font-size: 10.5px; text-align: center; }
.pp-pm .pp-nv-mini .pp-nv-b, .pp-nv-mini .pp-nv-b { position: relative; top: auto; right: auto; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); }
.pp-nv-mini .pp-nv-b::before { left: 12px; top: 9px; border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; }
.pp-nv-mini.on .pp-nv-b::before { left: 11px; top: 10px; width: 3px; height: 12px; box-shadow: 6px 0 0 #fff; }
.pp-cel-md .pp-nv-mini { width: 120px; height: 56px; border-radius: 10px; }
/* 🔄 cambiar el archivo sin borrarlo */
.pp-pm .pp-pm-cam { left: 2px; right: auto; font-size: 10px; background: color-mix(in srgb, var(--pp-b) 80%, #000); }
.pp-pm .pp-pm-cam:hover { background: var(--pp-b); }
.pp-reglas-tx { width: 100%; resize: vertical; font-size: 13px; line-height: 1.45; margin: 6px 0; }
.pp-nv-mini span.pp-nv-b { display: inline-block; cursor: pointer; }
/* 🗂️ secciones plegables (como en Pulso) */
#cf-pulpo .pp-plg-c { display: flex; flex-direction: column; gap: 10px; }
#cf-pulpo .pp-plg-c[hidden] { display: none; }
#cf-pulpo .pp-plg-cab { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; border-radius: 10px; margin: -4px -6px; padding: 4px 6px; transition: background .15s; }
#cf-pulpo h3.pp-plg-cab { justify-content: flex-start; }
#cf-pulpo .pp-plg-cab:hover { background: color-mix(in srgb, var(--pp-b) 7%, transparent); }
#cf-pulpo .pp-plg-cab:focus-visible { outline: 2px solid var(--pp-b); outline-offset: 2px; }
#cf-pulpo .pp-plg-chev { margin-left: auto; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--pp-b) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--pp-b) 25%, var(--border)); }
#cf-pulpo .pp-sec-h.pp-plg-cab .pp-plg-chev { margin-left: 4px; order: 99; }
#cf-pulpo .pp-plg-chev svg { width: 15px; height: 15px; fill: none; stroke: var(--pp-d); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; transform: rotate(180deg); }
#cf-pulpo .pp-plg-cerrada .pp-plg-chev svg { transform: rotate(0deg); }
#cf-pulpo .pp-plg-cerrada { padding-bottom: 12px; }
#cf-pulpo .pp-plg-cerrada > .pp-plg-cab { margin-bottom: -4px; }
#cf-pulpo .pp-plg-todo { display: flex; gap: 6px; justify-content: flex-end; margin: -4px 0 -6px; }
#cf-pulpo .pp-plg-res { display: none; flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: var(--t2); padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, var(--pp-b) 10%, var(--surface)); }
#cf-pulpo .pp-plg-cerrada > .pp-plg-cab .pp-plg-res { display: inline-block; margin-left: auto; }
#cf-pulpo .pp-plg-cerrada > .pp-plg-cab .pp-plg-res + .pp-plg-chev { margin-left: 6px; }
#cf-pulpo .pp-subtabs { scrollbar-width: none; } #cf-pulpo .pp-subtabs::-webkit-scrollbar { display: none; }
#cf-pulpo .pp-seg-hor { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--pp-b) 7%, var(--bg)); border: 1px solid color-mix(in srgb, var(--pp-b) 20%, var(--border)); }
#cf-pulpo .pp-seg-hor > span { font-weight: 800; font-size: 13px; } #cf-pulpo .pp-seg-hor label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--t2); }
#cf-pulpo .pp-seg-hor select { width: auto; padding: 6px 10px; }
/* 🗂️ chat: fila de pedidos/acciones y respuesta sugerida plegables */
#cf-pulpo .pp-peds-l { display: contents; }
#cf-pulpo .pp-peds-tg { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--t2); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; padding: 4px 2px; border-radius: 10px; }
#cf-pulpo .pp-peds-tg .pp-plg-chev { width: 22px; height: 22px; } #cf-pulpo .pp-peds-tg .pp-plg-chev svg { width: 13px; height: 13px; }
#cf-pulpo .pp-peds-tg-r { display: none; }
#cf-pulpo .pp-peds-cerrada { padding-top: 4px; padding-bottom: 4px; }
#cf-pulpo .pp-peds-cerrada .pp-peds-l { display: none; }
#cf-pulpo .pp-peds-cerrada .pp-peds-tg-r { display: inline; }
#cf-pulpo .pp-peds-cerrada .pp-plg-chev svg, #cf-pulpo .pp-sug-cerrada .pp-plg-chev svg { transform: rotate(0deg); }
#cf-pulpo .pp-sug-tg { cursor: pointer; user-select: none; }
#cf-pulpo .pp-sug-tg .pp-plg-chev { margin-left: auto; width: 24px; height: 24px; } #cf-pulpo .pp-sug-tg .pp-plg-chev svg { width: 13px; height: 13px; }
#cf-pulpo .pp-sug-adel { display: none; flex: 1; min-width: 0; font-size: 12.5px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cf-pulpo .pp-sug-cerrada > :not(.pp-sug-h) { display: none !important; }
#cf-pulpo .pp-sug-cerrada .pp-sug-adel { display: block; }
#cf-pulpo .pp-sug-cerrada { padding-top: 8px; padding-bottom: 8px; }
/* 🗄️ archivados / 🚫 bloqueados arriba de la lista · ⋯ opciones del chat */
#cf-pulpo .pp-lv { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--t1); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
#cf-pulpo .pp-lv:hover { background: var(--pp-bg, rgba(168, 85, 247, .08)); }
#cf-pulpo .pp-lv b { flex: 1; font-weight: 600; } #cf-pulpo .pp-lv em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--t2); }
#cf-pulpo .pp-lv-on { flex-wrap: wrap; row-gap: 0; } #cf-pulpo .pp-lv-on span { font-size: 16px; color: var(--pp-c); } #cf-pulpo .pp-lv-on small { flex-basis: 100%; padding-left: 26px; color: var(--t2); font-size: 11.5px; }
#cf-pulpo .pp-cab-mas { font-size: 18px; line-height: 1; font-weight: 700; letter-spacing: 1px; }
#cf-pulpo .pp-mas-i small { color: var(--t2); font-size: 11px; text-align: center; line-height: 1.3; }
#cf-pulpo .pp-mas-peligro { grid-column: 1 / -1; } #cf-pulpo .pp-mas-peligro b { color: var(--red, #dc2626); }
#cf-pulpo .pp-bloq { color: var(--red, #dc2626); background: var(--red-bg, rgba(220, 38, 38, .08)); border-top-color: var(--red-bd, rgba(220, 38, 38, .3)); }
#cf-pulpo .pp-bloq-t { color: var(--red, #dc2626); font-weight: 600; }
#cf-pulpo .pp-meta time { cursor: default; }

/* ── 🔑 varias cuentas de YCloud · 👥 qué ve cada persona · 🎯 CRM (2026-10-13) ── */
.pp-cu { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 70%, transparent); }
.pp-cu-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pp-saldo { margin-left: auto; flex-shrink: 0; border: 1px solid var(--border); background: transparent; color: var(--t1); border-radius: 99px; padding: 3px 10px; font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
span.pp-saldo { cursor: default; color: var(--t2); }
.pp-saldo-bajo { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
@media (max-width: 600px) { .pp-cu-h { flex-wrap: wrap; } .pp-cu-t { flex-basis: 100%; } .pp-saldo { margin-left: 0; } }
.pp-cu-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pp-cu-t small { color: var(--t2); font-size: 12px; }
.pp-cu-nueva { border-style: dashed; } .pp-cu-mas { align-self: flex-start; }
.pp-cu .pp-fila { flex-wrap: wrap; }
.pp-acc-p { display: flex; flex-direction: column; gap: 6px; border-radius: 12px; }
.pp-acc-p.on { padding-bottom: 8px; background: color-mix(in srgb, var(--bg) 55%, transparent); }
.pp-acc-f { display: flex; align-items: flex-start; gap: 8px; padding: 0 10px; }
.pp-acc-f > span { flex-shrink: 0; width: 104px; font-size: 12px; font-weight: 700; color: var(--t2); padding-top: 5px; }
.pp-acc-f .pp-chip:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 759px) { .pp-acc-f { flex-direction: column; gap: 4px; } .pp-acc-f > span { width: auto; padding-top: 0; } }
.pp-av-bots { flex-wrap: wrap; border-radius: 16px; }
/* etapa del CRM en la lista, en el chat y en la hoja para moverla */
.pp-etapa-conf { animation: pp-conf 2.4s ease-in-out infinite; }
@keyframes pp-conf { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, #f59e0b 30%, transparent); } }
@media (prefers-reduced-motion: reduce) { .pp-etapa-conf { animation: none; } }
.pp-chip-conf b { display: inline-block; min-width: 16px; margin-left: 2px; padding: 0 5px; border-radius: 99px; background: #f59e0b; color: #3b2300; font-size: 10.5px; }
.pp-chip-conf.pp-hay:not(.on) { border-color: color-mix(in srgb, #f59e0b 60%, transparent); color: var(--amber); }
#cf-pulpo .pp-nav-i em.pp-nav-conf { background: #f59e0b !important; color: #3b2300 !important; }
.pp-ped-etapa { --c: #3b82f6; border-style: solid; border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 10%, var(--bg)); }
.pp-ped-etapa b { display: flex; align-items: center; gap: 6px; } .pp-ped-etapa small { color: var(--t2) !important; font-weight: 600 !important; }
.pp-etapa-p { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.pp-etapas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pp-etapa-b { --c: #64748b; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 9%, var(--bg)); color: var(--t1); font: inherit; cursor: pointer; text-align: left; }
.pp-etapa-b i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex-shrink: 0; } .pp-etapa-b b { flex: 1; font-size: 13.5px; } .pp-etapa-b small { font-size: 11px; color: var(--t2); }
.pp-etapa-b.on { box-shadow: inset 0 0 0 2px var(--c); } .pp-etapa-b:hover { background: color-mix(in srgb, var(--c) 18%, var(--bg)); }
/* 🎯 tablero */
.pp-crm { display: flex; flex-direction: column; gap: 12px; padding: 16px 14px 24px; min-height: 100%; box-sizing: border-box; }
.pp-crm-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pp-crm-tit h3 { margin: 0; font-size: 17px; } .pp-crm-tit small { color: var(--t2); font-size: 12.5px; display: block; max-width: 620px; }
.pp-crm-fil { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pp-crm-fil .cf-input { width: auto; min-width: 200px; } .pp-crm-fil select.cf-input { min-width: 160px; }
.pp-crm-alerta { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--amber-bd); background: var(--amber-bg); color: var(--t1); font: inherit; cursor: pointer; }
.pp-crm-alerta > span { font-size: 22px; } .pp-crm-alerta div { display: flex; flex-direction: column; } .pp-crm-alerta b { color: var(--amber); } .pp-crm-alerta small { color: var(--t2); font-size: 12px; }
.pp-crm-tab { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; scroll-snap-type: x proximity; flex: 1; }
.pp-crm-col { --c: #64748b; flex: 1 0 236px; max-width: 360px; display: flex; flex-direction: column; max-height: calc(100vh - 210px); min-height: 160px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--c); scroll-snap-align: start; transition: box-shadow .15s, background .15s; }
.pp-crm-col header { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; }
.pp-crm-col header i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); } .pp-crm-col header b { flex: 1; font-size: 14px; }
.pp-crm-col header em { font-style: normal; font-size: 12px; font-weight: 800; padding: 1px 9px; border-radius: 99px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.pp-crm-col-conf { background: color-mix(in srgb, #f59e0b 6%, var(--surface)); }
.pp-crm-l { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; overflow-y: auto; min-height: 60px; }
.pp-crm-vacia { margin: 6px 0; color: var(--t2); font-size: 12.5px; text-align: center; padding: 14px 6px; border: 1px dashed var(--border); border-radius: 12px; }
.pp-crm-mas { color: var(--t2); font-size: 11.5px; text-align: center; }
.pp-crm-sobre { box-shadow: 0 0 0 2px var(--c), 0 8px 24px rgba(0, 0, 0, .18); background: color-mix(in srgb, var(--c) 8%, var(--surface)); }
.pp-crm-brillo { animation: pp-brillo 1.5s ease; } @keyframes pp-brillo { 30% { box-shadow: 0 0 0 4px #f59e0b; } }
.pp-crm-c { display: flex; flex-direction: column; gap: 5px; padding: 9px 10px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.pp-crm-c:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .12); transform: translateY(-1px); } .pp-crm-c.pp-crm-arr { opacity: .45; }
.pp-crm-c.pp-nuevo { border-color: color-mix(in srgb, var(--pp-b) 55%, transparent); }
.pp-crm-c-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pp-crm-c-h .pp-av { width: 28px; height: 28px; font-size: 11px; flex-shrink: 0; } .pp-crm-c-h b { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-crm-c-h time { font-size: 11px; color: var(--t2); }
.pp-crm-c-m { color: var(--t2); font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-crm-c-f { display: flex; flex-wrap: wrap; gap: 4px; } .pp-crm-espera { color: var(--amber) !important; border-color: var(--amber-bd) !important; background: var(--amber-bg) !important; max-width: 100% !important; } .pp-crm-sl { color: var(--pp-b) !important; }
.pp-crm-mv { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--t2); } .pp-crm-mv select { flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--t1); }
@media (hover: hover) and (pointer: fine) { .pp-crm-mv { display: none; } .pp-crm-c:hover .pp-crm-mv, .pp-crm-c:focus-within .pp-crm-mv { display: flex; } }
.pp-crm-cfg { max-width: 760px; }
.pp-crm-el { display: flex; flex-direction: column; gap: 6px; }
.pp-crm-e { display: grid; grid-template-columns: 38px minmax(120px, 200px) 1fr auto; gap: 8px; align-items: center; }
.pp-crm-e input[type="color"] { width: 36px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; }
.pp-crm-e small { color: var(--t2); font-size: 11.5px; } .pp-crm-e-b { display: flex; gap: 4px; }
@media (max-width: 759px) {
  .pp-crm { padding: 12px 10px 90px; } .pp-crm-fil { width: 100%; } .pp-crm-fil .cf-input { min-width: 0; flex: 1; } .pp-crm-fil #pp-crm-q { flex-basis: 100%; }
  .pp-crm-col { flex-basis: 84vw; max-height: none; } .pp-crm-l { max-height: 62vh; }
  .pp-crm-e { grid-template-columns: 38px 1fr auto; } .pp-crm-e small { grid-column: 1 / -1; }
}
/* ⠿ ordenar productos arrastrando · 📌 fijados arriba */
.pp-pi { position: relative; }
.pp-pi-arr { flex-shrink: 0; align-self: stretch; display: grid; place-items: center; width: 18px; margin: -8px -4px -8px -6px; color: var(--t2); font-size: 15px; cursor: grab; touch-action: none; user-select: none; border-radius: 10px 0 0 10px; }
.pp-pi-arr:hover { color: var(--t1); background: color-mix(in srgb, var(--pp-b) 12%, transparent); }
.pp-pi-fij { flex-shrink: 0; align-self: flex-start; border: 0; background: transparent; padding: 2px 4px; border-radius: 8px; font-size: 13px; line-height: 1; cursor: pointer; filter: grayscale(1); opacity: .35; transition: opacity .15s, filter .15s; }
.pp-pi:hover .pp-pi-fij, .pp-pi-fij:focus-visible { opacity: .75; } .pp-pi-fij.on { filter: none; opacity: 1; }
@media (hover: none) { .pp-pi-fij { opacity: .6; } }
.pp-pi-fijo { border-color: color-mix(in srgb, var(--pp-b) 45%, var(--border)); }
.pp-pi-mov { opacity: .85; box-shadow: 0 10px 28px rgba(0, 0, 0, .35) !important; transform: scale(1.02); z-index: 2; }
html.pp-arrastrando, html.pp-arrastrando * { cursor: grabbing !important; user-select: none !important; }
.pp-pi-ayuda { font-size: 11px; padding: 0 4px; }
@media (max-width: 900px) { .pp-pi-ayuda { display: none; } }   /* en el celular la lista va de lado: sin el texto de ayuda */
/* 🆔 clientes con nombre de usuario (sin número visible) */
.pp-chip-sinnum { color: var(--amber) !important; border-color: var(--amber-bd) !important; background: var(--amber-bg) !important; }
.pp-sinnum-t { color: var(--amber); font-weight: 700; }
.pp-ped-num { border-style: solid; border-color: var(--amber-bd); background: var(--amber-bg); } .pp-ped-num small { color: var(--amber) !important; }
/* 🔒 otra persona guardó el bot mientras lo tenías abierto */
.pp-conflicto { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; border: 1px solid var(--amber-bd); background: var(--amber-bg); }
.pp-conflicto > span { font-size: 22px; } .pp-conflicto div { flex: 1; display: flex; flex-direction: column; gap: 2px; } .pp-conflicto b { color: var(--amber); font-size: 13.5px; } .pp-conflicto small { color: var(--t2); font-size: 12px; }
@media (max-width: 759px) { .pp-conflicto { flex-wrap: wrap; } .pp-conflicto .cf-btn { width: 100%; } }
/* 📊 anuncio que está en otro producto: al marcarlo pasa a este */
.pp-adi-otro { border-style: dashed; } .pp-adi-ya { display: block; color: var(--amber) !important; font-weight: 700; margin-top: 2px; }
.pp-hoja-ads .cf-btn-ghost { margin: 8px 0; width: 100%; }

/* ══════════ 📊 Tablero (gráficas: barras finas, un color por gráfica, colores validados para daltonismo en claro y oscuro) ══════════ */
.pp-tb { --tb-1: #6250d6; --tb-2: #1baf7a; --tb-pista: color-mix(in srgb, var(--tb-1) 12%, transparent); --tb-rejilla: var(--border); }
[data-theme="dark"] .pp-tb { --tb-1: #9085e9; --tb-2: #199e70; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .pp-tb { --tb-1: #9085e9; --tb-2: #199e70; } }
.pp-tb-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pp-tb-bot { width: auto; min-width: 170px; }
.pp-tb-sec { gap: 12px; }
.pp-tb-nota { margin: 0; font-size: 12px; }
.pp-tb-x { color: var(--t2); font-size: 12.5px; margin: 0; }
.pp-tb-hero { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.pp-tb-hero > div { display: flex; flex-direction: column; gap: 2px; }
.pp-tb-hero small { color: var(--t2); font-size: 13px; }
.pp-tb-hero b { font-size: 52px; line-height: 1.05; font-weight: 700; letter-spacing: -.02em; color: var(--t1); }
.pp-tb-d { font-size: 12px; font-weight: 700; color: var(--t2); }
.pp-tb-bien { color: #15803d; } .pp-tb-mal { color: #b91c1c; }
[data-theme="dark"] .pp-tb-bien { color: #4ade80; } [data-theme="dark"] .pp-tb-mal { color: #f87171; }
.pp-tb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pp-tb-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); min-width: 0; }
.pp-tb-tile small { color: var(--t2); font-size: 12px; }
.pp-tb-tile b { font-size: 22px; font-weight: 700; color: var(--t1); }
.pp-tb-tile .pp-tb-x { font-size: 12px; }
/* barras horizontales: etiqueta · barra (≤ 22 px, punta redondeada, base recta) · valor */
.pp-tb-hb { display: flex; flex-direction: column; gap: 4px; }
.pp-tb-hf { display: grid; grid-template-columns: minmax(110px, 30%) 1fr auto; align-items: center; gap: 10px; padding: 3px 0; border-radius: 6px; outline: none; }
.pp-tb-hf:hover, .pp-tb-hf:focus-visible { background: var(--tb-pista); }
.pp-tb-hl { font-size: 13px; color: var(--t1); }
.pp-tb-ht { height: 18px; display: block; }
.pp-tb-ht i { display: block; height: 100%; background: var(--tb-1); border-radius: 0 4px 4px 0; min-width: 0; }
.pp-tb-hv { font-size: 13px; color: var(--t1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-tb-hv small, .pp-tb-hl small { color: var(--t2); }
/* columnas: valor arriba, nombre abajo, rejilla de base fina */
.pp-tb-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; align-items: end; height: 170px; border-bottom: 1px solid var(--tb-rejilla); padding-top: 4px; }
.pp-tb-col { display: grid; grid-template-rows: 18px 1fr; height: 100%; align-items: end; justify-items: center; position: relative; outline: none; border-radius: 4px; }
.pp-tb-col:hover, .pp-tb-col:focus-visible { background: var(--tb-pista); }
.pp-tb-cv { font-size: 11.5px; color: var(--t1); font-weight: 700; white-space: nowrap; align-self: end; }
.pp-tb-cb { width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.pp-tb-cb i { display: block; width: 100%; max-width: 22px; background: var(--tb-1); border-radius: 4px 4px 0 0; }
.pp-tb-ventas .pp-tb-cb i { background: var(--tb-2); }
.pp-tb-cl { position: absolute; bottom: -18px; font-size: 10.5px; color: var(--t2); white-space: nowrap; }
.pp-tb-cols { margin-bottom: 22px; }
.pp-tb-horas, .pp-tb-dias { height: 130px; }
.pp-tb-lect .pp-tb-cl { font-size: 10px; }
.pp-tb-quedaron { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; text-align: center; font-size: 12px; color: var(--t2); margin-top: -8px; }
.pp-tb-quedaron .pp-tb-max { color: var(--t1); font-weight: 800; }
/* tablas con barra en la celda de clientes */
.pp-tb-tabla { overflow-x: auto; }
.pp-tb-tabla table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; }
.pp-tb-tabla td:first-child { min-width: 170px; }
.pp-tb-id { color: var(--t2); font-size: 11px; white-space: nowrap; }
.pp-tb-cl em { font-style: normal; }
.pp-tb-tabla th { text-align: left; font-size: 11.5px; color: var(--t2); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.pp-tb-tabla td { padding: 7px 8px; border-bottom: 1px solid var(--border); color: var(--t1); vertical-align: middle; }
.pp-tb-tabla .pp-tb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-tb-nom { display: inline-block; max-width: 340px; overflow-wrap: anywhere; }
.pp-tb-cel { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; min-width: 90px; }
.pp-tb-cel i { display: inline-block; height: 10px; width: 0; max-width: 60px; background: var(--tb-1); border-radius: 0 3px 3px 0; flex: 0 0 auto; }
.pp-tb-vt summary { font-size: 12.5px; }
.pp-tb-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.pp-tb-prods { flex-wrap: wrap; }
.pp-tb-tt { position: fixed; z-index: 9500; pointer-events: none; background: var(--surface); color: var(--t1); border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; font-size: 12.5px; max-width: 300px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
@media (max-width: 600px) { .pp-tb-cl em { display: none; } .pp-tb-hero b { font-size: 44px; } .pp-tb-hf { grid-template-columns: minmax(90px, 36%) 1fr auto; gap: 6px; } .pp-tb-hl, .pp-tb-hv { font-size: 12px; } .pp-tb-nom { max-width: 160px; } }
/* 💚 Tablero: las tarjetas del inicio de Pulso dentro de Pulpo (mismo aspecto que #cf-envivo .cf-hero, con clases propias para no cruzarse) */
.pp-hero-caja { display: flex; flex-direction: column; gap: 8px; }
.pp-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pp-hero { position: relative; border-radius: 18px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .95fr) minmax(0, 1.25fr); gap: 12px; padding: 12px; isolation: isolate;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--green) 20%, transparent), transparent 55%),
              radial-gradient(120% 140% at 100% 100%, color-mix(in srgb, #8b5cf6 22%, transparent), transparent 55%),
              color-mix(in srgb, var(--surface) 92%, #000);
  box-shadow: 0 18px 40px -18px color-mix(in srgb, #8b5cf6 45%, transparent), 0 0 0 1px color-mix(in srgb, #fff 5%, transparent) inset; }
.pp-hero::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--hg-ang, 0deg), var(--green), #14b8a6, #f5b50a, #a855f7, #22d3ee, var(--green));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: cfHgGiro 9s linear infinite; opacity: .85; }
.pp-hero-l, .pp-hero-r, .pp-hero-g { position: relative; min-width: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, #fff 7%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pp-hero-l { background: linear-gradient(160deg, color-mix(in srgb, var(--green) 16%, transparent), color-mix(in srgb, var(--surface) 40%, transparent)); }
.pp-hero-r { background: linear-gradient(160deg, color-mix(in srgb, #f5b50a 14%, transparent), color-mix(in srgb, var(--surface) 40%, transparent)); display: flex; flex-direction: column; gap: 4px; }
.pp-hero-g { background: linear-gradient(160deg, color-mix(in srgb, #8b5cf6 20%, transparent), color-mix(in srgb, #22d3ee 8%, transparent) 70%, color-mix(in srgb, var(--surface) 40%, transparent)); box-shadow: 0 0 30px -10px color-mix(in srgb, #a855f7 55%, transparent) inset; }
.pp-hero .cf-hero-money { font-size: 38px; }
.pp-hero-cpa { margin-top: 10px; }
.pp-hero > .pp-tb-nota, .pp-hero > .cf-hstrip { grid-column: 1 / -1; }
.pp-hero-solo { grid-template-columns: minmax(0, 1fr); }
.pp-tb-ojo[aria-pressed="true"] { background: color-mix(in srgb, #a855f7 22%, var(--surface)); }
@media (max-width: 900px) { .pp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pp-hero-g { grid-column: 1 / -1; } }
@media (max-width: 560px) { .pp-hero { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px; } .pp-hero .cf-hero-money { font-size: 34px; } }
@media (prefers-reduced-motion: reduce) { .pp-hero::after { animation: none; } }

/* ⧉ copiar un producto a otros bots */
.pp-cp-bots { display: grid; gap: 6px; margin: 4px 0 8px; }
.pp-cp-bot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; }
.pp-cp-bot small { margin-left: auto; color: var(--t2); font-size: 12px; }
.pp-cp-plan { display: grid; gap: 6px; margin: 10px 0; }
.pp-cp-p { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--green) 10%, var(--bg)); border: 1px solid color-mix(in srgb, var(--green) 35%, var(--border)); font-size: 13px; }
.pp-cp-mal { background: var(--red-bg); border-color: var(--red-bd); }

/* ✅ ¿qué le falta a este bot? */
.pp-listo { padding: 0; overflow: hidden; }
.pp-listo > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.pp-listo > summary::-webkit-details-marker { display: none; }
.pp-listo-t { font-size: 14px; } .pp-listo-bar { flex: 1 1 140px; max-width: 260px; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--t2) 18%, transparent); overflow: hidden; margin-left: auto; }
.pp-listo-bar i { display: block; height: 100%; border-radius: 99px; background: var(--green); }
.pp-listo-ojo .pp-listo-bar i { background: var(--amber); } .pp-listo-mal .pp-listo-bar i { background: var(--red); }
.pp-listo-mal { border-color: var(--red-bd); } .pp-listo-ojo { border-color: color-mix(in srgb, var(--amber) 45%, var(--border)); }
.pp-listo-l { display: grid; gap: 6px; padding: 0 16px 14px; }
.pp-listo-i { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
.pp-listo-i.ok { opacity: .7; } .pp-listo-i.grave { border-color: var(--red-bd); background: var(--red-bg); }
.pp-listo-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .pp-listo-tx small { color: var(--t2); font-size: 12px; }
.pp-cp-h { margin: 10px 0 4px; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.pp-cp-prods { max-height: 260px; overflow-y: auto; flex-shrink: 0; }
.pp-cp-bots { flex-shrink: 0; }
.pp-cp-p small { flex-basis: 100%; color: var(--t2); font-size: 12px; }

/* ══════════ 📋 Lista de chats compacta: una sola línea de etiquetas (las 3 más importantes + «+N»); ☰ Lista detallada = todas ══════════ */
.pp-it { padding: 9px 12px; }
.pp-it-chips { flex-wrap: nowrap; overflow: hidden; margin-top: 3px; min-width: 0; }
.pp-it-chips > * { flex: 0 1 auto; min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-it-chips > :first-child { flex-shrink: 0; max-width: 62%; }
.pp-it-chips .pp-etq { margin: 0; font-size: 10.5px; padding: 1px 7px; }
.pp-it-chips .pp-chip-mas { flex-shrink: 0; min-width: auto; overflow: visible; color: var(--t1); }
.pp-it-det .pp-it-chips { flex-wrap: wrap; } .pp-it-det .pp-it-chips > * { flex-shrink: 0; }
.pp-av-off { position: absolute; left: -3px; top: -3px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 9px; line-height: 1; background: var(--surface); box-shadow: 0 0 0 1.5px var(--border-2); }
.pp-chip-det { grid-column: 1 / -1; justify-self: start; }

/* ══════════ 📎 Pegar (Ctrl+V) o arrastrar archivos al chat ══════════ */
.pp-chat { position: relative; }
.pp-chat.pp-soltar::after { content: '📎 Suelta para enviar al chat'; position: absolute; inset: 8px; z-index: 4; display: grid; place-items: center; border: 2px dashed var(--pp-b); border-radius: 16px; background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--t1); font-weight: 800; font-size: 16px; pointer-events: none; }
.pp-peg { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; max-height: 46vh; overflow-y: auto; }
.pp-peg-i { position: relative; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pp-peg-i img, .pp-peg-i video, .pp-peg-i .pp-bib-ico { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
.pp-peg-1 { grid-template-columns: 1fr; } .pp-peg-1 .pp-peg-i img, .pp-peg-1 .pp-peg-i video { aspect-ratio: auto; max-height: 40vh; object-fit: contain; }
.pp-peg-i figcaption { font-size: 11.5px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-peg-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; font-size: 12px; background: var(--surface); }
#pp-peg-txt { resize: vertical; min-height: 48px; font-family: inherit; }
.pp-peg-g { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--t2); }
.pp-peg-acc { justify-content: flex-end; } .pp-peg-acc > span { flex: 1; }

/* ══════════ 🖼️ Biblioteca con carpetas (public/pulpo-bib.js) ══════════ */
.pp-hoja-bib .pp-hoja-in { width: min(900px, 100%); max-height: 90vh; }
.pp-bx { display: flex; flex-direction: column; gap: 10px; min-height: 0; border-radius: 14px; }
.pp-bx.pp-bx-arr { outline: 2px dashed var(--pp-b); outline-offset: 4px; background: color-mix(in srgb, var(--pp-b) 6%, transparent); }
.pp-bx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pp-bx-migas { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 6px; font-size: 15px; }
.pp-bx-mig { border: 0; background: transparent; color: var(--t2); font: inherit; font-weight: 700; padding: 4px 8px; border-radius: 8px; cursor: pointer; }
.pp-bx-mig:hover { background: var(--bg); color: var(--t1); }
.pp-bx-sep { color: var(--t2); } .pp-bx-aqui { font-weight: 800; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-bx-acc { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-bx-acc .cf-btn { padding: 7px 12px; font-size: 13px; }
.pp-bx-peligro { color: var(--red) !important; }
.pp-bx-fil { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pp-bx-q { flex: 1 1 220px; min-width: 0; }
.pp-bx-tipos { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-bx-tipos .pp-chip { padding: 5px 11px; font-size: 12px; }
.pp-bx-res { display: flex; flex-direction: column; gap: 8px; }
.pp-bx-h { margin: 6px 0 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--t2); }
.pp-bx-h small { font-weight: 700; margin-left: 4px; padding: 0 7px; border-radius: 99px; background: var(--bg); }
.pp-bx-cps { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pp-bx-car { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg); color: var(--t1); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.pp-bx-car:hover { border-color: var(--pp-d); transform: translateY(-1px); box-shadow: var(--shadow); }
.pp-bx-car.pp-bx-sobre, .pp-bx-mig.pp-bx-sobre { border-color: var(--pp-b); outline: 2px solid var(--pp-b); background: color-mix(in srgb, var(--pp-b) 12%, var(--bg)); }
.pp-bx-mos { display: grid; gap: 2px; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--surface); }
.pp-bx-m2, .pp-bx-m4 { grid-template-columns: 1fr 1fr; } .pp-bx-m3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; } .pp-bx-m3 img:first-child { grid-row: span 2; }
.pp-bx-m4 { grid-template-rows: 1fr 1fr; }
.pp-bx-mos img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }
.pp-bx-ico { display: grid; place-items: center; width: 100%; height: 100%; font-size: 40px; background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a) 14%, transparent), color-mix(in srgb, var(--pp-b) 14%, transparent)); }
.pp-bx-car-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-bx-car-t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-bx-car-t small { font-size: 11.5px; color: var(--t2); }
.pp-bx-nueva { cursor: default; border-style: dashed; border-color: var(--pp-b); } .pp-bx-nueva:hover { transform: none; box-shadow: none; }
.pp-bx-nueva .pp-fila { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.pp-bx-ok { background: linear-gradient(135deg, var(--pp-a), var(--pp-b)) !important; color: #fff !important; border-color: transparent !important; }
.pp-bx-tip { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--border-2); background: transparent; color: var(--t1); text-align: left; font: inherit; cursor: pointer; }
.pp-bx-tip:hover { border-color: var(--pp-b); } .pp-bx-tip small { color: var(--t2); font-size: 12px; }
.pp-bx-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.pp-bx-f { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--t1); cursor: pointer; min-width: 0; outline: none; transition: border-color .15s, box-shadow .15s; }
.pp-bx-f:hover, .pp-bx-f:focus-visible { border-color: var(--pp-d); }
.pp-bx-f.on { border-color: var(--pp-b); box-shadow: 0 0 0 2px var(--pp-b); background: color-mix(in srgb, var(--pp-b) 8%, var(--bg)); }
.pp-bx-f.pp-bx-arrastrando { opacity: .45; }
.pp-bx-th { position: relative; display: block; border-radius: 8px; overflow: hidden; }
.pp-bx-th img, .pp-bx-th video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface); }
.pp-bx-th > i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 22px; text-shadow: 0 1px 6px #000; pointer-events: none; }
.pp-bx-th .pp-bib-ico { aspect-ratio: 1; }
.pp-bx-th .pp-nv-mini { display: grid; place-items: center; width: 100%; aspect-ratio: 1; background: var(--surface); }
.pp-bx-chk { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: transparent; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .25); opacity: 0; transition: opacity .15s; }
.pp-bx-f:hover .pp-bx-chk, .pp-bx-eligiendo .pp-bx-chk, .pp-bx-f.on .pp-bx-chk { opacity: 1; }
.pp-bx-f.on .pp-bx-chk { color: #fff; background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); box-shadow: none; }
.pp-bx-ver { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; color: #fff; background: rgba(0, 0, 0, .55); text-decoration: none; opacity: 0; transition: opacity .15s; }
.pp-bx-f:hover .pp-bx-ver, .pp-bx-ver:focus-visible { opacity: 1; }
.pp-bx-f > b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-bx-f > small { font-size: 11px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-bx-fa { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.pp-bx-fa { flex-wrap: nowrap; }
.pp-bx-fa .pp-mini { padding: 3px 8px; font-size: 11px; line-height: 1; }
.pp-bx-ren { display: flex; gap: 6px; align-items: center; flex: 1; min-width: 0; }
.pp-bx-ren .cf-input { flex: 1; min-width: 0; padding: 6px 10px; }
.pp-bx-ren-f .cf-input { font-size: 12px; padding: 4px 8px; }
.pp-bx-vacio { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 12px; border: 1px dashed var(--border-2); border-radius: 14px; color: var(--t2); text-align: center; }
.pp-bx-vacio > span { font-size: 34px; } .pp-bx-vacio b { color: var(--t1); } .pp-bx-vacio small { font-size: 12.5px; }
.pp-bx-vacio-s { padding: 16px 12px; }
.pp-bx-subiendo { padding: 8px 12px; border-radius: 10px; background: var(--accent-bg); color: var(--accent); font-size: 13px; font-weight: 700; }
.pp-bx-pie { position: sticky; bottom: -18px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px -18px -18px; padding: 10px 18px; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 16px rgba(0, 0, 0, .08); }
.pp-bx-pie > span { flex: 1; font-weight: 700; font-size: 13px; }
.pp-sec-bib .pp-bx-pie { bottom: 0; margin: 4px 0 0; border-radius: 12px; border: 1px solid var(--border); }
.pp-bx-dest { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; max-height: 50vh; overflow-y: auto; }
.pp-bx-d { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--t1); font: inherit; font-weight: 700; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-bx-d:hover { border-color: var(--pp-b); }
@media (max-width: 759px) {
  .pp-sec-bib > .cf-sub { display: none; }
  .pp-bx-tipos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 0 2px; } .pp-bx-tipos .pp-chip { flex-shrink: 0; }
  .pp-bx-cps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pp-bx-g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pp-bx-f > small { display: none; } .pp-bx-ver { opacity: 1; }
  .pp-bx-chk { opacity: 1; }
  .pp-bx-acc { width: 100%; } .pp-bx-acc .cf-btn { flex: 1; }
  .pp-peg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ⚡ peso de la biblioteca */
.pp-bx-peso { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); font-size: 13px; color: var(--t2); }
.pp-bx-peso > span { flex: 1; min-width: 200px; } .pp-bx-peso b { color: var(--t1); }
.pp-bx-peso .cf-btn { padding: 6px 12px; font-size: 12.5px; }
.pp-bx-th > img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface); }

/* 🤖 bot del chat en la lista: pequeño, abajo a la derecha (debajo de la hora y los no leídos) */
.pp-it-d { align-self: stretch; justify-content: flex-start; max-width: 80px; min-width: 0; }
.pp-it-d > .pp-it-bot { margin-top: auto; max-width: 80px; font-size: 10px; font-weight: 600; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }

/* 👁️ lo que se leyó en la foto del cliente */
.pp-foto-l { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; max-width: 360px; }
.pp-foto-l > span { display: inline-flex; gap: 4px; } .pp-foto-l > span small { color: var(--t2); font-weight: 700; }
.pp-foto-l > em { flex-basis: 100%; font-style: normal; color: var(--amber); font-size: 11.5px; }
.pp-foto-l .pp-etq-x { margin-left: auto; }

/* ══════════ 💬 Burbujas agrupadas como en WhatsApp: pegadas dentro del grupo, más aire entre grupos ══════════ */
#cf-pulpo .pp-msgs { gap: 2px; }
#cf-pulpo .pp-msgs > * { margin-top: 8px; }
#cf-pulpo .pp-msgs > .pp-m.pp-g2 { margin-top: 0; }
#cf-pulpo .pp-msgs > .pp-dia { margin-top: 12px; }
#cf-pulpo .pp-in.pp-gf { border-bottom-left-radius: 6px; } #cf-pulpo .pp-out.pp-gf { border-bottom-right-radius: 6px; }
#cf-pulpo .pp-in.pp-g2 { border-top-left-radius: 6px; } #cf-pulpo .pp-out.pp-g2 { border-top-right-radius: 6px; }
#cf-pulpo .pp-in.pp-g2:not(.pp-gf) { border-bottom-left-radius: 14px; } #cf-pulpo .pp-out.pp-g2:not(.pp-gf) { border-bottom-right-radius: 14px; }

/* ══════════ 📱 Chat abierto en el celular: todo el espacio para los mensajes ══════════ */
@media (max-width: 759px) {
  #cf-pulpo.pp-en-chat .pp-top { display: none; }   /* dentro del chat manda su cabecera (← vuelve a la lista, donde está la barra de Pulpo) */
  #cf-pulpo .pp-cab-t .pp-cab-etq { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 3px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  #cf-pulpo .pp-cab-t .pp-cab-etq::-webkit-scrollbar { display: none; }
  #cf-pulpo .pp-cab-t .pp-cab-etq > * { flex-shrink: 0; }
  #cf-pulpo .pp-peds { padding: 5px 10px; gap: 6px; }
  #cf-pulpo .pp-peds .pp-ped-acc small { display: none; }   /* una sola línea: el título dice qué es; el detalle va en el título largo */
  #cf-pulpo .pp-peds .pp-ped { padding: 5px 10px; }
  #cf-pulpo .pp-msgs { padding: 10px 3% 14px; }
}

/* 📱 filtros de la lista de chats en el celular: una sola fila que se desliza (con «Más filtros» abiertos sí bajan) */
@media (max-width: 759px) {
  #cf-pulpo .pp-filtros:not(:has(.pp-mas-f)) { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); padding-right: 24px; }
  #cf-pulpo .pp-filtros:not(:has(.pp-mas-f))::-webkit-scrollbar { display: none; }
  #cf-pulpo .pp-filtros > * { flex-shrink: 0; }
  #cf-pulpo .pp-filtros > select.pp-f-bot { width: auto; max-width: 170px; }
}

/* ══════════ 🎯 CRM: tarjetas compactas, «⇄ Mover» pequeño, barra con el color del tema y, en el celular, etapas como pestañas ══════════ */
#cf-pulpo .pp-crm-c-f { flex-wrap: nowrap; overflow: hidden; min-width: 0; }
#cf-pulpo .pp-crm-c-f > * { flex: 0 1 auto; min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cf-pulpo .pp-crm-c-f > :first-child { flex-shrink: 0; max-width: 64%; }
#cf-pulpo .pp-crm-c-f > .pp-chip-mas { flex-shrink: 0; overflow: visible; color: var(--t1); }
#cf-pulpo .pp-crm-c-p { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 22px; }
#cf-pulpo .pp-crm-bot { font-size: 10.5px; font-weight: 600; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#cf-pulpo .pp-crm-mv { flex-shrink: 0; }
#cf-pulpo .pp-crm-mv select { flex: none; width: auto; max-width: 130px; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 99px; cursor: pointer; color: var(--t2); background: var(--bg); }
#cf-pulpo .pp-crm-tab { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--pp-b) 55%, transparent) transparent; }
#cf-pulpo .pp-crm-tab::-webkit-scrollbar { height: 8px; } #cf-pulpo .pp-crm-tab::-webkit-scrollbar-track { background: transparent; }
#cf-pulpo .pp-crm-tab::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--pp-b) 55%, transparent); border-radius: 99px; }
#cf-pulpo .pp-crm-pest { display: none; }
@media (max-width: 759px) {
  #cf-pulpo .pp-crm-tit small { display: none; }
  #cf-pulpo .pp-crm-pest { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 2px 0 8px; padding-bottom: 2px; }
  #cf-pulpo .pp-crm-pest::-webkit-scrollbar { display: none; }
  #cf-pulpo .pp-crm-pe { --c: #64748b; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--t1); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
  #cf-pulpo .pp-crm-pe i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
  #cf-pulpo .pp-crm-pe em { font-style: normal; font-size: 11px; padding: 0 7px; border-radius: 99px; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--t1); }
  #cf-pulpo .pp-crm-pe.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, var(--surface)); }
  /* una etapa a la vez SOLO si la pantalla marcó cuál (si el celular guardó una versión vieja del código, se ven todas como antes) */
  #cf-pulpo .pp-crm-tab:has(> .pp-crm-on) { display: block; overflow: visible; padding-bottom: 0; }
  #cf-pulpo .pp-crm-tab:has(> .pp-crm-on) > .pp-crm-col { max-width: none; width: 100%; }
  #cf-pulpo .pp-crm-tab:has(> .pp-crm-on) > .pp-crm-col:not(.pp-crm-on) { display: none; }
  #cf-pulpo .pp-crm-tab:has(> .pp-crm-on) > .pp-crm-col > header { display: none; }   /* la pestaña ya dice la etapa */
  #cf-pulpo .pp-crm-tab:has(> .pp-crm-on) .pp-crm-l { max-height: none; }
}

/* 📱 textos de ayuda en el celular: 2 líneas; tocarlos los abre completos */
@media (max-width: 759px) {
  #cf-pulpo .pp-aj p.cf-sub:not(.pp-sub-ab) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; position: relative; }
  /* 🤖 vendedor: el selector del bot ocupa la fila y sus botones van juntos en una línea debajo */
  #cf-pulpo .pp-bots { display: flex; flex-wrap: wrap; gap: 6px; }
  #cf-pulpo .pp-bots > .pp-bots-sel { flex: 1 1 100%; }
  #cf-pulpo .pp-bots > .pp-mini { flex: 1 1 0; justify-content: center; text-align: center; white-space: nowrap; padding: 5px 6px; }
}

/* ══════════ 🤖 Vendedor más limpio: cabecera en una fila, ⋯ menús, índice del producto, ● sin guardar, 🧪 Probar al lado ══════════ */
/* cabeceras de sección: el título a la izquierda y sus botones a la derecha (en todo Pulpo) */
#cf-pulpo .pp-sec-h { justify-content: flex-start; }
#cf-pulpo .pp-sec-h > h3 { margin-right: auto; }
/* cabecera del bot */
#cf-pulpo .pp-bt-top { gap: 10px; }
#cf-pulpo .pp-bt-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#cf-pulpo .pp-bt-fila > .pp-bots-sel { flex: 1 1 260px; min-width: 0; }
#cf-pulpo .pp-bots-ico { font-size: 18px; }
#cf-pulpo .pp-bt-fila .pp-bots-sel select { font-weight: 800; }
#cf-pulpo .pp-bt-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
#cf-pulpo .pp-bt-info > small { flex: 1 1 260px; }
#cf-pulpo .pp-bt-top .pp-listo { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; flex: 0 1 380px; }
#cf-pulpo .pp-bt-top .pp-listo > summary { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--bg); font-size: 12.5px; }
#cf-pulpo .pp-bt-top .pp-listo[open] { flex-basis: 100%; }
#cf-pulpo .pp-bt-top .pp-listo[open] > .pp-listo-l { margin-top: 8px; }
#cf-pulpo .pp-subtabs { display: flex; align-items: center; }
#cf-pulpo .pp-subtab-probar { margin-left: auto; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--pp-b) 45%, var(--border)) !important; border-radius: 99px; }
#cf-pulpo .pp-subtab-probar.on { background: linear-gradient(135deg, var(--pp-a), var(--pp-b)) !important; color: #fff !important; }
/* ⋯ menús */
#cf-pulpo .pp-menu-w { position: relative; flex-shrink: 0; }
#cf-pulpo .pp-menu-b { min-width: 40px; padding: 7px 12px; font-weight: 900; letter-spacing: 1px; }
#cf-pulpo .pp-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; display: flex; flex-direction: column; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55); }
#cf-pulpo .pp-menu[hidden] { display: none; }
#cf-pulpo .pp-menu-arriba .pp-menu { top: auto; bottom: calc(100% + 6px); }
#cf-pulpo .pp-menu > button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--t1); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
#cf-pulpo .pp-menu > button:hover, #cf-pulpo .pp-menu > button:focus-visible { background: color-mix(in srgb, var(--pp-b) 12%, transparent); outline: none; }
/* 🧭 índice del producto (queda fijo arriba mientras bajas) */
#cf-pulpo .pp-ps-ind { position: sticky; top: 0; z-index: 4; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px; margin-bottom: 12px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--border); box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .6); }
#cf-pulpo .pp-ps-ind::-webkit-scrollbar { display: none; }
#cf-pulpo .pp-ps-ind > button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 99px; border: 1px solid transparent; background: transparent; color: var(--t2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
#cf-pulpo .pp-ps-ind > button:hover { color: var(--t1); background: var(--bg); }
#cf-pulpo .pp-ps-ind > button.on { color: var(--t1); background: color-mix(in srgb, var(--pp-b) 16%, var(--bg)); border-color: color-mix(in srgb, var(--pp-b) 45%, transparent); }
#cf-pulpo .pp-ps-ind i { font-style: normal; font-size: 11px; font-weight: 900; color: var(--green); }
#cf-pulpo .pp-ps-ind .pp-ps-falta i { color: var(--amber); font-size: 16px; line-height: 0; }
#cf-pulpo .pp-ps-ind em { font-style: normal; font-size: 10.5px; padding: 0 6px; border-radius: 99px; background: var(--bg); }
#cf-pulpo .pp-ps-anc { height: 0; }
/* ● cambios sin guardar */
#cf-pulpo .pp-sin-g { order: 9; margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--amber); white-space: nowrap; }
#cf-pulpo .pp-sin-g[hidden] { display: none; }
#cf-pulpo .pp-guardar.pp-hay-cambios { border-top-color: color-mix(in srgb, var(--amber) 55%, var(--border)); }
#cf-pulpo .pp-guardar .pp-menu-w { order: 8; }
/* 📖 textos de ayuda del vendedor: una línea; tocarlos los abre completos */
#cf-pulpo .pp-vend section.pp-sec p.cf-sub:not(.pp-sub-ab) { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
#cf-pulpo .pp-vend section.pp-sec p.cf-sub:not(.pp-sub-ab)::before, #cf-pulpo .pp-vend section.pp-sec p.cf-sub.pp-sub-ab::before { content: 'ℹ️ '; }
#cf-pulpo .pp-vend section.pp-sec p.cf-sub { transition: color .15s; } #cf-pulpo .pp-vend section.pp-sec p.cf-sub:not(.pp-sub-ab):hover { color: var(--t1); }
#cf-pulpo .pp-vend .pp-empieza p.cf-sub { display: block !important; -webkit-line-clamp: unset !important; cursor: default; } #cf-pulpo .pp-vend .pp-empieza p.cf-sub::before { content: none !important; }
/* 🧪 Probar: panel al lado (en el celular, pantalla completa) */
#cf-pulpo .pp-probar-d { position: fixed; z-index: 40; top: 64px; right: 12px; bottom: 12px; width: min(400px, calc(100vw - 24px)); display: flex; flex-direction: column; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: -18px 0 40px -18px rgba(0, 0, 0, .6); overflow: hidden; }
#cf-pulpo .pp-probar-d > .pp-probar { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
#cf-pulpo .pp-probar-d .pp-prueba { flex: 1; min-height: 0; height: auto; }
#cf-pulpo .pp-probar-d .pp-sec-h { padding-right: 40px; }
#cf-pulpo .pp-probar-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; }
@media (min-width: 1100px) { #pp-aj.pp-vend-probando { padding-right: 420px; } }
@media (max-width: 759px) {
  #cf-pulpo .pp-probar-d { inset: 0; width: auto; border-radius: 0; z-index: 9050; }
  #cf-pulpo .pp-bt-fila > .pp-seg { order: 3; flex: 1 1 100%; }
  #cf-pulpo .pp-bt-fila > .pp-seg > button { flex: 1; }
  #cf-pulpo .pp-bt-top .pp-listo { flex-basis: 100%; }
}
/* 📱 productos en el celular: el elegido arriba y «Cambiar ▾» abre la lista */
#cf-pulpo .pp-pcel { display: none; }
@media (max-width: 900px) {
  #cf-pulpo .pp-pcel { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 10px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--t1); font: inherit; text-align: left; cursor: pointer; }
  #cf-pulpo .pp-pcel .pp-pi-f { width: 40px; height: 40px; flex-shrink: 0; }
  #cf-pulpo .pp-pcel-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } #cf-pulpo .pp-pcel-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #cf-pulpo .pp-pcel-t small { color: var(--t2); font-size: 11.5px; }
  #cf-pulpo .pp-pcel em { font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--pp-d); white-space: nowrap; }
  #cf-pulpo .pp-prods:not(.pp-plist-ab) > .pp-plist { display: none; }
  #cf-pulpo .pp-prods.pp-plist-ab > .pp-plist { flex-direction: column; overflow: visible; margin-bottom: 12px; }
  #cf-pulpo .pp-prods.pp-plist-ab > .pp-plist > .pp-fila { flex-direction: row; flex-wrap: wrap; }
  #cf-pulpo .pp-prods.pp-plist-ab .pp-pi { min-width: 0; }
  #cf-pulpo .pp-guardar { gap: 6px; } #cf-pulpo .pp-guardar .cf-btn { padding: 9px 12px; }
  #cf-pulpo .pp-guardar [data-bc="probar-este"] { font-size: 0; } #cf-pulpo .pp-guardar [data-bc="probar-este"]::after { content: '🧪 Probar'; font-size: 13.5px; }
  #cf-pulpo .pp-sin-g { flex-basis: 100%; order: -1; margin-left: 0; }
}
#cf-pulpo .pp-ps-anc { height: auto; display: flex; flex-direction: column; gap: 14px; }
#cf-pulpo .pp-bt-top .pp-listo > summary { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
#cf-pulpo .pp-bt-top .pp-listo-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cf-pulpo .pp-bt-top .pp-listo-bar { flex: 0 0 90px; width: 90px; margin: 0; }

/* ══════════ 🔁 Seguimientos: línea de tiempo, cuál se usa, espera clara, plantilla solo donde hace falta y vista previa ══════════ */
#cf-pulpo .pp-sg > .pp-sec-h { flex-wrap: wrap; row-gap: 6px; }
#cf-pulpo .pp-sg .pp-sg-nom { flex: 1 1 220px; min-width: 0; font-weight: 800; }
#cf-pulpo .pp-sg-meta { flex-basis: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
#cf-pulpo .pp-sg-uso { font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--border); white-space: nowrap; }
#cf-pulpo .pp-sg-uso-ok { color: var(--green); background: var(--green-bg); border-color: var(--green-bd); }
#cf-pulpo .pp-sg-uso-mal { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-bd); white-space: normal; }
#cf-pulpo .pp-sg-uso-off { color: var(--t2); background: var(--bg); }
#cf-pulpo .pp-sg-res { color: var(--t2); font-size: 12px; min-width: 0; }
#cf-pulpo .pp-sg-tl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
#cf-pulpo .pp-tl-p { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 5px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 800; color: var(--t1); background: color-mix(in srgb, var(--pp-b) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--pp-b) 35%, var(--border)); }
#cf-pulpo .pp-tl-p small { font-size: 11px; font-weight: 700; color: var(--t2); }
#cf-pulpo .pp-tl-ini { background: var(--surface); border-color: var(--border); }
#cf-pulpo .pp-tl-mal { background: var(--red-bg); border-color: var(--red-bd); } #cf-pulpo .pp-tl-mal small { color: var(--red); }
#cf-pulpo .pp-tl-plt { background: var(--amber-bg); border-color: var(--amber-bd); } #cf-pulpo .pp-tl-plt small { color: var(--amber); }
#cf-pulpo .pp-tl-f { font-size: 11.5px; font-weight: 800; color: var(--t2); white-space: nowrap; }
#cf-pulpo .pp-tl-f::before { content: '→ '; } #cf-pulpo .pp-tl-f::after { content: ' →'; }
#cf-pulpo .pp-sg-tl-nota { margin-top: -4px; }
#cf-pulpo .pp-sg-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
#cf-pulpo .pp-sg-pasos { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#cf-pulpo .pp-sg-cel { position: sticky; top: 8px; }
#cf-pulpo .pp-sg-cel .pp-cel-chat { max-height: 520px; }
#cf-pulpo .pp-cel-mal { color: var(--red) !important; font-weight: 800; }
#cf-pulpo .pp-sg-paso { display: flex; flex-direction: column; gap: 8px; }
#cf-pulpo .pp-sg-paso .pp-paso-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#cf-pulpo .pp-sg-paso .pp-paso-h > b { font-size: 13.5px; }
#cf-pulpo .pp-paso-esp { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--t2); position: static !important; }
#cf-pulpo .pp-paso-esp input { width: 78px; padding: 6px 8px; } #cf-pulpo .pp-paso-esp select { width: auto; padding: 6px 8px; }
#cf-pulpo .pp-paso-cu { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--t2); white-space: nowrap; }
#cf-pulpo .pp-paso-cu.pp-mal { color: var(--red); }
#cf-pulpo .pp-sp-vars { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--t2); }
#cf-pulpo .pp-sp-vars .pp-mini { padding: 2px 9px; font-family: ui-monospace, monospace; }
#cf-pulpo .pp-paso-plt { display: flex; flex-direction: column; gap: 8px; }
#cf-pulpo .pp-paso-plt[hidden] { display: none; }
#cf-pulpo .pp-paso-plt-fuera { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--amber-bd); background: var(--amber-bg); }
#cf-pulpo .pp-paso-aviso { margin: 0; font-size: 12.5px; color: var(--t1); }
#cf-pulpo .pp-paso-plt .pp-mini { align-self: flex-start; }
@media (max-width: 1100px) { #cf-pulpo .pp-sg-cuerpo { grid-template-columns: minmax(0, 1fr); } #cf-pulpo .pp-sg-cel { position: static; } }
@media (max-width: 759px) { #cf-pulpo .pp-paso-cu { margin-left: 0; flex-basis: 100%; } }
#cf-pulpo .pp-sg > .pp-sec-h > .pp-sg-meta { order: 100; }
#cf-pulpo .pp-sg-paso { position: relative; }
#cf-pulpo .pp-sg-paso .pp-paso-h { padding-right: 40px; }
#cf-pulpo .pp-sg-paso .pp-paso-h > [data-sp-x] { position: absolute; top: 10px; right: 10px; }

/* 📚 catálogo: avance de la lectura del PDF, pregunta de precios y productos sin precio */
#cf-pulpo .pp-kb-prog { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--pp-b) 10%, var(--bg)); border: 1px solid color-mix(in srgb, var(--pp-b) 35%, var(--border)); }
#cf-pulpo .pp-kb-prog span { font-size: 13px; font-weight: 700; color: var(--t1); } #cf-pulpo .pp-kb-prog small { color: var(--t2); font-size: 12px; }
#cf-pulpo .pp-kb-prog .pp-barra { display: block; height: 8px; border-radius: 99px; background: var(--surface); overflow: hidden; }
#cf-pulpo .pp-kb-prog .pp-barra > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--pp-a), var(--pp-b)); transition: width .6s; }
#cf-pulpo .pp-kb-precio { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--amber-bg); border: 1px solid var(--amber-bd); }
#cf-pulpo .pp-kb-precio > b { font-size: 14px; } #cf-pulpo .pp-kb-precio > small { color: var(--t2); font-size: 12.5px; }
#cf-pulpo .pp-kb-precio-op { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
#cf-pulpo .pp-kb-pt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
#cf-pulpo .pp-kb-pt input { width: 130px; }
#cf-pulpo .pp-kb-sinp .pp-kb-pre { border-color: var(--amber-bd) !important; background: var(--amber-bg) !important; }
#cf-pulpo .pp-kb-pag { flex-shrink: 0; font-size: 11px; font-weight: 800; color: var(--t2); padding: 2px 7px; border-radius: 99px; background: var(--bg); }

/* ══════════ 📊 Tablero más profesional: filtros fijos, tarjetas con ícono y comparación nombrada ══════════ */
#cf-pulpo .pp-tb-filtros { position: sticky; top: 0; z-index: 5; padding: 10px 12px; margin-bottom: 4px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--border); box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .7); }
#cf-pulpo .pp-tb-filtros .pp-seg button { white-space: nowrap; }
#cf-pulpo .pp-tb-fecha { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--bg); border: 1px solid var(--border); font-size: 12.5px; font-weight: 800; color: var(--t1); white-space: nowrap; }
#cf-pulpo .pp-tb-fecha em { font-style: normal; font-weight: 600; color: var(--t2); }
#cf-pulpo .pp-tb-fil-d { display: inline-flex; gap: 6px; margin-left: auto; }
/* comparación con el período anterior: píldora verde (bueno) / roja (malo) / gris (igual) */
#cf-pulpo .pp-tb-d { display: inline-flex; align-items: baseline; gap: 4px; align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 800; background: var(--bg); border: 1px solid var(--border); color: var(--t2); }
#cf-pulpo .pp-tb-d em { font-style: normal; font-weight: 600; opacity: .8; }
#cf-pulpo .pp-tb-d.pp-tb-bien { color: var(--green); background: var(--green-bg); border-color: var(--green-bd); }
#cf-pulpo .pp-tb-d.pp-tb-mal { color: var(--red); background: var(--red-bg); border-color: var(--red-bd); }
#cf-pulpo .pp-hero-d { margin: -2px 0 6px; }
/* tarjetas de cifras */
#cf-pulpo .pp-tb-tiles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
#cf-pulpo .pp-tb-tile { position: relative; gap: 3px; padding: 14px 14px 12px; border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--pp-b) 7%, var(--bg)), var(--bg) 60%); transition: border-color .15s, transform .15s; }
#cf-pulpo .pp-tb-tile:hover { border-color: color-mix(in srgb, var(--pp-b) 45%, var(--border)); transform: translateY(-1px); }
#cf-pulpo .pp-tb-tile small { font-size: 12px; font-weight: 700; color: var(--t2); padding-right: 34px; }
#cf-pulpo .pp-tb-tile b { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
#cf-pulpo .pp-tb-tile .pp-tb-x { font-size: 12px; color: var(--t2); }
#cf-pulpo .pp-tb-ico { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-style: normal; font-size: 14px; background: color-mix(in srgb, var(--pp-b) 14%, var(--surface)); }
/* secciones: aire parejo y textos de ayuda en una línea (tocar los abre) */
#cf-pulpo .pp-tb > .pp-sec, #cf-pulpo .pp-tb .pp-tb-dos > .pp-sec { border-radius: 18px; }
#cf-pulpo .pp-tb section.pp-sec p.cf-sub:not(.pp-sub-ab):not(.pp-tb-nota) { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
#cf-pulpo .pp-tb section.pp-sec p.cf-sub:not(.pp-tb-nota)::before { content: 'ℹ️ '; }
@media (max-width: 759px) {
  #cf-pulpo .pp-tb-filtros { padding: 8px; border-radius: 14px; }
  #cf-pulpo .pp-tb-filtros .pp-seg { width: 100%; overflow-x: auto; scrollbar-width: none; } #cf-pulpo .pp-tb-filtros .pp-seg::-webkit-scrollbar { display: none; }
  #cf-pulpo .pp-tb-filtros .pp-seg button { flex: 1 0 auto; }
  #cf-pulpo .pp-tb-fil-d { margin-left: 0; }
  #cf-pulpo .pp-tb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #cf-pulpo .pp-tb-tile b { font-size: 24px; }
}
@media (max-width: 759px) {
  #cf-pulpo .pp-tb-filtros { position: static; backdrop-filter: none; }
  #cf-pulpo .pp-tb-filtros .pp-tb-bot { flex: 1 1 0; min-width: 0; }
  #cf-pulpo .pp-tb-fil-d .pp-mini span { display: none; }
  #cf-pulpo .pp-tb-fil-d .pp-mini { padding: 8px 12px; }
  #cf-pulpo .pp-tb-fecha { flex-basis: 100%; justify-content: center; }
}

/* ══ 💼 Chats más profesionales (15-oct) ══ */
/* 🗂️ ficha del cliente (pantallas de 1280 px o más) */
.pp-body.pp-con-ficha { grid-template-columns: 340px minmax(0, 1fr) 300px; }
.pp-ficha { min-width: 0; min-height: 0; overflow-y: auto; border-left: 1px solid var(--border); background: var(--surface); padding: 14px 14px 24px; display: flex; flex-direction: column; gap: 14px; }
.pp-ficha[hidden] { display: none; }
.pp-ficha-on .pp-peds, .pp-ficha-on .pp-cab-etq { display: none !important; }
.pp-ficha-on .pp-cab-ico > span { display: none; }
.pp-fi-top { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 4px 4px 14px; border-bottom: 1px solid var(--border); }
.pp-fi-top > b { font-size: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-fi-top > small { color: var(--t2); font-size: 12.5px; }
#cf-pulpo .pp-fi-av { width: 56px; height: 56px; font-size: 20px; }
.pp-fi-x { position: absolute; top: 0; right: 0; width: 28px; height: 28px; border-radius: 99px; border: 1px solid var(--border); background: var(--bg); color: var(--t2); cursor: pointer; font: inherit; font-size: 12px; }
.pp-fi-s { display: flex; flex-direction: column; gap: 6px; }
.pp-fi-s h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--t2); }
.pp-fi-ed { border: 0; background: none; color: var(--pp-b); font: inherit; font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.pp-fi-ed:hover { background: var(--bg); }
.pp-fi-acc { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-fi-acc .pp-ped, .pp-fi-acc .pp-estr-v { max-width: 100%; flex: 1 1 calc(50% - 6px); min-width: 118px; }
.pp-fi-etq { display: flex; flex-wrap: wrap; gap: 4px; }
.pp-fi-l { margin: 0; font-size: 13px; }
.pp-fi-no { color: var(--t2); font-size: 12.5px; }
.pp-fi-ped, .pp-fi-media, .pp-fi-ad { width: 100%; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--t1); text-align: left; font: inherit; cursor: pointer; }
.pp-fi-ped { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }
.pp-fi-ped:hover, .pp-fi-ad:hover, .pp-fi-media:hover { border-color: var(--pp-b); }
.pp-fi-ped b { font-size: 12.5px; } .pp-fi-ped small { color: var(--t2); font-size: 11.5px; }
.pp-fi-nota { padding: 7px 9px; border-radius: 10px; background: var(--amber-bg); border: 1px solid var(--amber-bd); }
.pp-fi-nota p { margin: 0 0 3px; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; } .pp-fi-nota small { color: var(--t2); font-size: 11px; }
.pp-fi-ad { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; }
.pp-fi-ad > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pp-fi-ad b { font-size: 12.5px; } .pp-fi-ad small { color: var(--pp-b); font-size: 11.5px; font-weight: 700; }
.pp-fi-adimg { width: 64px; height: 64px; border-radius: 9px; object-fit: cover; flex-shrink: 0; background: var(--surface); }
.pp-fi-media { padding: 8px 10px; font-size: 13px; }
.pp-cab-b.on { border-color: var(--pp-b); color: var(--pp-b); }

/* 🤖 bot vs 👤 persona: otro tono y quién escribió arriba de cada grupo */
.pp-quien { font-size: 11px; font-weight: 800; color: var(--pp-b); line-height: 1.2; padding-right: 22px; }
#cf-pulpo .pp-out.pp-bot { background: color-mix(in srgb, #64748b 13%, var(--surface)) !important; border-color: color-mix(in srgb, #64748b 30%, var(--border)) !important; }
.pp-out.pp-bot .pp-quien { color: #64748b; }
[data-theme="dark"] .pp-out.pp-bot .pp-quien { color: #94a3b8; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .pp-out.pp-bot .pp-quien { color: #94a3b8; } }
.pp-out.pp-auto .pp-quien { color: var(--amber); }

/* ↩️ cita · 👍 reacciones · menú del mensaje */
.pp-m { position: relative; }
.pp-cita { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 5px 8px; border: 0; border-left: 3px solid var(--pp-b); border-radius: 8px; background: color-mix(in srgb, var(--t1) 6%, transparent); color: var(--t1); text-align: left; font: inherit; cursor: pointer; }
.pp-cita b { font-size: 11px; color: var(--pp-b); }
.pp-cita span { font-size: 12px; color: var(--t2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pp-cita-no { font-size: 11.5px; color: var(--t2); cursor: default; }
.pp-m-mn { position: absolute; top: 3px; right: 3px; width: 24px; height: 22px; border-radius: 7px; border: 0; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--t2); font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; }
.pp-m:hover .pp-m-mn, .pp-m-mn:focus-visible { opacity: 1; }
@media (hover: none) { .pp-m-mn { opacity: .7; top: 2px; right: -30px; background: transparent; } .pp-out .pp-m-mn { right: auto; left: -30px; } }   /* táctil: al costado de la burbuja (no tapa el texto); también se abre manteniendo presionado */
.pp-reacs { position: absolute; bottom: -13px; left: 10px; display: flex; gap: 2px; padding: 1px 6px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; line-height: 1.5; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.pp-reacs i { font-style: normal; }
.pp-m.pp-con-reac { margin-bottom: 14px; }
.pp-brilla { animation: pp-brilla 1.6s ease; }
@keyframes pp-brilla { 0%, 45% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-b) 55%, transparent); } 100% { box-shadow: 0 1px 1px rgba(0,0,0,.06); } }
@media (prefers-reduced-motion: reduce) { .pp-brilla { animation: none; outline: 2px solid var(--pp-b); } }
.pp-mm { position: absolute; z-index: 30; width: 230px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0,0,0,.24); display: flex; flex-direction: column; gap: 2px; }
.pp-mm[hidden] { display: none; }
.pp-mm-r { display: flex; justify-content: space-between; padding: 2px 2px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.pp-mm-r button { width: 34px; height: 34px; border: 0; border-radius: 99px; background: transparent; font-size: 19px; cursor: pointer; padding: 0; }
.pp-mm-r button:hover:not(:disabled), .pp-mm-r button.on { background: var(--accent-bg); }
.pp-mm-i { border: 0; background: transparent; color: var(--t1); text-align: left; font: inherit; font-size: 13.5px; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.pp-mm-i:hover:not(:disabled) { background: var(--bg); }
.pp-mm button:disabled { opacity: .4; cursor: not-allowed; }
.pp-mm small { color: var(--t2); font-size: 11.5px; padding: 4px 8px 2px; }
.pp-resp { display: flex; align-items: center; gap: 8px; margin: 0 12px; padding: 7px 10px; border-left: 3px solid var(--pp-b); border-radius: 10px 10px 0 0; background: var(--surface); border-top: 1px solid var(--border); }
.pp-resp[hidden] { display: none; }
.pp-resp-b { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pp-resp-b b { font-size: 12px; color: var(--pp-b); } .pp-resp-b small { font-size: 12px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-resp-x { width: 28px; height: 28px; border-radius: 99px; border: 1px solid var(--border); background: var(--bg); color: var(--t2); cursor: pointer; font: inherit; flex-shrink: 0; }

/* ⬇️ «N nuevos» */
.pp-bajar { position: absolute; right: 18px; bottom: 90px; z-index: 20; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--t1); font: inherit; font-size: 12.5px; box-shadow: 0 6px 18px rgba(0,0,0,.18); cursor: pointer; }
.pp-bajar[hidden] { display: none; }
.pp-bajar b { color: var(--pp-b); }

/* 🔎 buscar en el chat */
.pp-bc { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
.pp-bc[hidden] { display: none; }
.pp-bc input { flex: 1; min-width: 0; height: 32px; }
.pp-bc small { color: var(--t2); font-size: 12px; white-space: nowrap; }
.pp-bc button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--t1); cursor: pointer; font: inherit; flex-shrink: 0; }
mark.pp-bc-m { background: color-mix(in srgb, #facc15 55%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
mark.pp-bc-m.on { background: #f59e0b; color: #111; }
@media (max-width: 759px) { #cf-pulpo .pp-cab-bc { display: none; } }   /* en el celular está en ⋯ */

/* 🖼️ multimedia del chat */
.pp-mmd-h { margin: 14px 0 8px; font-size: 13px; }
.pp-mmd-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.pp-mmd-i { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg); border: 1px solid var(--border); }
.pp-mmd-i img, .pp-mmd-i video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-mmd-i em { position: absolute; left: 4px; bottom: 4px; font-style: normal; font-size: 11px; padding: 0 5px; border-radius: 99px; background: rgba(0,0,0,.55); color: #fff; }
.pp-mmd-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.pp-mmd-l { display: flex; flex-direction: column; gap: 6px; }
.pp-mmd-l .pp-doc small { color: var(--t2); margin-left: 6px; font-weight: 500; }
.pp-mmd-a { display: flex; flex-direction: column; gap: 3px; } .pp-mmd-a audio { width: 100%; } .pp-mmd-a small { color: var(--t2); font-size: 11.5px; }

/* ⌨️ atajos */
.pp-kbd-l { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.pp-kbd { display: flex; align-items: center; gap: 12px; }
.pp-kbd kbd { min-width: 150px; font: inherit; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--border); border-bottom-width: 2px; background: var(--bg); text-align: center; }
.pp-kbd span { font-size: 13px; }

/* ☑️ lista: acciones al pasar el mouse y selección de varios */
.pp-it { position: relative; }
.pp-it-acc { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,.14); }
.pp-it-acc i { font-style: normal; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-size: 14px; cursor: pointer; }
.pp-it-acc i:hover { background: var(--bg); }
@media (hover: hover) and (pointer: fine) { .pp-it:hover .pp-it-acc { display: flex; } }
.pp-it-ck { display: none; }
.pp-it-selm .pp-it-ck { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border); color: transparent; font-size: 13px; font-weight: 900; }
.pp-it-sel .pp-it-ck { background: var(--pp-b); border-color: var(--pp-b); color: #fff; }
.pp-it.pp-it-sel { background: var(--accent-bg); }
.pp-selbar { border-top: 1px solid var(--border); background: var(--surface); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 -6px 16px rgba(0,0,0,.08); }
.pp-selbar[hidden] { display: none; }
.pp-selbar-t { display: flex; align-items: center; gap: 6px; } .pp-selbar-t b { margin-right: auto; font-size: 13px; }
.pp-selbar-a { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .pp-selbar-a .cf-btn { padding: 6px 8px; font-size: 12.5px; }

/* ⭕ anillo de la ventana de 24 h */
.pp-anillo { display: inline-flex; align-items: center; gap: 5px; }
.pp-anillo svg { width: 16px; height: 16px; transform: rotate(-90deg); flex-shrink: 0; }
.pp-anillo circle { fill: none; stroke-width: 2.6; }
.pp-an-f { stroke: color-mix(in srgb, currentColor 22%, transparent); }
.pp-an-v { stroke-linecap: round; } .pp-an-g { stroke: var(--green, #22c55e); } .pp-an-a { stroke: var(--amber, #f59e0b); } .pp-an-r { stroke: var(--red, #ef4444); }

/* 🧼 fondo del chat con un patrón sutil tipo WhatsApp (claro y oscuro) */
#cf-pulpo { --pp-patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%230f172a' stroke-opacity='.055' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 30h26a8 8 0 0 1 8 8v12a8 8 0 0 1-8 8H36l-8 7v-7h-4a8 8 0 0 1-8-8V38a8 8 0 0 1 8-8z'/%3E%3Cpath d='M150 40c-4-6-14-4-14 4 0 7 14 14 14 14s14-7 14-14c0-8-10-10-14-4z'/%3E%3Ccircle cx='100' cy='110' r='9'/%3E%3Cpath d='M40 150l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/%3E%3Cpath d='M170 140v24M158 152h24'/%3E%3Cpath d='M120 190c8-8 16 8 24 0s16 8 24 0'/%3E%3Crect x='70' y='20' width='16' height='22' rx='3'/%3E%3Cpath d='M190 80l10 10-10 10-10-10z'/%3E%3C/g%3E%3C/svg%3E"); }
[data-theme="dark"] #cf-pulpo { --pp-patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 30h26a8 8 0 0 1 8 8v12a8 8 0 0 1-8 8H36l-8 7v-7h-4a8 8 0 0 1-8-8V38a8 8 0 0 1 8-8z'/%3E%3Cpath d='M150 40c-4-6-14-4-14 4 0 7 14 14 14 14s14-7 14-14c0-8-10-10-14-4z'/%3E%3Ccircle cx='100' cy='110' r='9'/%3E%3Cpath d='M40 150l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/%3E%3Cpath d='M170 140v24M158 152h24'/%3E%3Cpath d='M120 190c8-8 16 8 24 0s16 8 24 0'/%3E%3Crect x='70' y='20' width='16' height='22' rx='3'/%3E%3Cpath d='M190 80l10 10-10 10-10-10z'/%3E%3C/g%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) #cf-pulpo { --pp-patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 30h26a8 8 0 0 1 8 8v12a8 8 0 0 1-8 8H36l-8 7v-7h-4a8 8 0 0 1-8-8V38a8 8 0 0 1 8-8z'/%3E%3Cpath d='M150 40c-4-6-14-4-14 4 0 7 14 14 14 14s14-7 14-14c0-8-10-10-14-4z'/%3E%3Ccircle cx='100' cy='110' r='9'/%3E%3Cpath d='M40 150l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/%3E%3Cpath d='M170 140v24M158 152h24'/%3E%3Cpath d='M120 190c8-8 16 8 24 0s16 8 24 0'/%3E%3Crect x='70' y='20' width='16' height='22' rx='3'/%3E%3Cpath d='M190 80l10 10-10 10-10-10z'/%3E%3C/g%3E%3C/svg%3E"); } }
#cf-pulpo .pp-msgs { background: var(--pp-patron) 0 0 / 220px 220px repeat, radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--pp-a) 6%, transparent), transparent 42%), radial-gradient(circle at 85% 90%, color-mix(in srgb, var(--pp-b) 7%, transparent), transparent 45%), var(--bg) !important; }
/* cabecera más limpia: menos separación y etiquetas solo como íconos en pantallas medianas */
#cf-pulpo .pp-cab-acc { gap: 6px; }
@media (max-width: 1440px) { #cf-pulpo .pp-cab-ico > span { display: none; } }

/* 🔍 visor de fotos y videos dentro de Pulpo */
.pp-visor { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 56px 12px 16px; background: rgba(6, 4, 14, .92); backdrop-filter: blur(4px); }
.pp-visor[hidden] { display: none; }
.pp-visor-m { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #000; }
.pp-visor-b { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; display: flex; gap: 8px; }
.pp-visor-acc { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 99px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 17px; text-decoration: none; cursor: pointer; }
.pp-visor-acc:hover { background: rgba(255,255,255,.22); }
/* 📱 cabecera del chat en el celular: ✉️ y 🏷️ pasan a ⋯ y el nombre se recorta antes de que la huella choque con el bot */
@media (max-width: 759px) {
  #cf-pulpo .pp-cab-acc [data-pp="no-leido"], #cf-pulpo .pp-cab-acc [data-pp="etiquetar"] { display: none; }
  #cf-pulpo .pp-cab-t { overflow: hidden; }
  #cf-pulpo .pp-cab-n > b { min-width: 0; }
  #cf-pulpo .pp-cab-acc { margin-left: 6px; }
}

/* 📲 avisos del equipo por el bot (Ajustes) */
.pp-aveq-o { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 8px 0 10px; }
.pp-aveq-i { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); cursor: pointer; }
.pp-aveq-i input { position: absolute; opacity: 0; pointer-events: none; }
.pp-aveq-i b { font-size: 13.5px; } .pp-aveq-i small { color: var(--t2); font-size: 12px; }
.pp-aveq-i.on, .pp-aveq-i:has(input:checked) { border-color: var(--pp-b); background: color-mix(in srgb, var(--pp-b) 10%, var(--bg)); }
.pp-aveq-est { align-items: center; flex-wrap: wrap; } .pp-aveq-est > span { font-size: 13px; font-weight: 700; margin-right: auto; }
.pp-aveq-log { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; } .pp-aveq-log small { color: var(--t2); }
/* 📶 Calidad del número y de las plantillas (public/pulpo-calidad.js) */
.pp-cal { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); background: var(--bg); color: var(--t1); white-space: nowrap; }
.pp-cal-v { border-color: color-mix(in srgb, #22c55e 55%, var(--border)); background: color-mix(in srgb, #22c55e 12%, var(--bg)); }
.pp-cal-a { border-color: color-mix(in srgb, #eab308 60%, var(--border)); background: color-mix(in srgb, #eab308 14%, var(--bg)); }
.pp-cal-r { border-color: color-mix(in srgb, #ef4444 60%, var(--border)); background: color-mix(in srgb, #ef4444 13%, var(--bg)); }
.pp-cal-nums, .pp-cal-pls { display: grid; gap: 8px; } .pp-cal-nums { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pp-cal-num, .pp-cal-pl { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pp-cal-num small { color: var(--t2); font-size: 12px; }
.pp-cal-pl-mal { border-color: color-mix(in srgb, #ef4444 45%, var(--border)); }
.pp-cal-pl-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; } .pp-cal-pl-t > b { font-size: 13.5px; overflow-wrap: anywhere; margin-right: 2px; }
.pp-cal-txt { margin: 0; font-size: 12.5px; color: var(--t2); white-space: pre-wrap; overflow-wrap: anywhere; }
.pp-cal-nota { margin: 0; font-size: 12.5px; line-height: 1.45; } .pp-cal-nota .pp-mini { margin-left: 4px; vertical-align: middle; }
.pp-cal-ok { color: color-mix(in srgb, #16a34a 75%, var(--t1)); } .pp-cal-mal { color: color-mix(in srgb, #dc2626 70%, var(--t1)); }
.pp-cal-sw { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; cursor: pointer; } .pp-cal-sw input { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; }
.pp-cal-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; } .pp-cal-hist small { color: var(--t2); margin-right: 4px; }