/* [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: contain; }
.pp-img[width][height] { width: auto; height: auto; }   /* ⚡ (1-nov, vel1) foto que ya bajó: width/height solo dan la proporción (reserva su espacio antes de pintarla); el tamaño sale igual que siempre */   /* (contain: la foto completa, como en WhatsApp; con cover se cortaban las verticales) */ .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-mini-desc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 12px; color: var(--t2); }
.pp-mini-desc select.cf-input { width: auto; min-width: 70px; }
.pp-mini-desc input.cf-input { width: 110px; }
.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: 260px; object-fit: contain; border-radius: 10px; display: block; background: rgba(0, 0, 0, .25); }
.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-bot-ico.webp) center 70% / cover no-repeat, linear-gradient(135deg, var(--pp-a, #f43f5e), var(--pp-b, #a855f7)); -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%; overflow: hidden; }
.pp-logo-d img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 70%; -webkit-user-drag: none; user-select: none; }   /* 🤖 la carita del Pulpo Bot */
#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-bot-ico.webp") center 46% / 84px 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, .pp-ig-logo, .pp-fun-logo { background: linear-gradient(135deg, var(--pp-a, #f43f5e), var(--pp-b, #a855f7)); object-fit: cover; object-position: center 70%; }   /* 🤖 Pulpo Bot sobre el degradado */
.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-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-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-dat { margin: 0; display: grid; gap: 6px; }   /* 🧾 datos del pedido: etiqueta arriba, valor abajo (direcciones largas sin cortar) */
.pp-fi-dat div { display: grid; gap: 1px; }
.pp-fi-dat dt { font-size: 11px; color: var(--t2); font-weight: 600; }
.pp-fi-dat dd { margin: 0; font-size: 13px; color: var(--t1); overflow-wrap: anywhere; user-select: text; }
.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, var(--pp-a) 11%, var(--surface)) !important; border-color: color-mix(in srgb, var(--pp-a) 28%, var(--border)) !important; }   /* 🤖 el vendedor: rosado suave de la marca (17-oct: antes gris, casi igual al cliente) */
.pp-out.pp-bot .pp-quien { color: color-mix(in srgb, var(--pp-a) 80%, var(--t1)); }
.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; }
/* ── Pulido visual (17 oct) ── */
/* celular: en Organizar → Etiquetas el nombre se ve completo (la muestra de color al lado ya dice cómo se ve) */
@media (max-width: 520px) { .pp-etq-ed .pp-etq-c { display: none; } }
/* celular: si la última tarjeta queda sola en su fila, ocupa todo el ancho */
@media (max-width: 480px) { .pp-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* ✨ animaciones del chat (17 oct): solo con las animaciones de Pulso encendidas (sin html.cf-quieto; tanda 3: antes miraban html.cf-mov) */
html:not(.cf-quieto) #cf-pulpo .pp-m-nuevo { animation: pp-m-entra .42s cubic-bezier(.2, 1.25, .4, 1) both; }
html:not(.cf-quieto) #cf-pulpo .pp-m-nuevo.pp-in { transform-origin: 0 100%; } html:not(.cf-quieto) #cf-pulpo .pp-m-nuevo.pp-out { transform-origin: 100% 100%; }
@keyframes pp-m-entra { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
html:not(.cf-quieto) #cf-pulpo .pp-tk-anim { display: inline-block; animation: pp-tk-azul .7s ease both; }
@keyframes pp-tk-azul { 0% { color: var(--t3, #94a3b8); transform: scale(1); } 45% { transform: scale(1.4); text-shadow: 0 0 8px #38bdf8; } 100% { color: #38bdf8; transform: scale(1); } }
/* ✍️ «escribiendo…» del vendedor */
#cf-pulpo .pp-escribiendo { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
#cf-pulpo .pp-escribiendo .pp-quien { width: 100%; }
#cf-pulpo .pp-escribiendo small { font-size: 11.5px; color: var(--t2); font-style: italic; }
.pp-puntos { display: inline-flex; gap: 4px; align-items: center; height: 14px; }
.pp-puntos i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; }
html:not(.cf-quieto) .pp-puntos i { animation: pp-punto 1.2s ease-in-out infinite; } html:not(.cf-quieto) .pp-puntos i:nth-child(2) { animation-delay: .15s; } html:not(.cf-quieto) .pp-puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes pp-punto { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
html:not(.cf-quieto) #cf-pulpo .pp-escribiendo { animation: pp-m-entra .35s ease both; transform-origin: 100% 100%; }
/* 📊 Tablero: las barras se llenan en cascada cuando llegan datos nuevos */
html:not(.cf-quieto) .pp-tb-anim .pp-tb-ht i { transform-origin: 0 50%; animation: pp-tb-crece .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pp-tb-crece { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html:not(.cf-quieto) .pp-tb-anim .pp-tb-hf:nth-child(2) i { animation-delay: .07s; } html:not(.cf-quieto) .pp-tb-anim .pp-tb-hf:nth-child(3) i { animation-delay: .14s; }
html:not(.cf-quieto) .pp-tb-anim .pp-tb-hf:nth-child(4) i { animation-delay: .21s; } html:not(.cf-quieto) .pp-tb-anim .pp-tb-hf:nth-child(5) i { animation-delay: .28s; }
html:not(.cf-quieto) .pp-tb-anim .pp-tb-hf:nth-child(6) i { animation-delay: .35s; } html:not(.cf-quieto) .pp-tb-anim .pp-tb-hf:nth-child(n+7) i { animation-delay: .42s; }

/* ⚡ Desencadenadores (pulpo-desenc.js) */
.pp-dz-l { display: flex; flex-direction: column; gap: 10px; }
.pp-dz { border: 1px solid var(--border); border-radius: 14px; background: var(--bg); overflow: hidden; }
.pp-dz-on { border-color: color-mix(in srgb, #22c55e 45%, var(--border)); }
.pp-dz-h { display: flex; align-items: flex-start; gap: 10px; padding: 12px; }
.pp-dz-h > .cf-sw { flex-shrink: 0; margin-top: 2px; }
.pp-dz-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; border: 0; background: transparent; color: var(--t1); text-align: left; font: inherit; padding: 0; cursor: pointer; }
.pp-dz-t small { color: var(--t2); font-size: 12px; line-height: 1.4; } .pp-dz-uso { color: var(--t2); font-size: 11.5px; }
.pp-dz-bt { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.pp-dz-ed { border-top: 1px solid var(--border); padding: 12px; display: flex; flex-direction: column; gap: 14px; }
.pp-dz-paso { display: flex; flex-direction: column; gap: 8px; }
.pp-dz-paso h4 { margin: 0; font-size: 13.5px; } .pp-dz-paso h4 small { color: var(--t2); font-weight: 500; }
.pp-dz-vars { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 11.5px; color: var(--t2); } .pp-dz-vars span { width: 100%; }
.pp-dz-vars .pp-chip { font-size: 11.5px; padding: 2px 8px; }
.pp-fila .cf-input.pp-dz-num, .pp-dz-num { flex: 0 0 90px; min-width: 0; width: 90px; }
.pp-fila .cf-input.pp-dz-tel { flex: 1 1 150px; min-width: 140px; max-width: 220px; }
.pp-dz-gen { align-items: center; font-size: 12.5px; color: var(--t2); } .pp-dz-gen select.cf-input { flex: 0 0 auto; min-width: 0; width: auto; }
.pp-dz-acc { align-items: center; }
.pp-dz-plt { font-style: italic; margin: 0; }
.pp-dz-guardar { position: sticky; bottom: 8px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .45); font-size: 13px; color: var(--t2); }
.pp-dz-guardar.on { border-color: var(--amber); color: var(--t1); }
@media (max-width: 600px) { .pp-dz-h { flex-wrap: wrap; } .pp-dz-bt { width: 100%; justify-content: flex-start; padding-left: 46px; } }
.pp-dz-prods > .cf-input { max-width: 380px; } .pp-dz-prod-l { max-height: 190px; overflow: auto; align-content: flex-start; }
.pp-dz-pf { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; vertical-align: -4px; margin-right: 5px; }
.pp-fila .cf-input.pp-dz-cm { flex: 0 1 220px; min-width: 0; }
.pp-dz-res { display: block; color: var(--t2); font-size: 11.5px; line-height: 1.45; margin-top: 2px; }
/* 🅰️🅱️ presentaciones A/B (Tablero y Vendedor) */
.pp-tb-ab { margin-top: 10px; }
.pp-tb-abc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.pp-tb-abv { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); min-width: 0; font-size: 13px; color: var(--t2); }
.pp-tb-abv > b { color: var(--t1); font-size: 14px; }
.pp-tb-abv span b { color: var(--t1); }
.pp-tb-abg { border-color: #16a34a; box-shadow: 0 0 0 1px #16a34a inset; }
.pp-tb-abr { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--t1); }
.pp-tb-ab-ganador { color: #15803d; } [data-theme="dark"] .pp-tb-ab-ganador { color: #4ade80; }
.pp-ab-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 10px; padding: 10px; border-radius: 12px; border: 1px dashed var(--border); }
.pp-ab-bar .pp-chips { margin: 0; }
.pp-ab-bar small { color: var(--t2); font-size: 12px; flex-basis: 100%; }
.pp-ab-bar .pp-auto-h { flex: 1 1 260px; margin: 0; }
/* 🪄 Armar con IA (public/pulpo-armar.js) */
.pp-armar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; padding: 10px 12px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--pp-b) 45%, var(--border)); background: color-mix(in srgb, var(--pp-b) 7%, transparent); }
.pp-armar small { flex: 1 1 240px; }
.pp-hoja-armar .pp-hoja-in { width: min(760px, 100%); max-height: 90vh; }
.pp-ar { display: flex; flex-direction: column; gap: 12px; }
.pp-ar-sec { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg); }
.pp-ar-sec > summary { cursor: pointer; font-weight: 600; }
.pp-ar-t small { font-weight: 400; color: var(--t2); }
.pp-ar-cps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pp-ar-cps .pp-chip.on { background: color-mix(in srgb, var(--pp-b) 22%, transparent); border-color: var(--pp-b); }
.pp-ar-cps .pp-chip small { opacity: .7; margin-left: 3px; }
.pp-ar-res { font-size: 13.5px; }
.pp-ar-tira, .pp-ar-ms { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-ar-tira .pp-pm, .pp-ar-ms .pp-pm { width: 52px; height: 52px; }
.pp-ar-que { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.pp-ar-que label, .pp-ar-modo label, .pp-ar-usar { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.pp-ar-modo { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.pp-ar-esc { display: grid; gap: 8px; font-size: 14px; }
.pp-ar-esc label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; cursor: pointer; }
.pp-ar-esc label small { grid-column: 2; }
.pp-ar-esc label:has(input:disabled) { opacity: .6; cursor: default; }
.pp-ar-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-ar-sub { margin: 0; font-size: 13px; }
.pp-ar-mal { color: #f43f5e; font-size: 13px; margin: 0; }
.pp-ar-trab { display: flex; flex-direction: column; gap: 8px; padding: 18px 4px; }
.pp-ar-trab p { margin: 0; }
.pp-ar-barra { height: 8px; border-radius: 99px; background: var(--border); overflow: hidden; }
.pp-ar-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b5cf6, #ec4899); transition: width .4s ease; }
.pp-ar-porque { margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--pp-b) 9%, transparent); font-size: 13.5px; }
.pp-ar-bl { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pp-ar-bl li { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.pp-ar-n { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.pp-ar-tx { flex: 1 1 200px; min-width: 0; font-size: 13.5px; white-space: normal; }
.pp-ar-esp { display: block; color: var(--t2); font-size: 11.5px; margin-bottom: 2px; }
.pp-ar-usar span { min-width: 0; }
.pp-ar-d { padding: 8px 0; border-top: 1px solid var(--border); }
.pp-ar-d:first-of-type { border-top: 0; }
.pp-ar-an { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 13px; }
.pp-ar-an .pp-pm { width: 48px; height: 48px; }
.pp-ar-nuevos { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-ar-nv { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pp-ar-nv .pp-pm { width: 86px; height: 86px; }
/* 📊 Armar embudo con los chats (public/pulpo-embudo.js) */
.pp-em-kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.pp-em-kpi span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); min-width: 0; }
.pp-em-kpi b { font-size: 18px; color: var(--t1); font-variant-numeric: tabular-nums; }
.pp-em-kpi small { font-size: 12px; color: var(--t2); overflow-wrap: anywhere; }
.pp-em-it { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 0; }
.pp-em-it > .pp-ar-tx { flex: none; }   /* (en columna, el «flex: 1 1 200px» de .pp-ar-tx se volvía 200 px de alto) */
.pp-em-pq { margin: 0; font-size: 13px; color: var(--t1); }
.pp-em-l li { display: list-item; }   /* (.pp-ar-bl li es flex: dentro de un bloque las listas se partían) */
.pp-em-f li { display: block; }
.pp-em-f { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--t2); }
.pp-em-f b { display: inline-block; min-width: 30px; margin-right: 4px; padding: 0 5px; border-radius: 6px; text-align: center; color: var(--t1); background: color-mix(in srgb, var(--pp-b) 14%, transparent); font-size: 11.5px; }
.pp-em-l { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.pp-em-usar { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.pp-em-usar > button { align-self: flex-start; }
.pp-em-ex { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; }
.pp-em-ex > span { flex-basis: 100%; }
.pp-em-bar { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; margin: 3px 0; }
.pp-em-bar i { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--pp-b) 12%, transparent); overflow: hidden; }
.pp-em-bar i b { display: block; height: 100%; border-radius: 99px; background: var(--pp-b); }
.pp-em-bar em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--t2); }
.pp-em-t { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 4px 0 10px; display: block; overflow-x: auto; }
.pp-em-t th, .pp-em-t td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.pp-em-t th { color: var(--t2); font-weight: 600; white-space: nowrap; }
.pp-em-t td:not(:first-child) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-em-t td:first-child { overflow-wrap: anywhere; }
.pp-em-t td small { color: var(--t2); }
.pp-em-num > b { display: block; margin-top: 10px; font-size: 13.5px; }
.pp-em-op .pp-acc-i { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pp-em-op .pp-acc-i small { display: block; color: var(--t2); font-size: 12px; }

/* 📣 Campañas (22-oct) */
.pp-cp-res { display: block; margin-top: 6px; }
.pp-cp-est { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(127, 127, 127, .14); }
.pp-cp-enviando { background: rgba(37, 211, 102, .18); }
.pp-cp-pausada { background: rgba(245, 166, 35, .2); }
.pp-cp-barra { height: 6px; border-radius: 3px; background: rgba(127, 127, 127, .18); margin: 6px 0 2px; overflow: hidden; }
.pp-cp-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--pp-a), var(--pp-b)); border-radius: 3px; transition: width .4s ease; }
.pp-cp-nums { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12px; opacity: .9; }
.pp-cp-h { margin: 14px 0 4px; font-size: 14px; }
.pp-cp-pre, .pp-cp-ej pre { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 13px; margin: 4px 0 0; }
.pp-cp-ej { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 8px; }
.pp-cp-ej li { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--pp-b) 8%, transparent); }
.pp-cp-vista { margin-top: 10px; }
.pp-cp-acc { flex-wrap: wrap; gap: 8px; }

/* 🤖 (22-oct) Tablero: una tarjeta por bot (logo, anillo de % de cierre, ventas, valor, clientes y pedidos de su canal) */
.pp-tbb { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pp-tbb-c { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 16px; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: linear-gradient(160deg, color-mix(in srgb, var(--pp-a) 7%, var(--surface)), var(--surface) 55%); border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; min-width: 0; }
.pp-tbb-c:hover, .pp-tbb-c:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--pp-b) 18%, transparent); border-color: color-mix(in srgb, var(--pp-b) 45%, var(--border)); outline: none; }
.pp-tbb-c.top { border-color: color-mix(in srgb, var(--pp-a) 55%, var(--border)); }
.pp-tbb-top { position: absolute; top: -9px; right: 12px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); box-shadow: 0 2px 6px color-mix(in srgb, var(--pp-a) 35%, transparent); }
.pp-tbb-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pp-tbb-logo { width: 42px; height: 42px; box-shadow: 0 3px 10px color-mix(in srgb, var(--pp-b) 30%, transparent); }
.pp-tbb-n { display: flex; flex-direction: column; min-width: 0; }
.pp-tbb-n b { font-size: 16px; font-weight: 800; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-tbb-n small { font-size: 12px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-tbb-m { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pp-tbb-aro { --p: 0; flex: 0 0 84px; width: 84px; height: 84px; border-radius: 50%; display: grid; place-content: center; text-align: center; position: relative;
  background: conic-gradient(from 0deg, var(--pp-a), var(--pp-b) calc(var(--p) * 1%), color-mix(in srgb, var(--t2) 15%, transparent) 0); }
.pp-tbb-aro::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); }
.pp-tbb-aro b, .pp-tbb-aro small { position: relative; }
.pp-tbb-aro b { font-size: 19px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--t1); }
.pp-tbb-aro small { font-size: 11px; color: var(--t2); margin-top: 2px; }
.pp-tbb-k { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; min-width: 0; }
.pp-tbb-k > div { display: flex; flex-direction: column; min-width: 0; }
.pp-tbb-k span { font-size: 11.5px; color: var(--t2); }
.pp-tbb-k b { font-size: 18px; font-weight: 800; color: var(--t1); font-variant-numeric: tabular-nums; line-height: 1.2; }
.pp-tbb-k em { font-style: normal; font-size: 11px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-tbb-d { font-size: 12px; color: var(--t2); border-top: 1px dashed var(--border); padding-top: 8px; }
.pp-tb-anim .pp-tbb-aro { animation: ppTbbAro .9s ease-out both; }
@keyframes ppTbbAro { from { --p: 0; } }
@media (prefers-reduced-motion: reduce) { .pp-tbb-c, .pp-tb-anim .pp-tbb-aro { transition: none; animation: none; } }
@media (max-width: 420px) { .pp-tbb { grid-template-columns: 1fr; } .pp-tbb-aro { flex-basis: 72px; width: 72px; height: 72px; } .pp-tbb-aro b { font-size: 17px; } }
/* 🤖 (22-oct) tarjetas plegables: la flecha abre o cierra; plegada muestra el resumen en una fila. 💸 pauta del canal: inversión, costo por chat, CPA y retorno */
.pp-tbb { align-items: start; }
.pp-tbb-n { flex: 1; }
.pp-tbb-ch { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--t2); cursor: pointer; padding: 0; transition: background .15s ease, color .15s ease; }
.pp-tbb-ch:hover, .pp-tbb-ch:focus-visible { color: var(--t1); background: color-mix(in srgb, var(--pp-b) 12%, var(--surface)); outline: none; }
.pp-tbb-ch svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.pp-tbb-c.abierta .pp-tbb-ch svg { transform: rotate(180deg); }
.pp-tbb-c:not(.abierta) .pp-tbb-cuerpo, .pp-tbb-c.abierta .pp-tbb-res { display: none; }
.pp-tbb-c:not(.abierta) { gap: 10px; }
.pp-tbb-cuerpo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pp-tbb-res { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--t2); }
.pp-tbb-res b { color: var(--t1); font-variant-numeric: tabular-nums; }
.pp-tbb-pill { padding: 2px 9px; border-radius: 999px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); font-variant-numeric: tabular-nums; }
.pp-tbb-p { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding-top: 10px; border-top: 1px dashed var(--border); min-width: 0; }
.pp-tbb-comp { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: var(--t2); }   /* 🤝 canal compartido (23-oct) */
.pp-tbb-p > div { display: flex; flex-direction: column; min-width: 0; }
.pp-tbb-p span { font-size: 11.5px; color: var(--t2); }
.pp-tbb-p b { font-size: 16px; font-weight: 800; color: var(--t1); font-variant-numeric: tabular-nums; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-tbb-p.pp-tbb-sinp { grid-template-columns: 1fr; gap: 2px; }
.pp-tbb-p.pp-tbb-sinp b { font-size: 14px; color: var(--t2); }
.pp-tbb-p em { font-style: normal; font-size: 11px; color: var(--t2); white-space: normal; }
.pp-tbb-cpa.cf-cpa-ok { color: var(--green); } .pp-tbb-cpa.cf-cpa-medio { color: var(--amber); } .pp-tbb-cpa.cf-cpa-mal { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .pp-tbb-ch, .pp-tbb-ch svg { transition: none; } }
/* 📅 (22-oct) los chips de fecha del inicio de Pulso dentro de los filtros del tablero */
#cf-pulpo .pp-tb-filtros .pp-tb-rango { margin: 0; }
#cf-pulpo .pp-tb-rango .cf-hr-chip { padding: 4px 11px; font-size: 12.5px; white-space: nowrap; }
@media (max-width: 640px) { #cf-pulpo .pp-tb-filtros .pp-tb-rango { width: 100%; } }
.pp-blq-pdf { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; cursor: pointer; }   /* 📄 (22-oct) PDF de la guía en un bloque del desencadenador */
#cf-pulpo .pp-kb-pegar { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--amber-bd); }   /* 📋 pegar tabla en el catálogo (22-oct) */

/* ══════════ 🎨 (22-oct) tanda visual de Pulpo: menú por grupos, «Más» con buscador, Vendedor y Organizar en el celular, fotos que cargan, barras de abajo y consistencia ══════════ */
/* 🗂️ menú por grupos (en el computador): un título pequeño encima de cada grupo */
.pp-nav-g { flex-shrink: 0; padding: 12px 12px 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-nav-g.pp-nav-g1 { padding-top: 2px; }
@media (min-width: 760px) { #cf-pulpo .pp-side:has(.pp-nav-g) { gap: 1px; } #cf-pulpo .pp-side:has(.pp-nav-g) .pp-nav { padding-top: 7px; padding-bottom: 7px; gap: 11px; } }
.pp-nav-modo { margin-top: auto; font-size: 12px; font-weight: 600; }
#cf-pulpo .pp-nav-modo .pp-nav-i .cf-ic { width: 17px; height: 17px; }
.pp-nav-modo + .pp-nav-plegar { margin-top: 0; }
.pp-plegado .pp-nav-g { padding: 7px 0 3px; } .pp-plegado .pp-nav-g span { display: none; }
.pp-plegado .pp-nav-g:not(.pp-nav-g1)::before { content: ''; display: block; height: 1px; margin: 0 10px; background: var(--border); }
@media (min-width: 760px) and (max-width: 1100px) {   /* tableta: menú en íconos, los grupos quedan como una rayita */
  .pp-nav-g { padding: 7px 0 3px; } .pp-nav-g span { display: none; }
  .pp-nav-g:not(.pp-nav-g1)::before { content: ''; display: block; height: 1px; margin: 0 10px; background: var(--border); }
  .pp-nav-modo { display: none; }
}
@media (max-width: 759px) { .pp-nav-g, .pp-nav-modo { display: none !important; } }

/* 🗂️ «Más» por grupos: buscador arriba, tarjetas con lo que hace cada sección y las acciones aparte abajo */
.pp-hoja-mas-g .pp-hoja-in { gap: 12px; }
.pp-mas-bus { position: sticky; top: -18px; z-index: 2; margin: -4px -18px 0; padding: 6px 18px 8px; background: var(--surface); }
.pp-mas-bus .cf-input { width: 100%; min-height: 46px; padding-left: 40px; font-size: 15px; border-radius: 14px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a855f7' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 13px center / 19px no-repeat; }
.pp-mas-gs { display: flex; flex-direction: column; gap: 14px; }
.pp-mas-g[hidden], .pp-mas-c[hidden] { display: none !important; }
.pp-mas-g h4 { margin: 0 0 7px 2px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--t2); }
#cf-pulpo .pp-mas-c { container-type: inline-size; display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; row-gap: 1px; align-items: center; min-height: 66px; padding: 10px 10px; text-align: left; }
#cf-pulpo .pp-mas-c > span { grid-row: 1 / 3; display: grid; place-items: center; font-size: 22px; }
#cf-pulpo .pp-mas-c > span .cf-ic { width: 24px; height: 24px; }
/* (23-oct) el nombre nunca se parte con guion («Desencadenadores»): la letra se ajusta al ancho de la tarjeta (11,5–14 px) */
#cf-pulpo .pp-mas-c b { align-self: end; font-size: 14px; font-size: clamp(11.5px, calc((100cqi - 34px) / 9.3), 14px); line-height: 1.2; min-width: 0; hyphens: manual; overflow-wrap: normal; word-break: normal; }
#cf-pulpo .pp-mas-c small { align-self: start; text-align: left; font-size: 11.5px; line-height: 1.3; }
#cf-pulpo .pp-mas-c.on { background: color-mix(in srgb, var(--pp-b) 10%, var(--bg)); }
.pp-mas-nada { margin: 6px 0; color: var(--t2); font-size: 13px; text-align: center; }
.pp-mas-acc { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.pp-mas-a { flex: 1 1 140px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--t2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pp-mas-a:hover { color: var(--t1); background: var(--bg); }
#cf-pulpo .pp-mas-a > .cf-ic { width: 18px; height: 18px; margin: 0; }
#cf-pulpo .pp-mas-a.pp-mas-pulso { flex-basis: 100%; color: var(--t1); background: var(--bg); }
.pp-mas-a.pp-mas-pulso img { border-radius: 7px; }

/* 📱 Vendedor en el celular: General/Seguimientos/Catálogo en 2 columnas (sin cortar) y cada parte del producto se abre y se cierra */
.pp-ps-acc { display: none; }
@media (max-width: 759px) {
  #cf-pulpo .pp-subtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; overflow: visible; }
  #cf-pulpo .pp-subtabs > button { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 6px; white-space: normal; text-align: center; line-height: 1.2; border: 1px solid var(--border); }
  #cf-pulpo .pp-subtabs > button.on { border-color: transparent; }
  #cf-pulpo .pp-subtabs > .pp-subtab-probar { grid-column: 1 / -1; margin-left: 0; }
  #cf-pulpo .pp-pe > .pp-ps-ind { display: none; }
  #cf-pulpo .pp-ps-acc { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 54px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--t1); font: inherit; text-align: left; cursor: pointer; }
  #cf-pulpo .pp-ps-acc b { font-size: 15px; font-weight: 800; }
  #cf-pulpo .pp-ps-acc em { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: var(--bg); color: var(--t2); }
  #cf-pulpo .pp-ps-acc i { font-style: normal; font-size: 12px; font-weight: 800; }
  #cf-pulpo .pp-ps-acc .pp-ps-ok { color: var(--green); } #cf-pulpo .pp-ps-acc .pp-ps-fl { color: var(--amber); }
  #cf-pulpo .pp-ps-acc .pp-plg-chev { margin-left: auto; }
  #cf-pulpo .pp-ps-anc:not(.pp-ps-cerrada) > .pp-ps-acc .pp-plg-chev svg { transform: rotate(180deg); }
  #cf-pulpo .pp-ps-anc.pp-ps-cerrada > .pp-ps-acc .pp-plg-chev svg { transform: rotate(0deg); }
  #cf-pulpo .pp-ps-anc.pp-ps-cerrada > :not(.pp-ps-acc) { display: none !important; }
  #cf-pulpo .pp-ps-anc:not(.pp-ps-cerrada) > .pp-ps-acc { border-color: color-mix(in srgb, var(--pp-b) 40%, var(--border)); }
  #cf-pulpo .pp-ps-anc > .pp-sec:first-of-type > h3:first-child { display: none; }   /* el título ya está en la sección que se abre */
  #cf-pulpo .pp-ps-anc { gap: 10px; }
}

/* 🏷️ Organizar: la lista solo muestra (punto de color + etiqueta) y «Editar» abre la hoja */
.pp-etqs-v { gap: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.pp-etq-v { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px 8px 14px; background: var(--bg); }
.pp-etq-v + .pp-etq-v { border-top: 1px solid var(--border); }
.pp-etq-pt { --c: #64748b; flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.pp-etq-v .pp-etq-c { font-size: 13px; padding: 3px 11px; }
.pp-etq-v .pp-etq-c { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pp-etq-v small { flex-shrink: 0; color: var(--t2); font-size: 11.5px; white-space: nowrap; }
.pp-etq-v .pp-mini { flex-shrink: 0; margin-left: auto; align-self: center; min-height: 36px; padding: 6px 14px; font-size: 12.5px; white-space: nowrap; }
@media (max-width: 520px) { .pp-etq-v small span { display: none; } .pp-etq-v { gap: 8px; padding-left: 12px; } }
.pp-oe-rep { margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-bd); }
.pp-hoja-oe .pp-hoja-in { width: min(460px, 100%); gap: 14px; }
.pp-oe-pal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.pp-oe-col { --c: #64748b; position: relative; aspect-ratio: 1; min-height: 40px; border-radius: 12px; border: 2px solid transparent; background: var(--bg); padding: 5px; cursor: pointer; }
.pp-oe-col i { display: block; width: 100%; height: 100%; border-radius: 8px; background: var(--c); }
.pp-oe-col.on { border-color: var(--t1); }
.pp-oe-col.on i { box-shadow: inset 0 0 0 2px var(--surface); }
.pp-oe-col.pp-oe-usado::after { content: ''; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); border: 2px solid var(--t2); }
.pp-oe-col:focus-visible { outline: 2px solid var(--pp-b); outline-offset: 2px; }
.pp-oe-otro { grid-column: span 2; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 12px; border: 1px dashed var(--border); font-size: 12.5px; color: var(--t2); cursor: pointer; }
.pp-oe-otro input { width: 30px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.pp-oe-prev { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--t2); }
.pp-oe-prev .pp-etq-c { font-size: 13px; padding: 3px 11px; }
.pp-oe-acc .cf-btn { min-height: 44px; }
.pp-oe-peligro { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 10px; padding-top: 14px; border-top: 1px dashed var(--border); }
.pp-oe-peligro small { color: var(--t2); font-size: 12px; }
.pp-oe-peligro .pp-mini { min-height: 36px; padding: 6px 14px; font-size: 12.5px; }
.pp-rap-pie { display: flex; justify-content: flex-end; padding-top: 6px; border-top: 1px dashed var(--border); }
.pp-rap-pie .pp-mini { min-height: 34px; padding: 5px 12px; }
@media (max-width: 420px) { .pp-oe-pal { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pp-oe-otro { grid-column: span 4; justify-content: center; } }

/* 🖼️ fotos y videos del chat mientras cargan: un marcador con su tamaño (antes: una burbuja vacía con la hora) */
.pp-img-w { position: relative; display: block; width: 240px; max-width: 100%; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden;
  background: linear-gradient(110deg, color-mix(in srgb, var(--t2) 10%, transparent) 30%, color-mix(in srgb, var(--t2) 22%, transparent) 50%, color-mix(in srgb, var(--t2) 10%, transparent) 70%) 0 0 / 300% 100%; }
.pp-img-w.pp-img-w-st { width: 130px; aspect-ratio: 1; }
.pp-img-w::before { content: ''; position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.09-3.09a2 2 0 0 0-2.82 0L6 21'/%3E%3C/svg%3E") center / contain no-repeat; }
/* ⚡ (1-nov, vel1) el brillo que pasa mientras carga la foto: antes se animaba background-position (repintaba en cada cuadro); ahora el fondo
   queda quieto y el brillo es un ::after del mismo tamaño que la imagen del degradado (300 %) que se corre con transform. Se ve igual. */
.pp-img-w.pp-img-carga { background: color-mix(in srgb, var(--t2) 10%, transparent); }
.pp-img-w.pp-img-carga::before { z-index: 1; }
.pp-img-w.pp-img-carga:not(.pp-img-mal)::after { content: ''; position: absolute; top: 0; left: 0; width: 300%; height: 100%; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--t2) 13.33%, transparent) 50%, transparent 70%); animation: pp-esqueleto 1.4s ease-in-out infinite; }
.pp-img-w > img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; opacity: 0; }
.pp-img-w.pp-img-mal::after { content: 'No se pudo cargar la foto'; position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 12px; color: var(--t2); }
@keyframes pp-esqueleto { from { transform: translateX(-66.667%); } to { transform: none; } }
.pp-video-w { position: relative; display: block; width: 240px; max-width: 100%; }
.pp-video-w > .pp-video { display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 340px; object-fit: contain; background: color-mix(in srgb, var(--t2) 14%, #000); }
.pp-video-w::after { content: ''; position: absolute; left: 50%; top: 44%; width: 56px; height: 56px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: rgba(0, 0, 0, .45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5.5v13a1 1 0 0 0 1.5.86l10.5-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5z'/%3E%3C/svg%3E") 55% center / 26px no-repeat; }
.pp-video-w.pp-video-on::after { display: none; }
html.cf-quieto .pp-img-w.pp-img-carga, html.cf-quieto .pp-img-w.pp-img-carga::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .pp-img-w.pp-img-carga, .pp-img-w.pp-img-carga::after { animation: none; } }

/* 📱 menos alto abajo en el celular: menú, barra de Guardar y aviso de las 24 h más compactos; los avisos (toasts) salen arriba */
.pp-cerr-c { display: none; }
@media (max-width: 759px) {
  #cf-pulpo .pp-side { padding-top: 2px; }
  #cf-pulpo .pp-nav { padding: 5px 2px 4px; gap: 2px; font-size: 10.5px; }
  #cf-pulpo .pp-nav-i { height: 22px; }
  #cf-pulpo .pp-guardar { padding: 6px 10px; box-shadow: none; }
  #cf-pulpo .pp-guardar .cf-btn { min-height: 40px; padding: 7px 12px; }
  #cf-pulpo .pp-cerrada { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; line-height: 1.3; }
  #cf-pulpo .pp-cerrada[hidden] { display: none; }
  #cf-pulpo .pp-cerr-l { display: none; } #cf-pulpo .pp-cerr-c { display: inline; flex: 1; min-width: 0; }
  #cf-pulpo .pp-cerrada .cf-btn { margin-left: auto; flex-shrink: 0; min-height: 36px; }
  html.pp-abierto .cf-toast { top: calc(10px + env(safe-area-inset-top, 0px)); bottom: auto; transform: translate(-50%, -160%); }
  html.pp-abierto .cf-toast.cf-show { transform: translate(-50%, 0); }
}

/* 🔘 un solo estilo de interruptor y de casilla en Pulpo: el apagado se ve también en el tema claro; las casillas con el color de Pulpo */
#cf-pulpo input[type="checkbox"]:not(.cf-sw), #cf-pulpo input[type="radio"] { accent-color: var(--pp-b); }
.pp-cal-sw input.cf-sw { width: 46px; height: 26px; margin-top: 0; }
html[data-theme="light"] #cf-pulpo .cf-sw:not(:checked) { background: #dfe3ec; border-color: #9aa3b5; }
html[data-theme="light"] #cf-pulpo .cf-sw:not(:checked)::after { box-shadow: 0 1px 3px rgba(15, 23, 42, .35); }
@media (prefers-color-scheme: light) {
  html:not([data-theme]) #cf-pulpo .cf-sw:not(:checked) { background: #dfe3ec; border-color: #9aa3b5; }
  html:not([data-theme]) #cf-pulpo .cf-sw:not(:checked)::after { box-shadow: 0 1px 3px rgba(15, 23, 42, .35); }
}
.pp-numc-sw { display: inline-flex; align-items: center; gap: 6px; }
.pp-numc-sw small { font-size: 11.5px; font-weight: 700; color: var(--t2); }
/* 🔽 un solo botón para plegar: el círculo con flecha de Pulpo también en «¿Cómo…?» y en las tarjetas de Voz (antes el triángulo del navegador) */
#cf-pulpo :is(.pp-det, .pp-ar-sec, .pp-vz-card) > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; }
#cf-pulpo :is(.pp-det, .pp-ar-sec, .pp-vz-card) > summary::-webkit-details-marker { display: none; }
#cf-pulpo :is(.pp-det, .pp-ar-sec, .pp-vz-card) > summary::after { content: ''; flex-shrink: 0; margin-left: auto; width: 24px; height: 24px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--pp-b) 35%, var(--border));
  background: color-mix(in srgb, var(--pp-b) 12%, var(--surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a855f7' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .2s; }
#cf-pulpo :is(.pp-det, .pp-ar-sec, .pp-vz-card)[open] > summary::after { transform: rotate(180deg); }
/* «Plegar todo / Desplegar todo»: un solo botón pequeño a la derecha */
#cf-pulpo .pp-plg-todo { margin: -6px 0 -8px; }
#cf-pulpo .pp-plg-tb { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 10px 3px 4px; border: 0; border-radius: 99px; background: transparent; color: var(--t2); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
#cf-pulpo .pp-plg-tb:hover { color: var(--t1); background: var(--bg); }
#cf-pulpo .pp-plg-tb .pp-plg-chev { margin: 0; width: 22px; height: 22px; } #cf-pulpo .pp-plg-tb .pp-plg-chev svg { width: 13px; height: 13px; transform: rotate(0deg); }
#cf-pulpo .pp-plg-tb .pp-plg-chev.pp-plg-chev-ab svg { transform: rotate(180deg); }
/* 🩹 errores en palabras con el detalle técnico plegado */
.pp-err-det { display: inline; }
.pp-vacio span.pp-err-det { font-size: 13px; line-height: 1.4; }   /* (en los vacíos los span son el ícono grande) */
.pp-err-ver { border: 0; background: transparent; padding: 0 2px; color: var(--pp-d, var(--accent)); font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pp-err-det code { display: block; margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: var(--bg); color: var(--t2); font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }
.pp-err-det code[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { #cf-pulpo :is(.pp-det, .pp-ar-sec, .pp-vz-card) > summary::after { transition: none; } }

/* ══════════ 🎨 Tanda 3 (23-oct): animaciones con un solo interruptor (window.pulsoAnim; respaldo en pulpo.js) ══════════
   Clases en <html>: cf-quieto = todo apagado (o «reducir movimiento») · cf-sin-<categoría> = esa categoría apagada.
   Regla: cada animación nueva de aquí corre SOLO con html:not(.cf-quieto):not(.cf-sin-<su categoría>); solo transform/opacity. */

/* 🎨 el panel «Animaciones» (el mismo de Pulso: general + categorías) dentro del menú 🎨 de Pulpo */
.pp-hoja-an .pp-hoja-in { width: min(520px, 100%); gap: 12px; }
.pp-an { display: flex; flex-direction: column; gap: 8px; }
.pp-an-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.pp-an-cab b { display: block; font-size: 16px; } .pp-an-cab small { display: block; font-size: 12px; color: var(--t2); }
.pp-an-logo { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); box-shadow: 0 8px 22px -10px var(--pp-b); }
.pp-an-logo svg { width: 70%; height: 70%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pp-an .pp-auto-h { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg); align-items: center; }
.pp-an-gen { border-color: color-mix(in srgb, var(--pp-b) 40%, var(--border)) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a) 8%, var(--bg)), color-mix(in srgb, var(--pp-b) 10%, var(--bg))) !important; }
.pp-an-gen b { font-size: 15px; }
.pp-an-l { display: flex; flex-direction: column; gap: 6px; transition: opacity .15s; }
.pp-an-l.pp-an-off { opacity: .5; }
.pp-an-i { display: grid !important; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; }
.pp-an-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; background: color-mix(in srgb, var(--pp-b) 12%, var(--surface)); }
.pp-an-i b { font-size: 14px; } .pp-an-i small { font-size: 12px; line-height: 1.35; }
.pp-an-nota { margin: 0; font-size: 12.5px; color: var(--t2); }
.pp-an-est { flex: 0 0 auto !important; display: grid !important; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 14px !important; }
.pp-an-est > span:first-child { font-size: 20px; } .pp-an-est b { display: block; font-size: 14px; } .pp-an-est small { display: block; font-size: 12px; color: var(--t2); font-weight: 500; }
.pp-an-est > i { font-style: normal; font-size: 20px; color: var(--t2); }

/* ✨ siluetas de carga (pulpo.js → silueta()): la forma de lo que llega; brillan con la categoría «carga» */
#cf-pulpo .pp-sil { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 12px; box-sizing: border-box; --pp-sb: color-mix(in srgb, var(--t2) 16%, transparent); }
.pp-sil-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#cf-pulpo .pp-sil i, #cf-pulpo .pp-sil-m { display: block; background: var(--pp-sb); border-radius: 8px; font-style: normal; }
#cf-pulpo .pp-sil-l { height: 10px; } #cf-pulpo .pp-sil-c { height: 8px; opacity: .7; } #cf-pulpo .pp-sil-g { height: 14px; }
.pp-sil-it { display: flex; align-items: center; gap: 12px; padding: 9px 4px; }
#cf-pulpo .pp-sil-av { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; }
.pp-sil-it > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
#cf-pulpo .pp-sil-h { width: 30px; height: 8px; align-self: flex-start; margin-top: 4px; }
#cf-pulpo .pp-sil-chat { padding: 18px 16px; gap: 12px; }
#cf-pulpo .pp-sil-m { height: 40px; border-radius: 16px; }
#cf-pulpo .pp-sil-in { align-self: flex-start; border-bottom-left-radius: 6px; }
#cf-pulpo .pp-sil-out { align-self: flex-end; border-bottom-right-radius: 6px; background: color-mix(in srgb, var(--pp-b) 15%, transparent); }
#cf-pulpo .pp-sil-card { display: flex; flex-direction: column; gap: 9px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
#cf-pulpo .pp-sil-plana { padding: 4px 0; border: 0; background: none; }
.pp-sil-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#cf-pulpo .pp-sil-hero i { height: 112px; border-radius: 14px; }
.pp-sil-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pp-sil-tabs { display: flex; gap: 8px; overflow: hidden; } #cf-pulpo .pp-sil-tabs i { flex: 0 0 96px; height: 32px; border-radius: 99px; }
.pp-sil-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pp-sil-col { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; border: 1px solid var(--border); }
.pp-sil-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
#cf-pulpo .pp-sil-grid i { aspect-ratio: 1; border-radius: 12px; }
#pp-aj > .pp-sil { max-width: 1100px; margin: 0 auto; padding: 18px 14px; }
@media (max-width: 759px) {
  .pp-sil-hero { grid-template-columns: minmax(0, 1fr); } #cf-pulpo .pp-sil-hero i { height: 78px; } #cf-pulpo .pp-sil-hero i:nth-child(3) { display: none; }
  .pp-sil-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-sil-cols { grid-template-columns: minmax(0, 1fr); } .pp-sil-col:nth-child(n+2) { display: none; }
}
#cf-pulpo .pp-sil::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 25%, var(--pp-sil-luz, rgba(255, 255, 255, .55)) 50%, transparent 75%); }
html[data-theme="dark"] #cf-pulpo .pp-sil { --pp-sil-luz: rgba(255, 255, 255, .07); }
@media (prefers-color-scheme: dark) { html:not([data-theme]) #cf-pulpo .pp-sil { --pp-sil-luz: rgba(255, 255, 255, .07); } }
html:not(.cf-quieto):not(.cf-sin-carga) #cf-pulpo .pp-sil::after { opacity: 1; animation: pp-sil-luz 1.5s ease-in-out infinite; }
@keyframes pp-sil-luz { to { transform: translateX(100%); } }

/* 🫶 pantallas vacías con intención (pulpo.js → vacioInt()): la mascota, qué pasa y el botón de qué hacer */
#cf-pulpo .pp-vi { gap: 6px; padding: 34px 20px; max-width: 400px; }
#cf-pulpo .pp-vi.pp-vi-comp { padding: 22px 16px 18px; }
#cf-pulpo .pp-vi > b { font-size: 16.5px; } #cf-pulpo .pp-vi > small { font-size: 13px; line-height: 1.5; } #cf-pulpo .pp-vi > small b { font-size: inherit; }
#cf-pulpo .pp-vi .cf-btn { margin-top: 8px; }
#cf-pulpo .pp-vi-dib { position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin-bottom: 6px; font-size: 0; }
#cf-pulpo .pp-vi-dib img { position: relative; width: 70px; height: 70px; border-radius: 22px; box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--pp-b) 90%, transparent); }
#cf-pulpo .pp-vi-aro { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pp-b) 22%, transparent), transparent 70%); }
#cf-pulpo .pp-vi-chispa { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px var(--surface); }
#cf-pulpo .pp-vi-chispa::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 900 13px/1 system-ui, sans-serif; }
#cf-pulpo .pp-vi-comp .pp-vi-dib { width: 76px; height: 76px; } #cf-pulpo .pp-vi-comp .pp-vi-dib img { width: 56px; height: 56px; border-radius: 18px; }
html:not(.cf-quieto):not(.cf-sin-ambiente) #cf-pulpo .pp-vi-dib img { animation: pp-vi-entra .6s cubic-bezier(.2, 1.4, .4, 1) both; }
html:not(.cf-quieto):not(.cf-sin-ambiente) #cf-pulpo .pp-vi-aro { animation: pp-vi-aro .9s ease-out both; }
@keyframes pp-vi-entra { from { opacity: 0; transform: translateY(10px) scale(.85) rotate(-6deg); } }
@keyframes pp-vi-aro { from { opacity: 0; transform: scale(.6); } }

/* 🐙 la mascota en el chat con el bot (dentro del interruptor «Bot IA»; no tapa mensajes) */
.pp-bot-sw.pp-bot-sw-m { padding-left: 4px; gap: 7px; }
.pp-masc { position: relative; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: inline-block; background: color-mix(in srgb, var(--pp-b) 16%, var(--surface)); }
.pp-masc img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transform-origin: 50% 80%; }
.pp-masc i { position: absolute; font-style: normal; pointer-events: none; }
.pp-masc-cara { display: none; left: 24%; top: 37%; width: 52%; height: 31%; border-radius: 30%; }
/* seria: lo atiende una persona (ojos y boca rectos, menos color) */
.pp-masc-seria img { filter: grayscale(.6) saturate(.7); transform: scale(.94); }
.pp-masc-seria .pp-masc-cara { display: block; background: linear-gradient(#f5d0fe, #f5d0fe) 22% 40% / 24% 13% no-repeat, linear-gradient(#f5d0fe, #f5d0fe) 78% 40% / 24% 13% no-repeat, linear-gradient(#f5d0fe, #f5d0fe) 50% 82% / 22% 9% no-repeat, #1d1033; }
/* dormida: de 11 p. m. a 6 a. m. (hora de Colombia) si nadie está escribiendo */
.pp-masc-duerme img { filter: saturate(.75) brightness(.9); transform: rotate(-8deg); }
.pp-masc-duerme .pp-masc-cara { display: block; background: linear-gradient(#f0abfc, #f0abfc) 22% 58% / 24% 9% no-repeat, linear-gradient(#f0abfc, #f0abfc) 78% 58% / 24% 9% no-repeat, #1d1033; }
.pp-masc-z { right: -3px; top: -7px; font: 800 9px/1 system-ui, sans-serif; color: var(--pp-d); opacity: .85; }
.pp-masc-z2 { right: -8px; top: -13px; font-size: 7px; opacity: .6; }
/* venta cerrada: feliz con su ✓ */
.pp-masc-venta::after { content: '✓'; position: absolute; right: -3px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; background: #22c55e; color: #fff; font: 900 8.5px/13px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
/* escribiendo: un globito con puntos */
.pp-masc-globo { right: -9px; top: -8px; display: inline-flex; gap: 2px; padding: 3px 4px; border-radius: 8px 8px 8px 2px; background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.pp-masc-globo b { width: 3px; height: 3px; border-radius: 50%; background: var(--pp-b); }
.pp-masc-mini { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; }
html.cf-sin-mascota .pp-masc, html.cf-sin-mascota .pp-masc-mini { display: none; }
html.cf-sin-mascota .pp-bot-sw.pp-bot-sw-m { padding-left: 12px; gap: 9px; }
html:not(.cf-quieto):not(.cf-sin-mascota) .pp-masc-escribe img { animation: pp-masc-bob .9s ease-in-out infinite alternate; }
html:not(.cf-quieto):not(.cf-sin-mascota) .pp-masc-globo b { animation: pp-masc-punto 1s ease-in-out infinite; }
html:not(.cf-quieto):not(.cf-sin-mascota) .pp-masc-globo b:nth-child(2) { animation-delay: .15s; } html:not(.cf-quieto):not(.cf-sin-mascota) .pp-masc-globo b:nth-child(3) { animation-delay: .3s; }
html:not(.cf-quieto):not(.cf-sin-mascota) .pp-masc-z { animation: pp-masc-z 2.6s ease-in-out 3; }
html:not(.cf-quieto):not(.cf-sin-mascota) .pp-masc-z2 { animation-delay: 1.1s; }
html:not(.cf-quieto):not(.cf-sin-mascota) .pp-masc-fiesta img { animation: pp-masc-salto .9s cubic-bezier(.3, 1.5, .5, 1) both; }
html:not(.cf-quieto):not(.cf-sin-mascota) .pp-masc-fiesta.pp-masc-venta::after { animation: pp-masc-ok .5s .55s cubic-bezier(.3, 1.6, .5, 1) both; }
.pp-masc-ch { left: 50%; top: 45%; width: 5px; height: 5px; border-radius: 50%; background: #fbbf24; opacity: 0; }
.pp-masc-ch2 { background: #22c55e; } .pp-masc-ch3 { background: var(--pp-a); }
html:not(.cf-quieto):not(.cf-sin-mascota) .pp-masc-ch { animation: pp-masc-ch 1.1s ease-out both; --x: -15px; --y: -15px; }
html:not(.cf-quieto):not(.cf-sin-mascota) .pp-masc-ch2 { --x: 16px; --y: -12px; }
html:not(.cf-quieto):not(.cf-sin-mascota) .pp-masc-ch3 { --x: 2px; --y: -20px; }
html:not(.cf-quieto):not(.cf-sin-mascota) .pp-escribiendo .pp-masc-mini { animation: pp-masc-bob .9s ease-in-out infinite alternate; }
@keyframes pp-masc-bob { from { transform: translateY(0) rotate(0); } to { transform: translateY(-2px) rotate(-5deg); } }
@keyframes pp-masc-punto { 0%, 70%, 100% { opacity: .35; } 35% { opacity: 1; } }
@keyframes pp-masc-z { 0% { opacity: 0; transform: translate(-2px, 3px) scale(.7); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(3px, -7px) scale(1.1); } }
@keyframes pp-masc-salto { 0% { transform: none; } 30% { transform: translateY(-6px) scale(1.18) rotate(-10deg); } 60% { transform: translateY(0) scale(.96) rotate(7deg); } 80% { transform: scale(1.04) rotate(-3deg); } 100% { transform: none; } }
@keyframes pp-masc-ok { from { opacity: 0; transform: scale(0); } }
@keyframes pp-masc-ch { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); } }
@media (max-width: 759px) {
  .pp-masc { width: 22px; height: 22px; }
  .pp-bot-sw.pp-bot-sw-m { padding: 3px 3px 3px 4px; gap: 5px; }
  html:not(.cf-sin-mascota) .pp-bot-sw.pp-bot-sw-m::before { display: none; }   /* la mascota reemplaza el «IA» */
  html.cf-sin-mascota .pp-bot-sw.pp-bot-sw-m { padding: 3px; gap: 0; }
}

/* 💓 latido: el contador de sin leer late UNA vez cuando llega un mensaje (sin bucle) */
html:not(.cf-quieto):not(.cf-sin-latido) #cf-pulpo .pp-late { animation: pp-late .65s cubic-bezier(.3, 1.6, .5, 1) both; }
html:not(.cf-quieto):not(.cf-sin-latido) #cf-btn-pulpo.pp-hay.pp-late-b::after { animation: pp-late .65s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes pp-late { 0% { transform: scale(1); } 30% { transform: scale(1.4); } 55% { transform: scale(.92); } 75% { transform: scale(1.08); } 100% { transform: scale(1); } }
/* (antes latía sin parar) «Por confirmar» llama la atención 3 veces y se queda quieto */
#cf-pulpo .pp-etapa-conf { animation-iteration-count: 3; }

/* 🎞️ transiciones: sección que entra (≤ 200 ms), chats nuevos que entran a la lista, hojas que suben */
html:not(.cf-quieto):not(.cf-sin-transiciones) #cf-pulpo .pp-sec-entra { animation: pp-sec-entra .18s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pp-sec-entra { from { opacity: .4; transform: translateX(var(--pp-dx, 16px)); } }   /* (desde .4 y no 0: en un equipo lento que tarda en pintar no queda un instante en blanco) */
html:not(.cf-quieto):not(.cf-sin-transiciones) #cf-pulpo .pp-it-entra { animation: pp-it-entra .4s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes pp-it-entra { from { opacity: 0; transform: translateX(-22px); } }
html:not(.cf-quieto):not(.cf-sin-transiciones) #cf-pulpo .pp-hoja-entra { animation: pp-hoja-entra .2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pp-hoja-entra { from { opacity: 0; transform: translateY(14px) scale(.98); } }
/* 👆 (tanda 4) lo que se toca en Pulpo se hunde un poco mientras se presiona, como los botones de Pulso (fluidez.css). Solo `scale` (no pisa
   el transform de cada uno) y solo mientras el dedo está encima. El chat de la lista se hunde menos y no mientras se desliza para archivar. */
html:not(.cf-quieto):not(.cf-sin-transiciones) #cf-pulpo :is(.pp-chip, .pp-x, .pp-pulso, .pp-nuevo-b, .pp-nav, .pp-mas-i, .pp-mas-a, .pp-cab-b, .pp-acc, .pp-enviar,
  .pp-lv, .pp-sug-i, .pp-ped, .pp-fbot, .pp-mm-i, .pp-plt-i, .pp-rap-i, .pp-res-gen, .pp-etapa-b, .pp-hu-b, .pp-num-b):active:not(:disabled) { scale: .94; transition: scale .08s ease-out; }
html:not(.cf-quieto):not(.cf-sin-transiciones) #cf-pulpo .pp-it:not(.pp-it-sw-on):active { scale: .985; transition: scale .08s ease-out; }

/* las de antes, cada una con su categoría */
html.cf-sin-transiciones #cf-pulpo :is(.pp-m-nuevo, .pp-tk-anim, .pp-escribiendo) { animation: none !important; }
html.cf-sin-carga #cf-pulpo :is(.pp-puntos i, .pp-img-carga) { animation: none !important; } html.cf-sin-carga #cf-pulpo .pp-img-carga::after { animation: none !important; }
html.cf-sin-latido #cf-pulpo :is(.pp-etapa-conf, .pp-grab-p, .pp-crm-brillo, .pp-brilla) { animation: none !important; }
html.cf-sin-ambiente #cf-pulpo :is(.pp-tb-anim .pp-tb-ht i, .pp-tb-anim .pp-tbb-aro, .cf-hero-aro, .pp-hero) { animation: none !important; }
html.cf-sin-ambiente #cf-pulpo :is(.cf-hero-aro, .pp-hero)::before, html.cf-sin-ambiente #cf-pulpo :is(.cf-hero-aro, .pp-hero)::after { animation: none !important; }
html.cf-sin-transiciones.pp-abierto .cf-toast { transition: none !important; }
/* 🔕 todo apagado: NADA de Pulpo se mueve (también lo que traen las clases de Pulso adentro: bordes que giran, brillos, etc.) */
html.cf-quieto #cf-pulpo, html.cf-quieto #cf-pulpo *, html.cf-quieto #cf-pulpo *::before, html.cf-quieto #cf-pulpo *::after,
html.cf-quieto #cf-btn-pulpo::after, html.cf-quieto.pp-abierto .cf-toast { animation: none !important; transition: none !important; }
/* ⚡ con Pulpo abierto, Pulso queda tapado detrás: sus animaciones de siempre (logo que late, halo, brillo del inicio… 14 que no paran)
   se pausan mientras tanto y siguen donde iban al volver. Solo se pausan: nada cambia en cómo se ve Pulso. */
html.pp-abierto :is(#cf-app, #cf-panel, #cf-login), html.pp-abierto :is(#cf-app, #cf-panel, #cf-login) *, html.pp-abierto :is(#cf-app, #cf-panel, #cf-login) *::before, html.pp-abierto :is(#cf-app, #cf-panel, #cf-login) *::after { animation-play-state: paused !important; }   /* (el inicio, el panel lateral y el ingreso) */

/* 💳 (23-oct) foto de los datos de pago */
.pp-qr { display: grid; gap: 8px; margin-top: 8px; }
.pp-qr-img { max-width: 180px; max-height: 260px; border-radius: 12px; border: 1px solid var(--border); object-fit: contain; background: #fff; }
.pp-qr-acc { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-qr-subir { cursor: pointer; }
/* ✉️ (24-oct) chats sin abrir: resaltado sutil (fondo verde muy suave, franja fina y nombre en negrita); al abrirlo vuelve a la normalidad */
.pp-it.pp-nuevo { background: color-mix(in srgb, #22c55e 7%, transparent); }
.pp-it.pp-nuevo:not(.pp-it-humano) { box-shadow: inset 3px 0 0 color-mix(in srgb, #22c55e 75%, transparent); }
.pp-it.pp-nuevo:hover { background: color-mix(in srgb, #22c55e 11%, var(--bg)); }
.pp-it.pp-nuevo.on { background: var(--accent-bg); }
.pp-it.pp-nuevo .pp-it-t b { font-weight: 800; }
/* 🚨 (24-oct) «Te están esperando»: el chip con su contador, la barra con «Siguiente ➜», el reloj de cada chat y los vencidos plegados */
.pp-chip-esp b { display: inline-block; min-width: 16px; margin-left: 2px; padding: 0 5px; border-radius: 99px; background: #dc2626; color: #fff; font-size: 10.5px; font-weight: 800; }   /* (27-oct) rojo más fuerte: contraste del número */
.pp-chip-esp.pp-hay:not(.on) { border-color: color-mix(in srgb, var(--red) 55%, transparent); color: var(--red); font-weight: 700; }
.pp-chip-esp.on b { background: #fff; color: var(--red); }
.pp-esp-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 10px 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.pp-esp-n { display: flex; flex-direction: column; flex: 1; min-width: 140px; } .pp-esp-n b { font-size: 13.5px; } .pp-esp-n small { font-size: 11.5px; color: var(--t2); }
.pp-esp-sig { padding: 7px 14px; font-size: 13px; white-space: nowrap; }
.pp-esp-av { white-space: nowrap; }
.pp-reloj { display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px; border-radius: 99px; font-size: 11px; font-weight: 800; line-height: 18px; white-space: nowrap; border: 1px solid transparent; font-variant-numeric: tabular-nums; }
.pp-reloj-verde { background: var(--green-bg); color: var(--green); border-color: var(--green-bd); }
.pp-reloj-ambar { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-bd); }
.pp-reloj-rojo { background: var(--red-bg); color: var(--red); border-color: var(--red-bd); }
.pp-reloj-venc { background: var(--bg); color: var(--t2); border-color: var(--border); font-weight: 700; }
.pp-esp-g { display: flex; align-items: center; gap: 8px; margin: 10px 10px 6px; padding-top: 10px; border-top: 1px dashed var(--border); }
.pp-esp-gt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--t1); font: inherit; text-align: left; cursor: pointer; padding: 4px 2px; }
.pp-esp-gt b { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; white-space: nowrap; flex-shrink: 0; } .pp-esp-gt small { flex: 1; min-width: 0; color: var(--t2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cf-pulpo .pp-esp-gt .pp-plg-chev { margin-left: auto; width: 22px; height: 22px; } #cf-pulpo .pp-esp-gt .pp-plg-chev svg { width: 12px; height: 12px; }
#cf-pulpo .pp-esp-gt[aria-expanded="false"] .pp-plg-chev svg { transform: rotate(0deg); }
.pp-esp-dev { padding: 5px 10px; font-size: 12px; white-space: nowrap; }
#cf-pulpo .pp-cab-sig { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); color: var(--red); }
@media (max-width: 759px) { .pp-esp-bar { margin: 2px 8px 8px; } .pp-esp-sig { flex: 1; } .pp-esp-g small { display: none; } }
/* ✨ (24-oct) IA para la asesora: «✨ Resumen» arriba del chat (plegable) y «✨ Escribir con IA» junto a la caja */
.pp-res { flex-shrink: 0; padding: 8px 14px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--pp-b) 6%, var(--surface)); display: flex; flex-direction: column; gap: 6px; } .pp-res[hidden] { display: none; }
.pp-res-vacio { padding: 5px 14px; background: transparent; }
.pp-res-gen { align-self: flex-start; border: 1px dashed color-mix(in srgb, var(--pp-b) 45%, var(--border)); background: transparent; color: var(--pp-d); border-radius: 99px; padding: 3px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.pp-res-gen:hover { background: color-mix(in srgb, var(--pp-b) 10%, transparent); }
.pp-res-h { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; min-width: 0; } .pp-res-h > b { font-size: 12.5px; white-space: nowrap; }
.pp-res-nuevo { font-size: 10.5px; font-weight: 700; color: var(--amber); white-space: nowrap; }
.pp-res-adel { display: none; flex: 1; min-width: 0; font-size: 12.5px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-res-cerrada .pp-res-adel { display: block; }
.pp-res-re { border: 0; background: transparent; color: var(--t2); font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 8px; cursor: pointer; margin-left: auto; } .pp-res-re:hover { background: var(--bg); color: var(--t1); }
.pp-res-cerrada .pp-res-adel + .pp-res-re, .pp-res-h .pp-res-adel + .pp-res-re { margin-left: 0; }
#cf-pulpo .pp-res-h .pp-plg-chev { width: 24px; height: 24px; } #cf-pulpo .pp-res-h .pp-plg-chev svg { width: 13px; height: 13px; }
#cf-pulpo .pp-res-cerrada .pp-plg-chev svg { transform: rotate(0deg); }
.pp-res-c { font-size: 12px; color: var(--t2); margin: 0; }
.pp-res-cerrada > :not(.pp-res-h) { display: none !important; }
.pp-res-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pp-res-l li { display: grid; grid-template-columns: 84px 1fr; gap: 8px; font-size: 13px; line-height: 1.35; } .pp-res-l b { font-size: 12px; color: var(--t2); white-space: nowrap; }
.pp-res-viejo .pp-res-l { opacity: .7; }
#cf-pulpo .pp-ia-esc { color: var(--pp-d); }
#cf-pulpo .pp-ia-carga { animation: pp-ia-late 1s ease-in-out infinite; }
@keyframes pp-ia-late { 50% { opacity: .35; } }
html.cf-quieto #cf-pulpo .pp-ia-carga { animation: none; opacity: .5; }
#cf-pulpo #pp-txt.pp-txt-ia { border-color: color-mix(in srgb, var(--pp-b) 60%, var(--border)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pp-b) 16%, transparent); }
@media (max-width: 759px) { .pp-res { padding: 6px 10px; } .pp-res-l li { grid-template-columns: 74px 1fr; font-size: 12.5px; } }
/* 👀 (24-oct) Supervisor: el equipo hoy y chats en riesgo (mismas piezas del 📊 Tablero) */
.pp-sv-top { justify-content: space-between; }
.pp-sv-tit { font-size: 16px; color: var(--t1); }
.pp-sv-hace { font-size: 12px; color: var(--t2); margin-right: auto; }
.pp-sv-tiles .pp-tb-tile b { font-size: 20px; }
.pp-sv-tiles .pp-tb-tile b .pp-reloj { font-size: 15px; line-height: 24px; padding: 1px 9px; }
.pp-sv-tiles .pp-sv-alerta { border-color: var(--red-bd); background: var(--red-bg); }
.pp-sv-tiles .pp-sv-alerta b { color: var(--red); }
.pp-sv-ir.pp-mini { display: inline-block; margin-left: 4px; padding: 1px 9px; }
.pp-sv-tabla table { min-width: 0; }
.pp-sv-tabla td:first-child { min-width: 120px; }
.pp-sv-nd { color: var(--t2); }
.pp-sv-lenta { color: var(--red); }
.pp-sv-rs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.pp-sv-r { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); min-width: 0; }
.pp-sv-rt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pp-sv-rt b { color: var(--t1); font-size: 14px; overflow-wrap: anywhere; }
.pp-sv-rt small { color: var(--t2); font-size: 11.5px; }
.pp-sv-rh { margin-left: auto; }
.pp-sv-rm { display: flex; flex-wrap: wrap; gap: 4px; }
.pp-sv-m { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--amber-bd); background: var(--amber-bg); color: var(--amber); }
.pp-sv-m-molesto, .pp-sv-m-persona { border-color: var(--red-bd); background: var(--red-bg); color: var(--red); }
.pp-sv-rd { margin: 0; font-size: 12.5px; color: var(--t2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pp-sv-r .pp-sv-ir { align-self: flex-start; }
@media (max-width: 759px) {
  .pp-sv-tabla { overflow: visible; }
  .pp-sv-tabla table, .pp-sv-tabla tbody, .pp-sv-tabla tr, .pp-sv-tabla td { display: block; width: 100%; }
  .pp-sv-tabla thead { display: none; }
  .pp-sv-tabla tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .pp-sv-tabla td { border: 0; padding: 0; text-align: left !important; }
  .pp-sv-tabla td:first-child { grid-column: 1 / -1; min-width: 0; }
  .pp-sv-tabla td:not(:first-child)::before { content: attr(data-l); display: block; font-size: 11px; color: var(--t2); font-weight: 700; }
  .pp-sv-rs { grid-template-columns: 1fr; }
  .pp-sv-r .pp-sv-ir { align-self: stretch; }
}
/* ⚡ (24-oct) paleta «/»: respuestas rápidas, fotos, videos, disparadores, datos de pago y guía (siempre justo arriba de la caja) */
.pp-pop[data-q="rap"] { bottom: var(--pp-pop-b, 70px); max-height: min(320px, 46dvh); }
.pp-pal { display: flex; flex-direction: column; gap: 4px; }
.pp-pal-i { min-height: 40px; }
.pp-pal-i > i { font-style: normal; flex-shrink: 0; width: 20px; text-align: center; }
.pp-pal-i > b { flex-shrink: 0; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-pal-i > small { flex-shrink: 0; white-space: nowrap; }
.pp-pal-i.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.pp-pal-c { color: var(--t2); font-size: 12px; padding: 2px 4px; }
/* 📱 (24-oct) deslizar un chat de la lista: ✉️ No leído y 🗄️ Archivar (el chat se corre; nada se sale de la página) */
#pp-chats .pp-it { touch-action: pan-y pinch-zoom; }
.pp-it.pp-it-sw-on { overflow: hidden; }
.pp-it.pp-it-sw-on > :not(.pp-it-sw):not(.pp-it-acc) { transform: translateX(var(--sw, 0px)); transition: transform .2s ease; }
.pp-it-sw { position: absolute; top: 0; right: 0; bottom: 0; width: 168px; display: flex; transform: translateX(calc(168px + var(--sw, 0px))); transition: transform .2s ease; }
.pp-it.pp-it-swm > *, .pp-it.pp-it-swm > .pp-it-sw { transition: none !important; }
html.cf-quieto .pp-it.pp-it-sw-on > *, html.cf-quieto .pp-it-sw { transition: none !important; }
.pp-it-sw i { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-style: normal; font-size: 18px; color: #fff; cursor: pointer; }
.pp-it-sw i b { font-size: 11.5px; font-weight: 700; }
.pp-it-sw [data-pp-la="no-leido"] { background: #2563eb; }
.pp-it-sw [data-pp-la="archivar"] { background: #64748b; }
.pp-esp-son { white-space: nowrap; }
.pp-son-esp { margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
/* 🤖 (24-oct) filtro de bots en pastillas con su loguito y un color fijo por bot (en el celular la fila se desliza de lado) */
.pp-fbots { display: flex; gap: 6px; padding: 0 10px 8px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; max-width: 100%; min-width: 0; }
.pp-fbots[hidden] { display: none; }
.pp-fbots::-webkit-scrollbar { display: none; }
.pp-fbot { --c: var(--accent); flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 3px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--t1); font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.pp-fbot img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: color-mix(in srgb, var(--c) 20%, var(--bg)); box-shadow: 0 0 0 2px var(--c); }
.pp-fbot.pp-fbot-t { padding-left: 9px; }
.pp-fbot > i { font-style: normal; }
.pp-fbot span { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.pp-fbot:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--border)); }
.pp-fbot.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 15%, var(--surface)); color: var(--t1); box-shadow: inset 0 0 0 1px var(--c); }
.pp-fbot:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.pp-lista-act { margin: 0 10px 6px; font-size: 12px; color: var(--t2); }
@media (max-width: 759px) { .pp-fbots { padding: 0 8px 8px; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); } }
@media (min-width: 760px) { .pp-fbots { flex-wrap: wrap; overflow: visible; } }
/* 🎯 (24-oct) respuestas sugeridas con botones encima de la caja: se tocan y quedan en la caja (las de ➤ se envían con confirmación) */
.pp-sb { padding: 8px 14px 6px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--pp-b) 6%, var(--surface)); display: flex; flex-direction: column; gap: 6px; } .pp-sb[hidden] { display: none; }
.pp-sb-h { display: flex; align-items: center; gap: 8px; min-width: 0; } .pp-sb-h b { font-size: 12.5px; white-space: nowrap; }
.pp-sb-h small { flex: 1; min-width: 0; font-size: 11.5px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-sb-x { flex-shrink: 0; margin-left: auto; width: 26px; height: 26px; border-radius: 99px; border: 0; background: transparent; color: var(--t2); cursor: pointer; font: inherit; font-size: 13px; } .pp-sb-x:hover { background: var(--accent-bg); color: var(--t1); }
.pp-sb-l { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-sb-b { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 34px; padding: 6px 12px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--pp-b) 35%, var(--border)); background: var(--bg); color: var(--t1); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.pp-sb-b span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pp-sb-b i { font-style: normal; flex-shrink: 0; }
.pp-sb-b small { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--pp-b); }
.pp-sb-b:hover, .pp-sb-b:focus-visible { border-color: var(--pp-b); background: color-mix(in srgb, var(--pp-b) 10%, var(--surface)); outline: none; }
.pp-sb-env { border-style: dashed; }
/* ⚡ (1-nov, vel1) mismo brillo que antes (background-position en bucle), ahora con transform: el degradado vive en un ::after de 4 veces el
   ancho, con sus baldosas en el mismo lugar, que se corre hacia la derecha lo mismo que corría el fondo (2 anchos por vuelta) */
.pp-sb-c { position: relative; overflow: hidden; display: inline-block; width: 150px; height: 32px; border-radius: 99px; }
.pp-sb-c::after { content: ''; position: absolute; top: 0; left: -200%; width: 400%; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, var(--accent-bg), color-mix(in srgb, var(--pp-b) 12%, var(--surface)), var(--accent-bg)) 0 0 / 50% 100%; animation: pp-sb-c 1.4s linear infinite; }
@keyframes pp-sb-c { to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .pp-sb-c, .pp-sb-c::after { animation: none; } } html.cf-sin-carga .pp-sb-c::after { animation: none !important; }
@media (max-width: 759px) {
  .pp-sb { padding: 6px 10px 4px; } .pp-sb-h small { display: none; }
  .pp-sb-l { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .pp-sb-l::-webkit-scrollbar { display: none; }
  .pp-sb-b { flex-shrink: 0; max-width: 78vw; }
}

/* 〰️ (tanda 4) el aviso «Guardando… / Guardado» de arriba (guia.js) ahora sale también al guardar en Pulpo. En el celular Pulpo pone sus
   mensajes arriba: el aviso baja a debajo de la cabecera para no taparlos ni tapar los botones */
@media (max-width: 759px) { html.pp-abierto .cf-guardado { top: calc(env(safe-area-inset-top, 0px) + 70px); } }
/* 📎 (25-oct) fotos o videos de confianza que van con los datos de pago */
.pp-pago-extra { display: grid; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border); }
/* 💳 (25-oct) pagos adelantados sin confirmar: el filtro «Por pagar» y el aviso en cada chat (rojo cuando lleva 3 días o más esperando) */
.pp-chip-pago-f b { display: inline-block; min-width: 16px; margin-left: 2px; padding: 0 5px; border-radius: 99px; background: #10b981; color: #022c22; font-size: 10.5px; }
.pp-chip-pago-f.pp-hay:not(.on) { border-color: color-mix(in srgb, #10b981 60%, transparent); color: #10b981; }
.pp-chip-pago { color: #10b981; border-color: color-mix(in srgb, #10b981 45%, transparent); font-weight: 700; }
.pp-chip-pago.pp-chip-pago-ya { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
/* ✅ (25-oct) pagos adelantados ya confirmados (7 días) */
.pp-chip-pagados-f b { display: inline-block; min-width: 16px; margin-left: 2px; padding: 0 5px; border-radius: 99px; background: var(--border); color: var(--text); font-size: 10.5px; }
.pp-chip-pagado { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
/* 🧭 (25-oct) embudo vivo de hoy arriba de la lista de Chats: franja delgada (Llegaron › Respondieron › Dieron datos › Compraron) que se
   despliega; en el celular el desplegado flota encima de la lista para no empujarla. Animación: solo Transiciones, opacity/transform. */
#cf-pulpo .pp-emb { position: relative; flex-shrink: 0; padding: 0 10px 8px; container-type: inline-size; }
#cf-pulpo .pp-emb[hidden] { display: none; }
#cf-pulpo .pp-emb-tg { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 30px; padding: 3px 4px 3px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--t1); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
#cf-pulpo .pp-emb-tg:disabled { cursor: default; }
#cf-pulpo .pp-emb-tg:hover:not(:disabled) { border-color: color-mix(in srgb, var(--pp-b) 45%, var(--border)); }
#cf-pulpo .pp-emb-tg > b { flex-shrink: 0; font-weight: 800; white-space: nowrap; max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
#cf-pulpo .pp-emb-bot { font-weight: 700; color: var(--t2); }
#cf-pulpo .pp-emb-nums { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-variant-numeric: tabular-nums; }
#cf-pulpo .pp-emb-nums i { font-style: normal; font-weight: 400; color: var(--t2); margin: 0 4px; }
#cf-pulpo .pp-emb-cal { font-weight: 600; color: var(--t2); }
#cf-pulpo .pp-emb-tg > em { flex-shrink: 0; font-style: normal; font-size: 11px; font-weight: 800; color: var(--green); white-space: nowrap; }
#cf-pulpo .pp-emb-tg .pp-plg-chev { margin-left: 0; width: 22px; height: 22px; } #cf-pulpo .pp-emb-tg .pp-plg-chev svg { width: 13px; height: 13px; transform: rotate(0deg); }
#cf-pulpo .pp-emb-on .pp-emb-tg .pp-plg-chev svg { transform: rotate(180deg); }
#cf-pulpo .pp-emb-panel { display: none; }
#cf-pulpo .pp-emb-on .pp-emb-panel { display: block; margin-top: 6px; }
#cf-pulpo .pp-emb-l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
#cf-pulpo .pp-emb-e { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 5px 4px 6px 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--t1); font: inherit; text-align: left; }
#cf-pulpo button.pp-emb-e { cursor: pointer; } #cf-pulpo button.pp-emb-e:hover, #cf-pulpo button.pp-emb-e.on { border-color: var(--pp-b); background: color-mix(in srgb, var(--pp-b) 10%, var(--bg)); }
#cf-pulpo .pp-emb-e > b { display: flex; align-items: baseline; gap: 4px; font-size: 16px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
#cf-pulpo .pp-emb-e > b > em { font-style: normal; font-size: 10px; font-weight: 800; color: var(--t2); overflow: hidden; text-overflow: ellipsis; }
#cf-pulpo .pp-emb-e > small { font-size: 10px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cf-pulpo button.pp-emb-e > small::after { content: ' ›'; color: var(--pp-b); font-weight: 800; }
#cf-pulpo .pp-emb-b { display: block; height: 4px; margin-top: 4px; border-radius: 99px; background: var(--border); overflow: hidden; }
#cf-pulpo .pp-emb-b > i { display: block; height: 100%; border-radius: inherit; transform-origin: 0 50%; background: var(--pp-b); }
#cf-pulpo .pp-emb-datos .pp-emb-b > i { background: var(--amber); } #cf-pulpo .pp-emb-compraron .pp-emb-b > i { background: var(--green); }
#cf-pulpo .pp-emb-pie { display: block; margin-top: 4px; font-size: 10.5px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cf-pulpo .pp-emb-ir { border: 0; padding: 0; background: none; color: var(--pp-b); font: inherit; font-weight: 800; cursor: pointer; }
@container (max-width: 300px) {   /* lista angosta (computador de 760 a 1279 px): sin el % dentro de cada etapa (queda al pasar el mouse) */
  #cf-pulpo .pp-emb-e > b > em, #cf-pulpo .pp-emb-tg > em > span { display: none; }
  #cf-pulpo .pp-emb-e { padding: 5px 3px 6px 5px; } #cf-pulpo .pp-emb-e > small { font-size: 9.5px; } #cf-pulpo .pp-emb-pie { white-space: normal; }
}
@media (max-width: 759px) {
  #cf-pulpo .pp-emb { padding: 0 8px 8px; }
  #cf-pulpo .pp-emb-on .pp-emb-panel { position: absolute; z-index: 6; top: calc(100% - 4px); left: 8px; right: 8px; margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55); }
  #cf-pulpo .pp-emb-e > b { font-size: 15px; }
}
html:not(.cf-quieto):not(.cf-sin-transiciones) #cf-pulpo .pp-emb-anim .pp-emb-panel { animation: pp-emb-entra .2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pp-emb-entra { from { opacity: .3; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { #cf-pulpo .pp-emb-anim .pp-emb-panel { animation: none; } #cf-pulpo .pp-emb-tg .pp-plg-chev svg { transition: none; } }
/* 🌡️ (25-oct) termómetro de cada chat: aro de 2,5 px alrededor del avatar que se llena ¼ (frío), ½ (tibio), ¾ (caliente) o completo (listo).
   Colores que se leen en claro y en oscuro. Quieto (sin animación); no tapa el punto de la ventana de 24 h ni el ⛔/⏸️ de arriba (van encima). */
#cf-pulpo .pp-tm { position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; --tp: 25; --tm: #0ea5e9;
  background: conic-gradient(var(--tm) calc(var(--tp) * 1%), color-mix(in srgb, var(--tm) 16%, transparent) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }
#cf-pulpo .pp-tm-frio { --tp: 25; --tm: #0ea5e9; } #cf-pulpo .pp-tm-tibio { --tp: 50; --tm: #eab308; }
#cf-pulpo .pp-tm-caliente { --tp: 75; --tm: #f97316; } #cf-pulpo .pp-tm-listo { --tp: 100; --tm: #22c55e; }
#cf-pulpo .pp-av .pp-v, #cf-pulpo .pp-av .pp-av-off { z-index: 1; }
/* 🎯 (25-oct) franja del cliente arriba del chat abierto: una sola línea (huella · producto · último precio · etapa · pago) que abre la ficha */
#cf-pulpo .pp-cli { flex-shrink: 0; padding: 4px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
#cf-pulpo .pp-cli[hidden] { display: none; }
#cf-pulpo .pp-cli-b { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 26px; padding: 0; border: 0; background: none; color: var(--t1); font: inherit; font-size: 12px; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; }
#cf-pulpo .pp-cli-b > span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#cf-pulpo .pp-cli-b > span + span:not(.pp-cli-ir)::before { content: '·'; margin-right: 6px; color: var(--t2); }
#cf-pulpo .pp-cli-hu { flex-shrink: 0 !important; } #cf-pulpo .pp-cli-hu .pp-hu-mini { margin-left: 0; }
#cf-pulpo .pp-cli-p { flex-shrink: 3 !important; font-weight: 700; }
#cf-pulpo .pp-cli-pr { flex-shrink: 0 !important; font-weight: 800; font-variant-numeric: tabular-nums; }
#cf-pulpo .pp-cli-et { font-weight: 700; color: var(--t2); }
#cf-pulpo .pp-cli-et i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--c); vertical-align: 1px; }
#cf-pulpo .pp-cli-pg { flex-shrink: 0 !important; font-weight: 800; }
#cf-pulpo .pp-cli-pg-debe { color: #10b981; } #cf-pulpo .pp-cli-pg-ok { color: var(--green); }
#cf-pulpo .pp-cli-ir { flex-shrink: 0 !important; margin-left: auto; padding-left: 4px; font-size: 16px; font-weight: 800; color: var(--pp-b); }
#cf-pulpo .pp-cli-b:hover .pp-cli-ir, #cf-pulpo .pp-cli-b:focus-visible .pp-cli-ir { color: var(--pp-a); }
#cf-pulpo .pp-cli-et b { font-weight: inherit; }
@media (min-width: 760px) { #cf-pulpo .pp-cli-hu { display: none; } #cf-pulpo .pp-cli-b > .pp-cli-hu + span:not(.pp-cli-ir)::before { content: none; } }   /* en pantallas anchas la huella completa ya va junto al nombre */
@media (max-width: 759px) {   /* celular: la etapa queda en su punto de color (el nombre está al tocar, en «Pedidos y acciones») para que quepan producto, precio y pago */
  #cf-pulpo .pp-cli { padding: 3px 10px; } #cf-pulpo .pp-cli-b { font-size: 11.5px; gap: 4px; } #cf-pulpo .pp-cli-b > span + span:not(.pp-cli-ir)::before { margin-right: 4px; }
  #cf-pulpo .pp-cli-et { flex-shrink: 0 !important; } #cf-pulpo .pp-cli-et b { display: none; } #cf-pulpo .pp-cli-et i { margin-right: 0; width: 8px; height: 8px; }
}
/* 🔥 (25-oct) chats calientes: el filtro y el aviso en cada chat (rojo cuando le quedan 3 h o menos de ventana) */
.pp-chip-cal-f b { display: inline-block; min-width: 16px; margin-left: 2px; padding: 0 5px; border-radius: 99px; background: #f97316; color: #2a1200; font-size: 10.5px; }
.pp-chip-cal-f.pp-hay:not(.on) { border-color: color-mix(in srgb, #f97316 60%, transparent); color: #fb923c; }
.pp-chip-cal { color: #fb923c; border-color: color-mix(in srgb, #f97316 45%, transparent); font-weight: 700; }
.pp-chip-cal.pp-chip-cal-ya { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, transparent); }
/* 📞 (25-oct) botón de llamar: resalta cuando el cliente ya hizo 3 preguntas o más */
.pp-cab-llamar-ya { color: #22c55e; border-color: color-mix(in srgb, #22c55e 55%, transparent); }
.pp-llamar-acc { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.pp-llamar-acc .cf-btn { text-decoration: none; }

/* ═══ 📊 (25-oct) Tablero igual al inicio de Pulso: mismas columnas, tamaños y disposición de las tres tarjetas (las reglas de #cf-envivo) ═══ */
#cf-pulpo .pp-hero-r { overflow: hidden; }
#cf-pulpo .pp-hero-r > :not(.ae-fondo-graf) { position: relative; z-index: 1; }
#cf-pulpo .pp-hero-r .cf-cpa { background: color-mix(in srgb, var(--cpa) 7%, var(--surface)); }   /* 🎨 (26-oct) opaco, como en el inicio de Pulso: la curva de fondo le pasaba por encima al texto del CPA */
#cf-pulpo .pp-hero-l, #cf-pulpo .pp-hero-r, #cf-pulpo .pp-hero-g { container-type: inline-size; }
#cf-pulpo .pp-hero-l .cf-hero-num, #cf-pulpo .pp-hero-l .cf-hero-num2 { font-size: clamp(30px, 17cqi, 76px); line-height: 1; }
#cf-pulpo .pp-hero-r .cf-hero-money { font-size: clamp(24px, 12.5cqi, 46px); }
#cf-pulpo .pp-hero-g .cf-hero-gan { font-size: clamp(24px, 12.5cqi, 46px); }
#cf-pulpo .pp-hero .cf-hero-duo { flex-wrap: nowrap; min-width: 0; } #cf-pulpo .pp-hero .cf-hero-duo-it { min-width: 0; }
#cf-pulpo .pp-hero .cf-hg-vivo { margin-left: 8px; }
#cf-pulpo .pp-hero-g .cf-hero-lbl { display: flex; align-items: center; }
@media (min-width: 901px) {
  #cf-pulpo .pp-hero { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 14px; }
  #cf-pulpo .pp-hero-solo { grid-template-columns: minmax(0, 1fr); }
  #cf-pulpo .pp-hero-l, #cf-pulpo .pp-hero-r, #cf-pulpo .pp-hero-g { display: flex; flex-direction: column; padding: 18px 20px; }
  #cf-pulpo .pp-hero-l .cf-hero-spark { margin-top: auto; padding-top: 12px; } #cf-pulpo .pp-hero-l .cf-hero-spark-b { height: 54px; }
  #cf-pulpo .pp-hero-r .pp-hero-cpa { margin-top: auto; }
  #cf-pulpo .pp-hero-g .cf-hg-nota { margin-top: auto; }
}
/* 📱 filtros: el país y el período en una fila cada uno (se deslizan de lado) y el bot, la fecha y los botones abajo, sin cortarse */
@media (max-width: 640px) {
  #cf-pulpo .pp-tb-filtros { gap: 6px; }
  #cf-pulpo .pp-tb-filtros .pp-tb-rango, #cf-pulpo .pp-tb-filtros .pp-tb-pais { flex: 1 1 100%; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; }
  #cf-pulpo .pp-tb-filtros .pp-tb-rango::-webkit-scrollbar, #cf-pulpo .pp-tb-filtros .pp-tb-pais::-webkit-scrollbar { display: none; }
  #cf-pulpo .pp-tb-filtros .cf-hr-chip { flex: 0 0 auto; }
  #cf-pulpo .pp-tb-fecha { flex-basis: auto; order: 3; }
  #cf-pulpo .pp-tb-filtros .pp-tb-bot { order: 4; flex: 1 1 0; min-width: 0; width: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
  #cf-pulpo .pp-tb-fil-d { order: 5; flex: 0 0 auto; margin-left: 0; }
  #cf-pulpo .pp-tb-fil-d .pp-mini { padding: 7px 10px; }
}
/* 🎨 (26-oct) Biblioteca: el título arriba y la explicación debajo (antes la explicación salía antes del título); en la raíz el nombre ya no se repite en la barra */
#cf-pulpo .pp-sec-bib .pp-bx-migas > b.pp-bx-aqui:only-child { display: none; }
/* 🎨 (26-oct) Vendedor en el celular: «🤖 Automático» se partía en dos líneas (el ícono arriba) y los otros no: los tres en una línea */
#cf-pulpo .pp-seg > button { white-space: nowrap; }
@media (max-width: 420px) { #cf-pulpo .pp-bt-top .pp-seg > button { padding: 6px 7px; font-size: 12px; } }
/* 🎨 (26-oct) computador grande: la lista de chats más ancha (los filtros ocupan menos filas y se ven más chats; el chat abierto sigue con espacio de sobra) */
@media (min-width: 1360px) { .pp-body { grid-template-columns: 400px minmax(0, 1fr); } .pp-body.pp-con-ficha { grid-template-columns: 380px minmax(0, 1fr) 300px; } }
/* 🎨 (26-oct) Campañas: ajustes en filas (nombre · casilla) */
#cf-pulpo .pp-dz-aj { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 6px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
#cf-pulpo .pp-dz-aj-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; font-size: 13px; color: var(--t1); background: var(--bg); }
#cf-pulpo .pp-dz-aj-f > span:first-child { min-width: 0; } #cf-pulpo .pp-dz-aj-f small { color: var(--t2); font-size: 11.5px; }
#cf-pulpo .pp-dz-aj-c { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
#cf-pulpo .pp-dz-aj-c .cf-input.pp-dz-num { flex: 0 0 64px; width: 64px; min-height: 36px; padding: 4px 8px; text-align: center; }
#cf-pulpo .pp-dz-aj-c select.cf-input { width: auto; min-height: 36px; padding: 4px 26px 4px 10px; }
@media (max-width: 480px) { #cf-pulpo .pp-dz-aj-f:has(select) { flex-wrap: wrap; } }
/* 🔞 (26-oct) fotos obscenas: pixeladas con 👁️ para abrirlas; mientras se revisan, borrosas */
#cf-pulpo .pp-sens { position: relative; display: inline-block; border-radius: 12px; overflow: hidden; max-width: 100%; }
#cf-pulpo .pp-sens-si img, #cf-pulpo .pp-sens-rev img { filter: blur(28px) saturate(.6); transform: scale(1.15); }
#cf-pulpo .pp-sens-si > a, #cf-pulpo .pp-sens-rev > a { pointer-events: none; }
#cf-pulpo .pp-sens-si::after { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(rgba(0,0,0,.18) 0 25%, rgba(255,255,255,.06) 0 50%) 0 0 / 18px 18px; pointer-events: none; }
#cf-pulpo .pp-sens-b { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; cursor: pointer; color: #fff; font: inherit; background: rgba(10, 6, 20, .35); }
#cf-pulpo .pp-sens-b b { font-size: 14px; } #cf-pulpo .pp-sens-b span { font-size: 12.5px; padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.18); }
#cf-pulpo .pp-sens-b:focus-visible { outline: 2px solid var(--pp-b); outline-offset: -4px; }
#cf-pulpo .pp-sens-rv { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2; font-size: 12px; color: #fff; padding: 4px 10px; border-radius: 99px; background: rgba(10, 6, 20, .55); white-space: nowrap; }
#cf-pulpo .pp-sens-mini { position: relative; overflow: hidden; } #cf-pulpo .pp-sens-mini img { filter: blur(18px); transform: scale(1.2); }
#cf-pulpo .pp-sens-mini::after { content: "🔞 👁️"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; background: rgba(10, 6, 20, .35); }

/* ── 🌙 (27-oct) tanda de interfaz ──
   Filtros y bots de la lista en una sola fila que se desliza también en el computador (antes ocupaban 5–7 filas y se veían ~5 chats);
   la rueda del mouse los desliza de lado (pulpo.js). Con «Más filtros» abiertos sí bajan, como antes. */
@media (min-width: 760px) {
  #cf-pulpo .pp-filtros:not(:has(.pp-mas-f)) { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; scroll-behavior: smooth; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  #cf-pulpo .pp-filtros:not(:has(.pp-mas-f))::-webkit-scrollbar { display: none; }
  #cf-pulpo .pp-filtros > * { flex-shrink: 0; }
  #cf-pulpo .pp-fbots { flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  #cf-pulpo .pp-fbots > * { flex-shrink: 0; }
}
/* La caja de escribir: si el chat queda angosto (ficha abierta, pantalla mediana), los íconos de adjuntar, plantilla, estructura y nota pasan
   al botón ➕ como en el celular y la caja queda ancha (antes el texto de ayuda se partía en dos líneas). */
#pp-form { container-type: inline-size; container-name: ppform; }
@container ppform (max-width: 640px) {
  .pp-acc-x { display: none; }
  .pp-acc-mas { display: inline-block; }
}

/* ── 👀 (27-oct) chats claros en la lista: etapa, monto y espera de un vistazo ──
   La etapa va siempre primero en la fila de chips (antes podía quedar escondida en «+N»), el monto en negrita con cifras fijas y,
   arriba a la derecha, cuánto lleva esperando el cliente si lo último lo escribió él: en color si espera a una persona, gris si lo
   atiende el vendedor. Sin filas nuevas: todo cabe en las mismas tres líneas. */
#cf-pulpo .pp-it-chips { align-items: center; }
#cf-pulpo .pp-it-chips > .pp-etapa-c, #cf-pulpo .pp-it-chips > .pp-it-urg { flex-shrink: 0; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cf-pulpo .pp-it-monto { flex-shrink: 0; max-width: none; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--t1); font-variant-numeric: tabular-nums; letter-spacing: -.01em; padding: 0 2px; }
#cf-pulpo .pp-it-chips > .pp-it-urg { max-width: 64%; min-width: 0; flex-shrink: 1; }   /* (lo urgente cede antes que el monto y el «+N», con «…») */
#cf-pulpo .pp-it-chips > :is(.pp-etapa-c, .pp-it-urg) + .pp-it-monto::before { content: '·'; margin-right: 5px; color: var(--t2); font-weight: 400; }
#cf-pulpo .pp-it-d { min-width: 0; max-width: 88px; }
#cf-pulpo .pp-chip-mas .pp-masn-b, #cf-pulpo .pp-mas-ang { display: none; }
/* lista angosta (computador con el chat y la ficha abiertos): etapa + monto + «+N»; el otro chip pasa al «+N» en vez de quedar en un ícono cortado */
#pp-chats { container-type: inline-size; container-name: pplista; }
@container pplista (max-width: 430px) {
  #cf-pulpo .pp-it-chips > .pp-it-x { display: none; }
  #cf-pulpo .pp-mas-ang { display: inline-block; }
  #cf-pulpo .pp-it-chips:has(.pp-it-x) .pp-chip-mas .pp-masn-a { display: none; }
  #cf-pulpo .pp-it-chips:has(.pp-it-x) .pp-chip-mas .pp-masn-b { display: inline; }
}
#cf-pulpo .pp-it-esp { padding: 0 6px; font-size: 10.5px; line-height: 17px; gap: 3px; }
#cf-pulpo .pp-reloj-bot { background: color-mix(in srgb, var(--t2) 10%, transparent); color: var(--t2); border-color: color-mix(in srgb, var(--t2) 18%, transparent); font-weight: 700; }

/* ── 📐 (27-oct) el mismo estilo en Pulso y Pulpo ──
   Con las medidas comunes de estilos.css (--r-xl, --r, --rs, --h-sm): las secciones de Pulpo con el radio de las tarjetas de los
   paneles de Pulso, sus títulos al mismo tamaño (16 px), los botones pequeños y los chips de 28 px de alto (antes 21–26: difíciles de
   tocar) y las tablas como las de Métricas (tarjeta redondeada, encabezado tintado, fila resaltada al pasar el mouse). */
#cf-pulpo .pp-sec { border-radius: var(--r-xl); }
#cf-pulpo .pp-sec h3 { font-size: 16px; }
.pp-mini { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: var(--h-sm); padding: 0 11px; font-size: 12px; line-height: 1.2; }
.pp-bx-fa .pp-mini, .pp-sp-vars .pp-mini, .pp-cal-nota .pp-mini, .pp-sv-ir.pp-mini { min-height: 0; }
.pp-chip { min-height: var(--h-sm); }
.pp-dz-vars .pp-chip { min-height: 0; }
#cf-pulpo .pp-esp-bar { border-radius: var(--r); }
#cf-pulpo .pp-tb-tabla { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
#cf-pulpo .pp-tb-tabla th { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); text-transform: uppercase; letter-spacing: .4px; padding: 10px 8px; }
#cf-pulpo .pp-tb-tabla tbody tr:last-child td { border-bottom: 0; }
#cf-pulpo .pp-tb-tabla tbody tr:hover td { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ── ‹ › (27-oct) filas que se deslizan de lado (filtros y bots): el borde con más contenido se desvanece y sale una flecha ──
   pulpo.js (deslizable) pone .pp-desl-hi / .pp-desl-hd según haya más a la izquierda o a la derecha. Sin más contenido: ni flecha ni desvanecido. */
#cf-pulpo .pp-desl { position: relative; min-width: 0; flex-shrink: 0; }
#cf-pulpo .pp-desl[hidden] { display: none; }
#cf-pulpo .pp-desl > .pp-filtros, #cf-pulpo .pp-desl > .pp-fbots, #cf-pulpo .pp-desl > .pp-btc { -webkit-mask-image: none !important; mask-image: none !important; }
#cf-pulpo .pp-desl.pp-desl-hd > :is(.pp-filtros, .pp-fbots, .pp-btc) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent calc(100% - 8px)) !important; mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent calc(100% - 8px)) !important; }
#cf-pulpo .pp-desl.pp-desl-hi > :is(.pp-filtros, .pp-fbots, .pp-btc) { -webkit-mask-image: linear-gradient(90deg, transparent 8px, #000 64px) !important; mask-image: linear-gradient(90deg, transparent 8px, #000 64px) !important; }
#cf-pulpo .pp-desl.pp-desl-hi.pp-desl-hd > :is(.pp-filtros, .pp-fbots, .pp-btc) { -webkit-mask-image: linear-gradient(90deg, transparent 8px, #000 64px, #000 calc(100% - 64px), transparent calc(100% - 8px)) !important; mask-image: linear-gradient(90deg, transparent 8px, #000 64px, #000 calc(100% - 64px), transparent calc(100% - 8px)) !important; }
#cf-pulpo .pp-desl-f { position: absolute; top: calc(50% - 4px); transform: translateY(-50%); z-index: 2; display: none; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0 0 2px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--t1);
  font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .28); }
#cf-pulpo .pp-desl-f:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
#cf-pulpo .pp-desl-i { left: 4px; } #cf-pulpo .pp-desl-d { right: 4px; }
#cf-pulpo .pp-desl.pp-desl-hi > .pp-desl-i, #cf-pulpo .pp-desl.pp-desl-hd > .pp-desl-d { display: inline-flex; }
@media (pointer: coarse) { #cf-pulpo .pp-desl-f { width: 28px; height: 28px; font-size: 18px; opacity: .92; } }

/* ── 🚨 (27-oct) numerito de cada pastilla de bot: sus chats que esperan a una persona (mismos colores que el de «Te están esperando») ── */
#cf-pulpo .pp-fbot-n { display: inline-block; min-width: 16px; margin: 0 -4px 0 -1px; padding: 0 5px; border-radius: 99px; background: #dc2626; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; }
#cf-pulpo .pp-fbot-n > i { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* (lo lee el lector de pantalla) */

/* ── 🗄️ (27-oct) Archivados y Bloqueados: una sola línea pequeña arriba de la lista (antes dos filas enteras) ── */
#cf-pulpo .pp-lvs { display: flex; align-items: center; gap: 2px; padding: 3px 10px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--t2); }
#cf-pulpo .pp-lvs > i { font-style: normal; opacity: .6; }
#cf-pulpo .pp-lvs-b { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--t2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
#cf-pulpo .pp-lvs-b em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--t2); opacity: .85; }
#cf-pulpo .pp-lvs-b:hover { background: var(--pp-bg, rgba(168, 85, 247, .08)); color: var(--t1); }
#cf-pulpo .pp-lvs-b:focus-visible { outline: 2px solid var(--pp-d); outline-offset: 1px; }

/* ── ↔️ (27-oct) borde arrastrable entre la lista y el chat (computador y tableta; en el celular no existe) ──
   pulpo.js (redimInstalar) pone --pp-lista-w y .pp-redim-on. El ancho nunca le quita al chat sus 400 px (ni a la ficha sus 300). */
#cf-pulpo .pp-redim { display: none; }
@media (min-width: 760px) {
  #cf-pulpo .pp-lista { position: relative; }
  #cf-pulpo .pp-body.pp-redim-on { grid-template-columns: clamp(260px, var(--pp-lista-w), calc(100% - 400px)) minmax(0, 1fr); }
  #cf-pulpo .pp-body.pp-redim-on.pp-con-ficha { grid-template-columns: clamp(260px, var(--pp-lista-w), calc(100% - 700px)) minmax(0, 1fr) 300px; }
  #cf-pulpo .pp-redim { display: block; position: absolute; top: 0; bottom: 0; right: -5px; width: 9px; z-index: 7; cursor: col-resize; touch-action: none; }
  #cf-pulpo .pp-redim::after { content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 3px; border-radius: 3px; background: transparent; }
  #cf-pulpo .pp-redim:hover::after, #cf-pulpo .pp-redim:focus-visible::after, #cf-pulpo .pp-redim-arr .pp-redim::after { background: var(--pp-d); }
  #cf-pulpo .pp-redim:focus-visible { outline: none; }
  #cf-pulpo .pp-redim-arr { cursor: col-resize; -webkit-user-select: none; user-select: none; }
  #cf-pulpo .pp-redim-arr :is(.pp-chat, .pp-ficha, .pp-chats) { pointer-events: none; }
}

/* ── ✍️ (27-oct) la caja de escribir crece sola hasta 5 líneas sin barra; con más, se desplaza adentro con una barra fina ── */
#cf-pulpo .pp-form textarea { overflow-y: hidden; }
#cf-pulpo .pp-form textarea.pp-txt-lleno { overflow-y: auto; scrollbar-width: thin; }
#cf-pulpo .pp-form textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* (con el chat angosto, el texto de ayuda no se parte en dos líneas) */
@media (pointer: coarse) { #cf-pulpo .pp-lvs-b { padding: 7px 8px; } }   /* 🗄️ más fácil de tocar en el celular */
/* ── 📦 (28-oct) copiar un bot a otro negocio (public/pulpo-copianeg.js) ── */
.pp-cn .pp-cp-bots { display: grid; gap: 6px; }
.pp-cn .pp-off { opacity: .55; cursor: not-allowed; }
.pp-cn-campo { display: grid; gap: 4px; margin: 4px 0 10px; font-size: 13px; color: var(--t2); }
.pp-cn-previa { margin: 12px 0; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.pp-cn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.pp-cn-chips span { padding: 4px 9px; border-radius: 999px; background: var(--card, var(--bg)); border: 1px solid var(--border); font-size: 12.5px; }
.pp-cn-l { margin: 10px 0 0; font-size: 13px; }
.pp-cn-l ul { margin: 4px 0 0; padding-left: 18px; }
.pp-cn-l li { margin: 2px 0; overflow-wrap: anywhere; }
.pp-cn-mal { color: var(--rojo, #c0392b); }
.pp-cn-no li { color: var(--t2); }
.pp-cn-est { font-size: 15px; margin: 4px 0; }
.pp-cn-rec { margin-top: 14px; font-size: 13px; }
.pp-cn-r { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); }
.pp-cn-r small { display: block; color: var(--t2); }
.pp-cn-banner { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--border); border-left: 4px solid var(--acento, #7c3aed); border-radius: 12px; background: var(--bg); font-size: 13px; }
.pp-cn-banner ul { margin: 6px 0; padding-left: 18px; }

/* 🛍️ (28-oct) Tablero: lo de las landings aparte del bot */
.pp-tb-land { margin-top: 6px; padding: 4px 10px; border-radius: 999px; display: inline-block; font-size: 12px; background: color-mix(in srgb, #ec4899 10%, transparent); border: 1px solid color-mix(in srgb, #ec4899 30%, transparent); }
/* 🩺 (29-oct) Modo especialista: versión C del producto, especialistas y la cola 🩺 Consultas (public/pulpo-consulta-ui.js y pulpo-consultas.js) */
.pp-cs .pp-cs-h4 { margin: 18px 0 6px; font-size: 14px; color: var(--t1); }
.pp-cs .pp-cs-h4 small { color: var(--t2); font-weight: 500; }
.pp-cs-card { border: 1px solid var(--border); border-radius: 14px; margin: 10px 0; background: var(--surface); overflow: hidden; }
.pp-cs-card-h { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; background: none; border: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.pp-cs-card-h span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pp-cs-card-h small { color: var(--t2); }
.pp-cs-card-h em { font-style: normal; color: var(--t2); }
.pp-cs-card-b { padding: 0 12px 12px; }
.pp-cs-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--pp-b) 12%, transparent); font-size: 22px; font-style: normal; flex: 0 0 auto; }
.pp-cs .pp-grid2, .pp-cs .pp-grid3 { margin-bottom: 10px; }
.pp-cs-prodr { display: grid; grid-template-columns: minmax(140px, 2fr) minmax(140px, 2fr) minmax(90px, 1fr) auto; gap: 8px; align-items: center; }
.pp-cs-card-h .pp-cs-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.pp-cs-medios { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.pp-cs-medio { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px dashed var(--border); border-radius: 12px; }
.pp-cs-medio .pp-cs-img { width: auto; height: 72px; max-width: 100%; object-fit: contain; border-radius: 8px; background: #fff; align-self: flex-start; }
.pp-cs-medio .pp-cs-firma { background: #fff; padding: 4px; }
.pp-cs-consid { font-family: inherit; min-height: 110px; }
.pp-cs-prot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; margin: 10px 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--amber-bd); background: var(--amber-bg); }
.pp-cs-prot.pp-cs-ok { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); background: color-mix(in srgb, var(--green) 9%, transparent); }
.pp-cs-prot span { flex: 1 1 260px; font-size: 13px; }
.pp-cs-qs { display: flex; flex-direction: column; gap: 8px; }
.pp-cs-q { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--border); border-radius: 12px; }
.pp-cs-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--pp-b) 14%, transparent); font-weight: 700; font-size: 13px; flex: 0 0 auto; }
.pp-cs-qc { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pp-cs-regla { padding: 10px; border: 1px solid var(--border); border-radius: 12px; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.pp-cs-paq { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--t2); }
.pp-cs-paq select { width: auto; }
.pp-cs-seg { display: grid; grid-template-columns: 90px 1fr 180px auto; gap: 8px; align-items: start; margin: 6px 0; }
.pp-cs-seg label { display: flex; flex-direction: column; font-size: 12px; color: var(--t2); }
.pp-cs-habla { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 12px; }
.pp-cs-op { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--t2); }
.pp-fi-cs { padding: 8px 0; border-bottom: 1px dashed var(--border); }
.pp-fi-cs:last-child { border-bottom: 0; }
.pp-fi-csd summary { cursor: pointer; font-size: 12px; color: var(--t2); margin: 4px 0; }
.pp-cs-falta { margin: 10px 0; padding: 8px 12px; border-radius: 10px; background: var(--amber-bg); border: 1px solid var(--amber-bd); font-size: 13px; }
/* la cola */
.pp-cs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 10px 0; }
.pp-cs-k { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 2px; }
.pp-cs-k small { color: var(--t2); font-size: 12px; }
.pp-cs-k b { font-size: 20px; }
.pp-cs-k i { font-style: normal; color: var(--t2); font-size: 12px; }
.pp-cs-cuerpo { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 12px; align-items: start; }
.pp-cs-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.pp-cs-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pp-cs-fila.on { border-color: var(--pp-b); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pp-b) 25%, transparent); }
.pp-cs-fila span { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 0; }
.pp-cs-fila small { color: var(--t2); }
.pp-cs-est { font-style: normal; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.pp-cs-est-pendiente { border-color: var(--pp-b); color: var(--pp-b); }
.pp-cs-est-alarma { border-color: var(--red); color: var(--red); }
.pp-cs-est-aprobada { border-color: var(--green); color: var(--green); }
.pp-cs-resp { display: grid; grid-template-columns: minmax(140px, 40%) 1fr; gap: 6px 12px; margin: 6px 0; font-size: 14px; }
.pp-cs-resp dt { color: var(--t2); }
.pp-cs-resp dd { margin: 0; font-weight: 600; }
.pp-cs-au { margin: 6px 0 2px; font-weight: 400; }   /* 🎙️ (31-oct) el audio original junto a la transcripción */
.pp-cs-au .pp-nv { max-width: 300px; }
.pp-cs-au p { margin: 2px 0 4px; font-size: 13.5px; }
.pp-cs-au-no { color: var(--t2); font-size: 12.5px; }
.pp-cs-aus { display: grid; gap: 10px; margin: 6px 0; }
.pp-cs-aus .pp-cs-au { padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; }
.pp-cs-ia { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--pp-b) 7%, transparent); border: 1px dashed color-mix(in srgb, var(--pp-b) 40%, var(--border)); margin: 10px 0; }
.pp-cs-ia p { margin: 4px 0 0; }
.pp-cs-plan { display: flex; flex-direction: column; gap: 8px; }
.pp-cs-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 10px 0; }
.pp-cs-plan1 { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); font-size: 13px; }
.pp-cs-plan1.on { border-color: var(--pp-b); background: color-mix(in srgb, var(--pp-b) 6%, transparent); }
.pp-cs-plan1 em { font-style: normal; font-weight: 700; font-size: 15px; }
.pp-cs-acc { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.pp-cs-ul { margin: 6px 0; padding-left: 18px; }
.pp-cs-embf { display: grid; grid-template-columns: 90px 1fr; gap: 2px 10px; align-items: center; margin: 4px 0; font-size: 13px; }
.pp-cs-embf i { display: block; height: 8px; border-radius: 4px; background: var(--pp-b); }
.pp-cs-embf small { grid-column: 2; color: var(--t2); }
@media (max-width: 759px) {
  .pp-cs-cuerpo { grid-template-columns: 1fr; }
  .pp-cs-seg { grid-template-columns: 1fr; }
  .pp-cs-prodr { grid-template-columns: 1fr 1fr auto; }
  .pp-cs-prodr select { grid-column: 1 / -1; }
  .pp-cs-resp { grid-template-columns: 1fr; }
  .pp-cs-resp dd { margin-bottom: 6px; }
}
/* 🩺 (29-oct) pulido: primeros pasos, grupos numerados, ayudas «¿Qué es esto?» y estados vacíos */
.pp-cs-ayuda { margin: 4px 0 10px; font-size: 13px; }
.pp-cs-ayuda summary { cursor: pointer; color: var(--pp-b); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.pp-cs-ayuda summary::-webkit-details-marker { display: none; }
.pp-cs-ayuda summary::before { content: 'ⓘ'; font-weight: 700; }
.pp-cs-ayuda p { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--pp-b) 7%, transparent); color: var(--t1); line-height: 1.45; }
.pp-cs-pasos { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.pp-cs-pasos li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.pp-cs-pasos li > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pp-cs-pasos li small { color: var(--t2); font-size: 12px; }
.pp-cs-pasos li.ok { opacity: .75; }
.pp-cs-pn { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-weight: 700; font-size: 13px; background: color-mix(in srgb, var(--pp-b) 15%, transparent); color: var(--pp-b); }
.pp-cs-pasos li.ok .pp-cs-pn { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.pp-cs-on { margin: 12px 0; }
.pp-cs-grupo { border: 1px solid var(--border); border-radius: 14px; margin: 10px 0; background: var(--surface); }
.pp-cs-grupo > summary { display: flex; align-items: center; gap: 12px; padding: 12px; cursor: pointer; list-style: none; }
.pp-cs-grupo > summary::-webkit-details-marker { display: none; }
.pp-cs-grupo > summary::after { content: '▾'; margin-left: auto; color: var(--t2); transition: transform .15s ease; }
.pp-cs-grupo[open] > summary::after { transform: rotate(180deg); }
.pp-cs-grupo > summary > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.pp-cs-grupo > summary small { color: var(--t2); font-size: 12px; font-weight: 400; }
.pp-cs-gn { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; font-weight: 700; font-size: 13px; background: color-mix(in srgb, var(--pp-b) 15%, transparent); color: var(--pp-b); }
.pp-cs-gb { padding: 0 12px 12px; }
.pp-cs-vacio { padding: 12px; border-radius: 12px; border: 1px dashed var(--border); margin: 8px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pp-cs-vacio p { margin: 0; color: var(--t2); font-size: 13px; }
.pp-cs-si { display: block; margin: 6px 0 2px; color: var(--t2); font-weight: 600; font-size: 12px; }
.pp-cs-pie { justify-content: space-between; align-items: center; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .pp-cs-grupo > summary::after { transition: none; } }

/* ══════════ 🃏 (30-oct) 🤖 Vendedor: los bots en tarjetas que se deslizan (antes un <select>) ══════════
   --c es el color fijo de cada bot (el mismo del aro en Chats). Una sola fila: con el dedo en el celular; flechas ‹ › y rueda en el computador. */
#cf-pulpo .pp-bt-top > .pp-desl { margin: -4px -6px 0; }
#cf-pulpo .pp-btc { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 6px 6px; min-width: 0; }
#cf-pulpo .pp-btc::-webkit-scrollbar { display: none; }
#cf-pulpo .pp-btc-i { --c: var(--accent); flex: 0 0 auto; width: 214px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--border);
  background: var(--surface); color: var(--t1); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
#cf-pulpo .pp-btc-i:hover { border-color: color-mix(in srgb, var(--c) 50%, var(--border)); }
#cf-pulpo .pp-btc-i.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 11%, var(--surface)); box-shadow: inset 0 0 0 1px var(--c), 0 4px 14px color-mix(in srgb, var(--c) 22%, transparent); }
#cf-pulpo .pp-btc-i:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
#cf-pulpo .pp-btc-av { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 84%, #000); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--c) 45%, transparent); }
#cf-pulpo .pp-btc-i.on .pp-btc-av { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
#cf-pulpo .pp-btc-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
#cf-pulpo .pp-btc-n { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; line-height: 1.2; }
#cf-pulpo .pp-btc-n > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#cf-pulpo .pp-btc-n .cf-flag { margin: 0 -2px 0 auto; }
#cf-pulpo .pp-btc-pa { font-size: 10.5px; font-weight: 700; color: var(--t2); letter-spacing: .04em; }
#cf-pulpo .pp-btc-m, #cf-pulpo .pp-btc-k { display: block; font-size: 11.5px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#cf-pulpo .pp-btc-k > b { color: var(--t1); font-weight: 700; }
#cf-pulpo .pp-btc-num { font-variant-numeric: tabular-nums; }
#cf-pulpo .pp-btc-d { display: inline-block; width: 8px; height: 8px; margin: 0 6px 0 2px; vertical-align: 0; border-radius: 50%; background: var(--border-2); }
#cf-pulpo .pp-btc-auto { background: #22c55e; box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent); }
#cf-pulpo .pp-btc-sugerir { background: #f59e0b; box-shadow: 0 0 0 3px color-mix(in srgb, #f59e0b 22%, transparent); }
#cf-pulpo .pp-btc-nuevo { width: auto; min-width: 150px; border-style: dashed; background: transparent; color: var(--t2); }
#cf-pulpo .pp-btc-nuevo .pp-btc-av { background: transparent; color: var(--accent); border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: none; font-size: 22px; font-weight: 600; }
#cf-pulpo .pp-btc-nuevo:hover { color: var(--t1); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, transparent); }
/* 🖼️ (30-oct) foto del bot: en la tarjeta (la elegida con su camarita: tocar la cara lleva a ⚙️ General → Foto del bot), en Chats, en el Tablero
   y el recorte en círculo (canvas). Sin foto, todo queda como antes (la inicial). */
#cf-pulpo .pp-btc-av { position: relative; }
#cf-pulpo .pp-btc-foto { background: var(--surface); }
#cf-pulpo .pp-btc-foto > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
#cf-pulpo .pp-btc-cam { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; box-shadow: 0 0 0 2px var(--surface); }
#cf-pulpo .pp-btc-cam svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; }
#cf-pulpo .pp-btc-i.on .pp-btc-av { cursor: pointer; }
#cf-pulpo .pp-fb-f { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#cf-pulpo .pp-fb-av { --c: var(--accent); flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--c) 84%, #000); color: #fff; font-size: 22px; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
#cf-pulpo .pp-fb-av.pp-fb-con { background: var(--surface); }
#cf-pulpo .pp-fb-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
#cf-pulpo .pp-fb-acc { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1 1 180px; }
#cf-pulpo .pp-fb-ir { animation: pp-fb-ir 1.5s ease; }
@keyframes pp-fb-ir { 0%, 100% { box-shadow: none; } 25%, 70% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); } }
.pp-hoja-fb .pp-hoja-in { width: min(420px, 100%); }
.pp-fb-rc { display: grid; place-items: center; padding: 4px 0; }
.pp-fb-cv { display: block; border-radius: 14px; touch-action: none; cursor: grab; background: var(--bg); max-width: 100%; }
.pp-fb-cv:active { cursor: grabbing; }
.pp-fb-zoom { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t2); }
.pp-fb-zoom input { flex: 1; min-width: 0; accent-color: var(--accent); }
.pp-fb-pv { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--t2); }
.pp-fb-pv canvas { border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border); }
.pp-fb-p1 { width: 42px; height: 42px; } .pp-fb-p2 { width: 22px; height: 22px; }
.pp-fb-bt { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-fb-bt .cf-btn { flex: 1 1 140px; }
.pp-it-botf { width: 13px; height: 13px; border-radius: 50%; object-fit: cover; vertical-align: -2px; margin-right: 3px; }
.pp-fi-l .pp-it-botf { width: 16px; height: 16px; vertical-align: -3px; }
.pp-tbb-foto { border-radius: 50%; background: var(--surface); }
.pp-tbb-foto img { object-position: center; }
@media (max-width: 759px) { #cf-pulpo .pp-btc-i { width: 186px; padding: 9px 10px; gap: 9px; } #cf-pulpo .pp-btc-av { width: 38px; height: 38px; font-size: 15px; } #cf-pulpo .pp-btc-nuevo { min-width: 132px; } }
@media (prefers-reduced-motion: reduce) { #cf-pulpo .pp-btc-i { transition: none; } }
#cf-pulpo .pp-bt-fila > .pp-menu-w { margin-left: auto; }   /* (el ⋯ sigue a la derecha, como cuando estaba el <select>) */
@media (max-width: 759px) { #cf-pulpo .pp-bt-fila { flex-wrap: nowrap; gap: 6px; } #cf-pulpo .pp-bt-fila > .pp-seg { order: 0; flex: 1 1 0; min-width: 0; } }   /* 📱 sin el <select> arriba, el ⋯ va en la misma línea que el modo */
/* 🖼️ (31-oct) fotos de los bots un poco más grandes (botones de 💬 Chats y del 📊 Tablero, tarjetas de 🤖 Vendedor y del Tablero) y,
   en el Tablero, los botones con foto y nombre en vez de la lista «Todos los bots» (en su propia fila; en el celular se deslizan) */
.pp-fbot { gap: 7px; padding: 3px 12px 3px 3px; }
.pp-fbot img { width: 26px; height: 26px; }
.pp-it-botf { width: 15px; height: 15px; vertical-align: -3px; }
#cf-pulpo .pp-btc-av { width: 46px; height: 46px; }
.pp-tbb-logo { width: 48px; height: 48px; }
.pp-tbb-c { cursor: default; }
.pp-tbb-c .pp-tbb-h { cursor: pointer; }
#cf-pulpo .pp-tb-filtros .pp-tb-bots { flex: 1 1 100%; order: 9; padding: 2px 0 0; margin: 0; }
@media (min-width: 760px) {
  #cf-pulpo .pp-tb-filtros .pp-tb-bots { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 759px) {
  #cf-pulpo .pp-btc-av { width: 42px; height: 42px; }
  .pp-tbb-logo { width: 44px; height: 44px; }
  #cf-pulpo .pp-tb-filtros .pp-tb-bots { padding: 0; }
}

/* ⭐ (31-oct, pul4b) 🤖 interruptor del bot con palabras también en el celular: fila propia debajo del nombre, de lado a lado, con la frase
   «🤖 Atiende Sofía» · «✋ Lo atiendes tú · vuelve 3:40 p. m.» · «⛔ Apagado en este chat» (pulpo.js → botSwTexto). Toque de 44 px.
   La cabecera de acciones se «abre» (display: contents) para que el interruptor pueda bajar a su fila y ✉️ ⋯ sigan arriba.
   «Diseño clásico» deja el interruptor compacto de antes. En el computador: «Bot IA» + la frase corta («Atiende Sofía», «Vuelve 3:40 p. m.»). */
.pp-bot-sw-c { display: none; }
.pp-bot-sw-t small { max-width: 230px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 759px) { @supports selector(:has(a)) {   /* (sin :has, en navegadores muy viejos, queda el compacto de antes) */
  html:not(.cf-clasico) #cf-pulpo .pp-cab-acc:has(> .pp-bot-sw) { display: contents; }
  html:not(.cf-clasico) #cf-pulpo .pp-cab .pp-bot-sw { order: 9; flex: 1 1 100%; min-width: 0; min-height: 44px; margin: 0; padding: 4px 6px 4px 8px; gap: 8px; border-radius: var(--rs, 10px); box-shadow: none; }
  html:not(.cf-clasico) #cf-pulpo .pp-cab .pp-bot-sw::before { display: none; }   /* el «IA» del compacto: la frase ya lo dice */
  html:not(.cf-clasico) #cf-pulpo .pp-cab .pp-bot-sw-c { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--t1); }
  html:not(.cf-clasico) #cf-pulpo .pp-cab .pp-bot-sw:not(.on) { border-color: var(--amber-bd); background: var(--amber-bg); }
  html:not(.cf-clasico) #cf-pulpo .pp-cab .pp-bot-sw:not(.on) .pp-bot-sw-c { color: var(--amber-t, var(--amber)); }
  html:not(.cf-clasico) #cf-pulpo .pp-cab .pp-bot-sw-k { width: 42px; height: 24px; margin-left: auto; }
  html:not(.cf-clasico) #cf-pulpo .pp-cab .pp-bot-sw-k::after { width: 18px; height: 18px; }
  html:not(.cf-clasico) #cf-pulpo .pp-cab .pp-bot-sw.on .pp-bot-sw-k::after { transform: translateX(18px); }
  html:not(.cf-clasico) #cf-pulpo .pp-cab .pp-bot-sw .pp-masc { width: 26px; height: 26px; }
  html.cf-sin-mascota:not(.cf-clasico) #cf-pulpo .pp-cab .pp-bot-sw { padding-left: 12px; }
} }
@media (max-width: 759px) {
  /* 💬 el aviso sale abajo (como en el resto de la app), encima de la caja de escribir o de la barra de Pulpo: ya no tapa la cabecera (avisos.js mide --cf-toast-bottom) */
  html.pp-abierto:not(.cf-clasico) #cf-toast.cf-toast { top: auto; bottom: var(--cf-toast-bottom, calc(84px + env(safe-area-inset-bottom, 0px))); transform: translate(-50%, 140%); }
  html.pp-abierto:not(.cf-clasico) #cf-toast.cf-toast.cf-show { transform: translate(-50%, 0); }
}

/* ⭐ (31-oct, pul4b) 📄 plantillas legibles: «Confirmar pedido» grande y el nombre real de Meta («confirmar_pedido») pequeño debajo;
   los {{1}} con el dato que llevan («Primer nombre») como etiqueta. Solo presentación: lo que se envía a Meta/YCloud no cambia. */
.pp-pl-n { display: inline-flex; flex-direction: column; gap: 1px; min-width: 0; }
.pp-pl-n > b { font-size: 15px; line-height: 1.25; }
.pp-pl-tec { font: 500 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--t2); background: none; padding: 0; overflow-wrap: anywhere; }
.pp-pl-var { display: inline-block; padding: 0 6px; margin: 1px 0; border-radius: 6px; background: var(--accent-bg, #f1eafe); color: var(--accent, #6d28d9); font-weight: 700; font-size: .95em; line-height: 1.45; white-space: nowrap; }
.pp-plt-i small .pp-pl-tec { font-size: 11.5px; }
#cf-pulpo .pp-sec-h [data-pc="pl-nueva"] { flex-shrink: 0; }
.pp-plt-i span.pp-pl-var { color: var(--accent, #6d28d9); font-size: 12px; white-space: nowrap; }

/* ⚙️ (31-oct, pul5a) Vendedor «Simplificar en capas»: «⚙️ Más opciones (N)» con lo avanzado del producto y de General (la caja .cf-mas de
   esencia.css; con «Diseño clásico» no se pinta). El resumen dice qué hay adentro y lo que falta; adentro, las mismas secciones con su espacio. */
#cf-pulpo .pp-vmas { border-color: color-mix(in srgb, var(--pp-b, var(--accent)) 22%, var(--border)); border-radius: var(--r-xl, 18px); }
#cf-pulpo .pp-vmas > summary { min-height: 56px; padding: 10px 16px; }
#cf-pulpo .pp-vmas > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: inherit; }
#cf-pulpo .pp-vmas-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; color: var(--t1); }
#cf-pulpo .pp-vmas-t b { font-size: 15px; font-weight: 800; }
#cf-pulpo .pp-vmas-t small { flex: 1 0 100%; color: var(--t2); font-size: 12.5px; font-weight: 600; line-height: 1.35; }
#cf-pulpo .pp-vmas-falta { font-size: 12.5px; font-weight: 800; color: var(--amber-t, var(--amber)); }
#cf-pulpo .pp-vmas > .pp-vmas-in { display: flex; flex-direction: column; gap: 14px; padding: 2px 12px 12px; }
@media (max-width: 759px) { #cf-pulpo .pp-vmas > .pp-vmas-in { padding: 2px 8px 8px; gap: 10px; } }