/* EL COPILOTO VIVO (Etapa 1 · 21-oct-2026) — ver copiloto-vivo.js.
   Tema oscuro por omisión y claro con [data-theme="light"], como el resto de la app.
   Reglas de Daniel: un solo monito a la vista, interfaz fluida en cualquier ancho
   (el panel EMPUJA el módulo, no lo tapa), tarjetas equilibradas, nivel Shopify. */
:root{
  --cvv-w:400px;
  --cvv-fondo:#131313;--cvv-s2:#1b1b1b;--cvv-s3:#242424;--cvv-linea:rgba(255,255,255,.08);--cvv-linea2:rgba(255,255,255,.13);
  --cvv-texto:rgba(255,255,255,.94);--cvv-suave:rgba(255,255,255,.6);--cvv-tenue:rgba(255,255,255,.42);
  --cvv-yo:#0f5c4a;--cvv-yo-txt:#ecfff8;--cvv-yo-meta:rgba(236,255,248,.62);--cvv-palomita:#53bdeb;
  --cvv-sombra:0 24px 60px -24px rgba(0,0,0,.85);
  --cvv-resorte:cubic-bezier(.34,1.56,.64,1);--cvv-suave-c:cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="light"]{
  --cvv-fondo:#ffffff;--cvv-s2:#f6f7f9;--cvv-s3:#eef0f4;--cvv-linea:rgba(16,24,40,.08);--cvv-linea2:rgba(16,24,40,.13);
  --cvv-texto:rgba(16,24,40,.94);--cvv-suave:rgba(16,24,40,.6);--cvv-tenue:rgba(16,24,40,.42);
  --cvv-yo:#d9fdd3;--cvv-yo-txt:#0b1f17;--cvv-yo-meta:rgba(11,31,23,.5);--cvv-palomita:#1d9bd1;
  --cvv-sombra:0 24px 60px -24px rgba(16,24,40,.35);
}

/* El panel empuja el módulo (pantallas anchas) */
.cop.sitio{transition:padding-right .46s var(--cvv-suave-c)}
.cop.sitio.vivo-abierto{padding-right:var(--cvv-w)}

/* ── El monito, siempre presente ── */
.cvv-dock{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2.4vh,26px);display:flex;align-items:flex-end;gap:12px;z-index:60;transition:opacity .3s var(--cvv-suave-c),transform .45s var(--cvv-resorte)}
.cvv-dock.oculto{opacity:0;transform:translate(26px,18px) scale(.7);pointer-events:none}
.cvv-mono{position:relative;width:88px;height:96px;display:grid;place-items:end center;border:0;background:none;padding:0;cursor:pointer;border-radius:22px}
.cvv-mono:focus-visible{outline:none;box-shadow:0 0 0 2px var(--k)}
.cvv-mono-img{width:84px;height:auto;max-height:94px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.5));transform-origin:50% 100%;animation:cvvFlota 3.6s ease-in-out infinite,cvvRopa .55s var(--cvv-resorte)}
.cvv-mono::after{content:"";position:absolute;bottom:-3px;left:50%;width:56px;height:9px;margin-left:-28px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);animation:cvvSombra 3.6s ease-in-out infinite}
.cvv-mono:hover .cvv-mono-img{animation-play-state:paused;transform:translateY(-5px) rotate(-3deg);transition:transform .35s var(--cvv-resorte)}
@keyframes cvvFlota{50%{transform:translateY(-6px)}}
@keyframes cvvSombra{50%{transform:scaleX(.82);opacity:.7}}
@keyframes cvvRopa{0%{transform:scale(.7,.6) translateY(10px);opacity:.3}}
.cvv-aviso{position:absolute;top:6px;right:6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--k);color:#06101c;font-size:11px;font-weight:800;display:grid;place-items:center;border:2px solid var(--bg,#0a0b0f)}
.cvv-globo{max-width:320px;background:var(--cvv-s2);color:var(--cvv-texto);border:1px solid var(--cvv-linea2);border-radius:18px 18px 6px 18px;padding:13px 15px;box-shadow:var(--cvv-sombra);transform-origin:100% 100%;animation:cvvGlobo .45s var(--cvv-resorte) both}
@keyframes cvvGlobo{from{opacity:0;transform:translateY(8px) scale(.94)}}
.cvv-globo-q{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--k);margin-bottom:3px}
.cvv-globo-q small{font-size:11px;font-weight:500;color:var(--cvv-tenue)}
.cvv-globo.ojo .cvv-globo-q i{background:#fbbf24}
:root[data-theme="light"] .cvv-globo.ojo .cvv-globo-q i{background:#d97706}
.cvv-globo-q i{width:6px;height:6px;border-radius:50%;background:var(--k);animation:cvvLate 1.8s ease-in-out infinite}
@keyframes cvvLate{50%{opacity:.3}}
.cvv-globo p{margin:0 0 10px;font-size:13.5px;line-height:1.5}
.cvv-botones{display:flex;gap:7px;flex-wrap:wrap}
.cvv-b{height:32px;padding:0 13px;border-radius:10px;border:1px solid var(--cvv-linea2);background:transparent;color:var(--cvv-texto);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .2s,transform .2s var(--cvv-resorte)}
.cvv-b:hover{background:var(--cvv-s3)}.cvv-b:active{transform:scale(.96)}
.cvv-b.pri{background:var(--k);border-color:var(--k);color:#06101c}

/* ── El panel ── */
.cvv-panel{position:fixed;top:0;right:0;bottom:0;width:var(--cvv-w);z-index:70;display:flex;flex-direction:column;background:var(--cvv-fondo);color:var(--cvv-texto);border-left:1px solid var(--cvv-linea);box-shadow:var(--cvv-sombra);transform:translateX(102%);visibility:hidden;transition:transform .46s var(--cvv-suave-c),visibility 0s linear .46s;font-variant-numeric:tabular-nums}
.cvv-panel.abierto{transform:none;visibility:visible;transition:transform .46s var(--cvv-suave-c),visibility 0s}
.cvv-cab{display:flex;align-items:center;gap:12px;padding:16px 16px 12px 18px}
.cvv-av{width:56px;height:56px;border-radius:17px;flex:none;overflow:hidden;display:grid;place-items:end center;background:radial-gradient(120% 120% at 50% 100%,color-mix(in srgb,var(--k) 36%,transparent),transparent 70%),var(--cvv-s3);border:1px solid color-mix(in srgb,var(--k) 40%,transparent);transition:border-color .4s}
.cvv-av img{width:50px;height:auto;margin-bottom:-3px;animation:cvvRopa .55s var(--cvv-resorte)}
.cvv-cab-t{flex:1;min-width:0}.cvv-cab-t b{display:block;font-size:16px;letter-spacing:-.01em}.cvv-cab-t small{color:var(--cvv-suave);font-size:12.5px}
.cvv-ico{width:34px;height:34px;border-radius:10px;border:0;background:none;color:var(--cvv-suave);display:grid;place-items:center;cursor:pointer}
.cvv-ico:hover{background:var(--cvv-s3);color:var(--cvv-texto)}
.cvv-salas{display:flex;gap:4px;padding:0 16px 12px}
.cvv-salas .cvv-sala{flex:1 1 auto;padding:0 8px}
.cvv-sala{position:relative;min-width:0;display:flex;align-items:center;justify-content:center;height:34px;padding:0 6px;border-radius:999px;border:1px solid var(--cvv-linea);background:var(--cvv-s2);color:var(--cvv-suave);font:inherit;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:all .25s var(--cvv-suave-c)}
.cvv-sala i{display:none}
.cvv-sala:hover{color:var(--cvv-texto);border-color:var(--cvv-linea2)}
.cvv-sala.on{color:var(--k);border-color:color-mix(in srgb,var(--k) 55%,transparent);background:color-mix(in srgb,var(--k) 14%,var(--cvv-s2))}
:root[data-theme="light"] .cvv-sala.on{color:color-mix(in srgb,var(--k) 70%,#0b1220)}
.cvv-punto{position:absolute;top:5px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--k)}
.cvv-ctx{margin:0 18px;padding:8px 11px;border-radius:11px;background:var(--cvv-s2);border:1px solid var(--cvv-linea);font-size:12px;color:var(--cvv-suave);display:flex;gap:7px;align-items:center}
.cvv-ctx span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cvv-ctx b{color:var(--cvv-texto);font-weight:600}
.cvv-hilo{flex:1;min-height:0;overflow-y:auto;padding:14px 18px 10px;display:flex;flex-direction:column;gap:10px}
.cvv-dia{align-self:center;font-size:11.5px;font-weight:600;color:var(--cvv-suave);background:var(--cvv-s2);border:1px solid var(--cvv-linea);border-radius:8px;padding:3px 10px;margin:4px 0}
.cvv-yo{align-self:flex-end;max-width:84%;background:var(--cvv-yo);color:var(--cvv-yo-txt);border-radius:16px 16px 5px 16px;padding:7px 11px 6px 12px;font-size:13.5px;line-height:1.45;animation:cvvMsg .35s var(--cvv-suave-c) both}
.cvv-yo .cvv-txt.trans{font-style:italic;font-size:12.5px;opacity:.85;margin-top:4px}
.cvv-meta{float:right;display:inline-flex;align-items:center;gap:3px;margin:7px -3px -3px 12px;font-size:10.5px;line-height:1;color:var(--cvv-yo-meta);white-space:nowrap}
.cvv-meta svg{color:var(--cvv-palomita)}
.cvv-el{align-self:flex-start;max-width:94%;background:var(--cvv-s2);border:1px solid var(--cvv-linea);border-radius:5px 16px 16px 16px;padding:8px 12px 9px;font-size:13.5px;line-height:1.55;animation:cvvMsg .35s var(--cvv-suave-c) both;min-width:0}
.cvv-el.mal{border-color:color-mix(in srgb,#f87171 45%,transparent)}
.cvv-nom{display:flex;align-items:baseline;gap:7px;font-size:12px;font-weight:700;color:var(--k);margin-bottom:2px}
.cvv-nom time{font-size:10.5px;font-weight:500;color:var(--cvv-tenue)}
.cvv-txt{white-space:pre-wrap;overflow-wrap:anywhere}
/* `hidden` y no `auto` (22-oct): con `auto` un bloque más ancho que el panel (el árbol de
   campañas) volvía deslizable TODO el grupo, y un gesto de lado con el trackpad lo
   recorría a la izquierda: el resumen se veía cortado. `hidden` sigue midiendo al ancho
   del panel (con `clip` el globo crecía al ancho del renglón más largo) pero no se
   desliza a mano. Lo ancho se acomoda abajo; las tablas traen su .tabla-scroll. */
.cvv-bloques{margin-top:8px;max-width:100%;overflow-x:hidden;padding:1px;box-sizing:border-box}
@keyframes cvvMsg{from{opacity:0;transform:translateY(8px)}}
.cvv-espera{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--cvv-suave)}
.cvv-cumbre{width:30px;height:18px}
.cvv-cumbre path{fill:none;stroke:var(--k);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:cvvDibuja 1.4s var(--cvv-suave-c) infinite}
.cvv-cumbre circle{fill:var(--k);animation:cvvSube 1.4s var(--cvv-suave-c) infinite}
@keyframes cvvDibuja{60%,100%{stroke-dashoffset:0}}
@keyframes cvvSube{0%{transform:translateY(8px);opacity:0}55%{opacity:1}100%{transform:none}}
.cvv-bienv{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:18px 4px 6px}
.cvv-bienv h2{margin:0;font-size:19px;letter-spacing:-.02em}.cvv-bienv h2 em{font-style:normal;color:var(--k)}
.cvv-bienv p{margin:0 0 12px;color:var(--cvv-suave);font-size:13px;max-width:34ch}
.cvv-preg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
.cvv-preg button{padding:11px 12px;border-radius:14px;background:var(--cvv-s2);border:1px solid var(--cvv-linea);color:var(--cvv-texto);font:inherit;font-size:12.5px;line-height:1.35;text-align:left;cursor:pointer;transition:all .25s var(--cvv-suave-c)}
.cvv-preg button:hover{border-color:color-mix(in srgb,var(--k) 50%,transparent);background:color-mix(in srgb,var(--k) 9%,var(--cvv-s2));transform:translateY(-1px)}
.cvv-preg button:last-child:nth-child(odd){grid-column:1/-1}
/* Adjuntos y notas de voz */
.cvv-adj{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.18);border:1px solid var(--cvv-linea2);margin-bottom:4px;max-width:270px}
.cvv-adj img{width:62px;height:62px;object-fit:cover;border-radius:9px}
.cvv-adj .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:10.5px;font-weight:800;background:rgba(255,255,255,.14);flex:none}
.cvv-adj b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}.cvv-adj small{font-size:11.5px;opacity:.7}
.cvv-voz{display:flex;align-items:center;gap:9px;min-width:230px}
.cvv-play{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:inherit;display:grid;place-items:center;flex:none;cursor:pointer}
:root[data-theme="light"] .cvv-play{background:rgba(11,31,23,.12)}
.cvv-barras{display:flex;align-items:center;gap:2px;height:28px;flex:1}
.cvv-barras i{flex:1;max-width:3px;min-height:3px;border-radius:2px;background:currentColor;opacity:.38;transition:opacity .15s}
.cvv-barras i.on{opacity:1}
.cvv-dur{font-size:11px;opacity:.7;min-width:28px}
/* El pie: sugerencias, menú del +, emojis y la entrada */
.cvv-pie{position:relative;padding:8px 16px 14px;border-top:1px solid var(--cvv-linea);background:var(--cvv-fondo)}
.cvv-sugs{display:flex;gap:6px;overflow-x:auto;margin:0 -16px 8px;padding:0 16px;scrollbar-width:none}
.cvv-sugs::-webkit-scrollbar{display:none}
.cvv-sug{flex:none;white-space:nowrap;font:inherit;font-size:12.5px;padding:6px 11px;border-radius:999px;border:1px solid var(--cvv-linea2);background:none;color:var(--cvv-suave);cursor:pointer;transition:all .25s var(--cvv-suave-c)}
.cvv-sug:hover{color:var(--cvv-texto);border-color:color-mix(in srgb,var(--k) 50%,transparent);background:color-mix(in srgb,var(--k) 10%,transparent)}
.cvv-menu,.cvv-emojis{position:absolute;left:16px;bottom:calc(100% - 4px);padding:8px;border-radius:18px;background:var(--cvv-s2);border:1px solid var(--cvv-linea2);box-shadow:var(--cvv-sombra);z-index:5;animation:cvvGlobo .3s var(--cvv-resorte) both;transform-origin:20px 100%}
.cvv-menu{min-width:220px}
.cvv-menu button{display:flex;align-items:center;gap:13px;width:100%;padding:11px 12px;border-radius:12px;border:0;background:none;color:var(--cvv-texto);font:inherit;font-size:14.5px;text-align:left;cursor:pointer}
.cvv-menu button:hover,.cvv-menu button:focus-visible{background:var(--cvv-s3);outline:none}
.cvv-emojis{display:grid;grid-template-columns:repeat(6,36px);gap:2px;left:58px}
.cvv-emojis button{width:36px;height:36px;border:0;border-radius:9px;background:none;font-size:19px;cursor:pointer}
.cvv-emojis button:hover{background:var(--cvv-s3)}
.cvv-entrada{position:relative;display:flex;align-items:center;gap:4px;border:1px solid var(--cvv-linea2);background:var(--cvv-s2);border-radius:999px;padding:5px;min-height:50px}
.cvv-r{width:40px;height:40px;border-radius:50%;border:0;background:none;color:var(--cvv-suave);display:grid;place-items:center;flex:none;cursor:pointer;transition:background .2s,color .2s,transform .25s var(--cvv-resorte)}
.cvv-r:hover{background:var(--cvv-s3);color:var(--cvv-texto)}.cvv-r:active{transform:scale(.92)}
.cvv-r.mas{background:var(--cvv-s3);color:var(--cvv-texto)}
.cvv-r.mas svg{transition:transform .3s var(--cvv-resorte)}.cvv-r.mas.on svg{transform:rotate(45deg)}
.cvv-txtin{flex:1;min-width:0;background:transparent!important;border:0!important;outline:0;box-shadow:none!important;color:var(--cvv-texto);font:inherit;font-size:13.5px;padding:0 4px!important}
.cvv-txtin::placeholder{color:var(--cvv-tenue)}
.cvv-accion{width:40px;height:40px;border-radius:50%;border:0;background:var(--k);color:#06101c;display:grid;place-items:center;flex:none;cursor:pointer;transition:transform .3s var(--cvv-resorte),opacity .2s}
.cvv-accion:active{transform:scale(.9)}.cvv-accion:disabled{opacity:.45;cursor:default}
.cvv-grab{position:absolute;inset:5px;border-radius:999px;background:var(--cvv-s2);display:flex;align-items:center;gap:10px;padding:0 0 0 4px;animation:cvvMsg .25s var(--cvv-suave-c)}
.cvv-rojo{width:10px;height:10px;border-radius:50%;background:#ef4444;animation:cvvLate 1s ease-in-out infinite;flex:none}
.cvv-reloj{font-size:13px;font-weight:600;min-width:34px}
.cvv-onda{flex:1;min-width:0;height:28px;color:var(--cvv-texto)}

/* El encargo: la línea que deja el especialista en el general */
.cvv-enc{border-color:color-mix(in srgb,var(--k) 34%,var(--cvv-linea));background:linear-gradient(180deg,color-mix(in srgb,var(--k) 9%,var(--cvv-s2)),var(--cvv-s2) 70%)}
.cvv-enc-cab{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.cvv-enc-av{width:30px;height:30px;border-radius:9px;flex:none;overflow:hidden;display:grid;place-items:end center;background:color-mix(in srgb,var(--k) 22%,var(--cvv-s3));border:1px solid color-mix(in srgb,var(--k) 40%,transparent)}
.cvv-enc-av img{width:27px;height:auto;margin-bottom:-2px}
.cvv-enc-cab .cvv-nom{margin:0}
.cvv-nom small{font-weight:500;color:var(--cvv-tenue)}
.cvv-enc-ir{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:6px 11px 6px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--k) 45%,transparent);background:transparent;color:var(--k);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .2s,transform .2s}
.cvv-enc-ir:hover{background:color-mix(in srgb,var(--k) 12%,transparent)}
.cvv-enc-ir:active{transform:scale(.97)}
:root[data-theme="light"] .cvv-enc-ir{color:color-mix(in srgb,var(--k) 62%,#0b1220)}

/* Respuestas que se ven (Etapa 3): embudo, kpis, comparativa, ranking */
.cvv-exp{--bien:#34d399;--ojo:#fbbf24;--roto:#f87171;margin:10px 0 2px;padding:12px;border-radius:12px;background:var(--cvv-fondo);border:1px solid var(--cvv-linea)}
:root[data-theme="light"] .cvv-exp{--bien:#059669;--ojo:#b45309;--roto:#dc2626}
.cvv-emb-cab{display:flex;gap:10px;align-items:flex-start;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--cvv-linea)}
.cvv-emb-ic{width:22px;height:22px;flex:none;border-radius:7px;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--bien);color:#04140d}
.cvv-emb.con-roto .cvv-emb-ic{background:var(--roto);color:#1a0606}
.cvv-emb-cab b{display:block;font-size:13.5px;line-height:1.35}
.cvv-emb-cab div>span{display:block;font-size:12px;color:var(--cvv-suave);margin-top:2px;line-height:1.4}
.cvv-emb-pasos{display:grid;gap:9px}
.cvv-emb-p{animation:cvvPaso .4s var(--cvv-suave-c) both;animation-delay:calc(var(--i) * 90ms)}
.cvv-emb-t{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--cvv-suave);margin-bottom:4px}
.cvv-emb-t b{color:var(--cvv-texto);font-size:13px;font-variant-numeric:tabular-nums}
.cvv-emb-barra{height:8px;border-radius:5px;background:var(--cvv-s3);overflow:hidden}
.cvv-emb-barra i{display:block;height:100%;border-radius:5px;background:var(--bien);transform-origin:0 50%;animation:cvvCrece .8s var(--cvv-suave-c) both;animation-delay:calc(var(--i) * 90ms + 80ms)}
.cvv-emb-nota{font-size:11.5px;color:var(--cvv-tenue);margin-top:3px;font-variant-numeric:tabular-nums}
.cvv-emb-p.roto .cvv-emb-barra i{background:var(--roto)}
.cvv-emb-p.roto .cvv-emb-nota{color:var(--roto);font-weight:700}
.cvv-emb-p.roto .cvv-emb-t span{color:var(--cvv-texto);font-weight:600}
.cvv-emb-p.sin_datos .cvv-emb-barra i{background:var(--cvv-tenue)}
.cvv-emb-p.despues{opacity:.45}
.cvv-emb-p.despues .cvv-emb-barra i{background:var(--cvv-tenue)}
.cvv-emb-pie{margin:10px 0 0;font-size:11.5px;color:var(--cvv-tenue)}
@keyframes cvvCrece{from{transform:scaleX(0)}}
.cvv-vis-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.cvv-vis-cab b{font-size:13px}
.cvv-vis-cab span{font-size:11.5px;color:var(--cvv-tenue);white-space:nowrap}
.cvv-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cvv-kpis.n3>div:first-child{grid-column:1/-1}
.cvv-kpis>div{padding:9px 11px;border-radius:10px;background:var(--cvv-s2);border:1px solid var(--cvv-linea);animation:cvvPaso .4s var(--cvv-suave-c) both;animation-delay:calc(var(--i) * 80ms);min-width:0}
.cvv-kpis span{display:block;font-size:10.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--cvv-tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cvv-kpis b{display:block;font-size:18px;letter-spacing:-.01em;margin-top:2px;font-variant-numeric:tabular-nums}
.cvv-kpis small{display:block;font-size:11.5px;color:var(--cvv-suave);margin-top:1px}
.cvv-comp{display:grid;gap:11px}
.cvv-comp-r{display:grid;gap:3px;animation:cvvPaso .4s var(--cvv-suave-c) both;animation-delay:calc(var(--i) * 80ms)}
.cvv-comp-t{display:flex;align-items:baseline;gap:8px;font-size:12.5px}
.cvv-comp-t span{flex:1;min-width:0;color:var(--cvv-suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cvv-comp-t b{font-variant-numeric:tabular-nums}
/* Neutro a propósito: «+89 % de gasto» no es bueno ni malo por sí mismo; lo dice el texto */
.cvv-comp-t em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--cvv-suave);min-width:44px;text-align:right}
.cvv-comp-b{height:6px;border-radius:4px;background:var(--cvv-s3);overflow:hidden}
.cvv-comp-b i{display:block;height:100%;border-radius:4px;transform-origin:0 50%;animation:cvvCrece .7s var(--cvv-suave-c) both}
.cvv-comp-b i.hoy{background:var(--k)}
.cvv-comp-b i.antes{background:var(--cvv-tenue);opacity:.6}
.cvv-leyenda{display:flex;gap:14px;margin-top:10px;font-size:11.5px;color:var(--cvv-tenue)}
.cvv-leyenda span{display:inline-flex;align-items:center;gap:6px}
.cvv-leyenda span::before{content:"";width:10px;height:4px;border-radius:2px;background:var(--k)}
.cvv-leyenda span.antes::before{background:var(--cvv-tenue)}
.cvv-rank{display:grid;gap:10px}
.cvv-rank-r{display:grid;grid-template-columns:18px minmax(0,1fr) auto;column-gap:8px;row-gap:4px;align-items:baseline;font-size:12.5px;animation:cvvPaso .4s var(--cvv-suave-c) both;animation-delay:calc(var(--i) * 70ms)}
.cvv-rank-n{font-size:11px;font-weight:700;color:var(--cvv-tenue);text-align:center}
.cvv-rank-e{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cvv-rank-r b{font-variant-numeric:tabular-nums}
.cvv-rank-b{grid-column:2/-1;height:5px;border-radius:3px;background:var(--cvv-s3);overflow:hidden}
.cvv-rank-b i{display:block;height:100%;border-radius:3px;background:var(--k);transform-origin:0 50%;animation:cvvCrece .7s var(--cvv-suave-c) both}
.cvv-rank-r small{grid-column:2/-1;font-size:11.5px;color:var(--cvv-tenue);margin-top:-2px}
:root[data-theme="light"] .cvv-comp-b i.hoy,:root[data-theme="light"] .cvv-rank-b i,:root[data-theme="light"] .cvv-leyenda span::before{background:color-mix(in srgb,var(--k) 68%,#0b1220)}
:root[data-theme="light"] .cvv-leyenda span.antes::before{background:var(--cvv-tenue)}

/* El rastro de trabajo: qué hizo y qué está haciendo, con los segundos */
.cvv-ras{position:relative;margin:4px 0 2px;padding-right:40px}
.cvv-ras.con-texto{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--cvv-linea)}
.cvv-ras ol{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.cvv-ras li{display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.35;color:var(--cvv-suave);animation:cvvPaso .3s var(--cvv-suave-c) both}
.cvv-ras li.hecho{color:var(--cvv-tenue)}
.cvv-ras li>i{position:relative;width:14px;height:14px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--k) 18%,transparent)}
.cvv-ras li>i::after{content:"";position:absolute;left:4.5px;top:2.5px;width:3px;height:6px;border:solid var(--k);border-width:0 1.6px 1.6px 0;transform:rotate(40deg)}
.cvv-ras li.ahora{color:var(--cvv-texto);font-weight:500}
.cvv-ras li .cvv-cumbre{width:18px;height:11px;flex:none;margin:0 -2px}
.cvv-ras-t{position:absolute;right:0;top:1px;font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--cvv-tenue)}
.cvv-ras.plegado{margin:2px 0 6px;padding:0}
.cvv-ras-cab{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--cvv-tenue);font:inherit;font-size:12px;cursor:pointer}
.cvv-ras-cab svg{color:var(--k)}
.cvv-ras-cab em{font-style:normal;font-weight:600;color:var(--k);margin-left:2px}
:root[data-theme="light"] .cvv-ras-cab svg,:root[data-theme="light"] .cvv-ras-cab em,:root[data-theme="light"] .cvv-ras li>i::after{border-color:color-mix(in srgb,var(--k) 62%,#0b1220);color:color-mix(in srgb,var(--k) 62%,#0b1220)}
.cvv-ras.plegado ol{margin-top:6px}

/* La tarjeta de Aprobar (TarjetaAccion de la app) dentro del panel angosto: una columna */
.cvv-bloques .pcp{padding:14px 14px 12px;gap:12px;border-radius:14px}
.cvv-bloques .pcp-cab{flex-wrap:wrap;gap:8px 10px}
.cvv-bloques .pcp-cab>div{flex:1 1 140px;min-width:0}
.cvv-bloques .pcp-espera{order:3;flex-basis:auto}
.cvv-bloques .pcp-tit{font-size:15px}
.cvv-bloques .pcp-grid{grid-template-columns:minmax(0,1fr);gap:12px}
.cvv-bloques .pcp-camp{flex-wrap:wrap;row-gap:4px}
.cvv-bloques .pcp-camp-n{flex:1 1 160px;overflow-wrap:break-word;word-break:normal}
.cvv-bloques .pcp-datos{grid-template-columns:repeat(2,minmax(0,1fr))}
.cvv-bloques .pcp-datos dd{font-size:15px}
.cvv-bloques .pcp-txt{font-size:13.5px}
.cvv-bloques .pcp-pie{gap:10px}
.cvv-bloques .pcp-botones{margin-left:0;width:100%;justify-content:flex-end;flex-wrap:wrap}
.cvv-bloques .pcp-btn{height:34px;padding:0 13px}

/* El analizador del Media Buyer: la cadena que corrió antes de contestar */
.cvv-an{--bien:#34d399;--ojo:#fbbf24;--roto:#f87171;margin:6px 0 10px;border:1px solid var(--cvv-linea);border-radius:12px;background:var(--cvv-fondo);overflow:hidden}
:root[data-theme="light"] .cvv-an{--bien:#059669;--ojo:#b45309;--roto:#dc2626}
.cvv-an-cab{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:0;background:none;color:var(--cvv-texto);font:inherit;text-align:left;cursor:pointer}
.cvv-an-cab:hover{background:var(--cvv-s3)}
.cvv-an-ic{color:var(--k);flex:none}
.cvv-an-cab span{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.cvv-an-cab b{font-size:12.5px}
.cvv-an-cab small{font-size:11.5px;color:var(--cvv-tenue)}
.cvv-an-cab em{font-style:normal;font-size:12px;font-weight:600;color:var(--k)}
:root[data-theme="light"] .cvv-an-cab em,:root[data-theme="light"] .cvv-an-ic{color:color-mix(in srgb,var(--k) 62%,#0b1220)}
.cvv-an-pasos{list-style:none;margin:0;padding:2px 11px 8px;display:grid;gap:0;border-top:1px solid var(--cvv-linea)}
.cvv-an-p{position:relative;display:grid;grid-template-columns:14px minmax(0,1fr);gap:9px;padding:8px 0 6px;animation:cvvPaso .38s var(--cvv-suave-c) both;animation-delay:calc(var(--i) * 70ms)}
/* Mientras piensa, los pasos van saliendo uno por uno: es el trabajo que ya se hizo, a la vista */
.cvv-an.vivo .cvv-an-p{animation-duration:.5s;animation-delay:calc(var(--i) * 420ms)}
.cvv-an.vivo .cvv-an-dec{animation:cvvPaso .5s var(--cvv-suave-c) both;animation-delay:calc(var(--i) * 420ms)}
.cvv-an-p+.cvv-an-p{border-top:1px dashed var(--cvv-linea)}
.cvv-an-p>i{width:9px;height:9px;border-radius:50%;margin-top:4px;background:var(--bien);box-shadow:0 0 0 3px color-mix(in srgb,var(--bien) 18%,transparent)}
.cvv-an-p.aviso>i{background:var(--ojo);box-shadow:0 0 0 3px color-mix(in srgb,var(--ojo) 18%,transparent)}
.cvv-an-p.mal>i{background:var(--roto);box-shadow:0 0 0 3px color-mix(in srgb,var(--roto) 18%,transparent)}
.cvv-an-p b{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12.5px}
.cvv-an-est{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--bien)}
.cvv-an-p.aviso .cvv-an-est{color:var(--ojo)}.cvv-an-p.mal .cvv-an-est{color:var(--roto)}
.cvv-an-p p{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--cvv-suave)}
.cvv-an-dec{display:grid;gap:6px;padding:9px 11px 11px;border-top:1px solid var(--cvv-linea)}
.cvv-an-d{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;row-gap:2px;align-items:baseline;font-size:12.5px}
.cvv-an-d b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cvv-an-d small{grid-column:2;font-size:11.5px;color:var(--cvv-tenue);line-height:1.4}
.cvv-an-v{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:999px;color:var(--cvv-suave);background:var(--cvv-s3)}
.cvv-an-d.cortar .cvv-an-v{color:var(--roto);background:color-mix(in srgb,var(--roto) 14%,transparent)}
.cvv-an-d.escalar .cvv-an-v{color:var(--bien);background:color-mix(in srgb,var(--bien) 14%,transparent)}
.cvv-an-d.arreglar_destino .cvv-an-v,.cvv-an-d.problema_sitio .cvv-an-v{color:var(--ojo);background:color-mix(in srgb,var(--ojo) 14%,transparent)}
@keyframes cvvPaso{from{opacity:0;transform:translateY(4px)}}

/* Tema claro: los colores de cada especialista, un tono más oscuros para que se lean sobre blanco */
:root[data-theme="light"] .cvv-nom,:root[data-theme="light"] .cvv-globo-q,:root[data-theme="light"] .cvv-bienv h2 em{color:color-mix(in srgb,var(--k) 62%,#0b1220)}
:root[data-theme="light"] .cvv-txtin{background:transparent!important;box-shadow:none!important;border:0!important}

/* Celular: el panel ocupa la pantalla y no empuja nada */
@media (max-width:760px){
  .cop.sitio.vivo-abierto{padding-right:0}
  .cvv-panel{width:100%;border-left:0}
  .cvv-salas{display:flex;overflow-x:auto;scrollbar-width:none}.cvv-sala{flex:none;padding:0 12px}
  .cvv-dock{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .cvv-mono{width:70px;height:78px}.cvv-mono-img{width:66px}
  .cvv-globo{max-width:calc(100vw - 110px)}
}
@media (prefers-reduced-motion:reduce){
  .cvv-dock *,.cvv-panel *,.cvv-dock,.cvv-panel,.cop.sitio{animation:none!important;transition:none!important}
}

/* 22-oct (Daniel: «no presenta muy bien los creativos»): en el panel la galería pedía columnas de
   172 px y caía a UNA — cada anuncio ocupaba todo el ancho y se cortaba. Dos columnas compactas. */
.cvv-bloques .gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px}
.cvv-bloques .gal-foto{border-radius:10px}
.cvv-bloques .gal-roas b{font-size:13px}
.cvv-bloques .gal-nom{margin-top:6px;font-size:12px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cvv-bloques .gal-num{font-size:11px}

/* EL VEREDICTO EN EL PANEL (22-oct-2026). Daniel: «debes mejorar la estética… demasiada
   info, el cliente no entiende nada». Heredaba el `margin:0 -16px` del chat grande
   (.cop-resp .ver) y aquí se cortaba por la izquierda. En el panel es una tarjeta
   sola, con el titular a tamaño de lectura y las cifras en dos columnas. */
.cop-resp .cvv-bloques .ver,.cvv-bloques .ver{margin:0;border:1px solid;border-radius:14px;padding:14px 14px 12px;max-width:100%}
.cvv-bloques .ver-tit{font-size:16px;line-height:1.4;max-width:none}
.cvv-bloques .ver-cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin-top:12px}
.cvv-bloques .ver-que{text-transform:none;letter-spacing:0;font-size:12px}
.cvv-bloques .ver-cifra{justify-content:flex-end}
.cvv-bloques .ver-cifra b{font-size:19px}
.cvv-bloques .ver-accion{font-size:13.5px;margin-top:12px;padding-top:12px;border-top:1px solid color-mix(in srgb,currentColor 12%,transparent)}

/* EL ÁRBOL DE CAMPAÑAS EN EL PANEL (22-oct-2026): el nombre en su renglón y los números
   debajo. En cuatro columnas no cabía y la última («$847/conv») se salía del panel. */
.cvv-bloques .arb-fila{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:2px;padding:7px 12px}
.cvv-bloques .arb-nom{flex:1 1 calc(100% - 24px)}
.cvv-bloques .arb-hijo .arb-nom{flex-basis:100%}
.cvv-bloques .arb-jefe .arb-etq,.cvv-bloques .arb-jefe .arb-nom+.arb-num{margin-left:24px}
.cvv-bloques .arb-roas{margin-left:auto}
.cvv-bloques .arb-hijo{padding-left:36px}
.cvv-bloques .arb-pie,.cvv-bloques .arb-dias{padding-left:12px;padding-right:12px}
/* Referencias de la competencia en el panel: dos columnas. */
.cvv-bloques .refs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px 12px}

/* CONVERSACIÓN ÚNICA (22-oct-2026): la carita de quien contestó, junto a su nombre. */
.cvv-quien{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;overflow:hidden;margin-right:6px;flex:0 0 auto;
  background:color-mix(in srgb,var(--k) 22%,transparent);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--k) 55%,transparent);vertical-align:middle}
.cvv-quien img{width:100%;height:100%;object-fit:cover}
.cvv-nom{align-items:center}
.cvv-av img{animation:cvvCara .35s var(--cvv-suave-c, ease) both}
@keyframes cvvCara{from{opacity:0;transform:scale(.9)}}
@media (prefers-reduced-motion:reduce){.cvv-av img{animation:none}}

/* EL HÍBRIDO (23-oct-2026): en el Centro de mando la conversación es una columna fija y más ancha. */
html.vivo-mando{--cvv-w:clamp(420px,38vw,620px)}
html.vivo-mando .cvv-panel{box-shadow:none}
/* ¿Te sirvió? (23-oct): discreto, en línea, como texto; no compite con la respuesta. */
.cvv-op{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:10px;font-size:12px;color:color-mix(in srgb,currentColor 55%,transparent)}
.cvv-op span{margin-right:4px}
.cvv-op button{border:0;background:transparent;color:inherit;font:inherit;font-weight:600;padding:4px 8px;border-radius:7px;cursor:pointer}
.cvv-op button:hover:not(:disabled){background:color-mix(in srgb,currentColor 9%,transparent);color:var(--text,inherit)}
.cvv-op button:focus-visible,.cvv-op-form button:focus-visible{outline:2px solid var(--k,#3b82f6);outline-offset:1px}
.cvv-op em{flex-basis:100%;font-style:normal;color:#f87171}
.cvv-op.hecho{font-style:normal}
.cvv-op-form{display:flex;align-items:center;gap:6px;margin-top:10px;padding:4px 4px 4px 10px;border:1px solid color-mix(in srgb,currentColor 16%,transparent);border-radius:10px}
.cvv-op-form input{flex:1;min-width:0;border:0!important;background:transparent!important;box-shadow:none!important;outline:0;color:inherit;font:inherit;font-size:13px;padding:5px 0}
.cvv-op-form button{border:0;border-radius:7px;padding:5px 10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;background:var(--k,#3b82f6);color:#fff}
.cvv-op-form button.quieto{background:transparent;color:color-mix(in srgb,currentColor 60%,transparent)}
.cvv-op.hecho > span{margin-right:2px}
/* Soltar una imagen en el panel (23-oct-2026). */
.cvv-soltar{position:absolute;inset:10px;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:16px;border:2px dashed var(--k,#3b82f6);background:color-mix(in srgb,var(--k,#3b82f6) 14%,var(--cvv-fondo,#0b0b0c));pointer-events:none;text-align:center;padding:16px}
.cvv-soltar b{font-size:16px;font-weight:600}
.cvv-soltar span{font-size:13px;color:color-mix(in srgb,currentColor 62%,transparent)}