/* La escena de Reacciones es un escenario noche en los dos temas: sus tonos son constantes. */
:root{--ps-tinta-2:#C9D7EA;--ps-foco:#E0B654;--ps-cab:#DCD5C6;--ps-pd-filo:#C9C2B4;--ps-secs:#DCEBFA;--ps-pensando:#5B8CB8}
/* Personas (web/personas.js): fichas de las buyer personas y la escena de reacciones. Reúsa .jz-bar, .jz-filtro,
   .jz-tag, .dlg-head y .btn; aquí solo lo propio. Texto ≥ 14 px, toques ≥ 44 px. Acento y anchos por CSSOM (--ps-a, --v, --i). */
#personas{max-width:1280px;margin:0 auto}
dialog.proy #personas{flex:1;min-height:0;min-width:0;width:100%;max-width:none;margin:0;overflow-y:auto;padding:18px 28px 40px}
.ps-sub,.ps-nota{font-size:.875rem;color:var(--tinta-2);margin:4px 0 10px;line-height:1.45}
.ps-cargando{color:var(--neutro)}
.ps-vacio{background:var(--tarjeta);border-radius:16px;padding:24px;text-align:center}
.ps-vacio p{margin:0 0 6px}

/* ---- Personaje: render 3D o marcador neutro (escultura de estudio en CSS) ---- */
.ps-fig{--ps-a:#7DD3FC;--t:64px;position:relative;width:var(--t);height:var(--t);flex:none;display:grid;place-items:end center}
.ps-fig.grande{--t:120px}
.ps-fig img{width:100%;height:100%;object-fit:contain;position:absolute;inset:0}
.ps-fig.con-img .ps-esc{display:none}
.ps-esc{position:relative;width:100%;height:100%;display:block}
.ps-esc::before{content:"";position:absolute;left:12%;right:12%;bottom:0;height:12%;border-radius:50%;background:radial-gradient(var(--papel-2),var(--linea));box-shadow:0 0 0 1.5px var(--ps-foco) inset}
.ps-cue{position:absolute;left:50%;bottom:8%;width:56%;height:52%;translate:-50% 0;border-radius:44% 44% 22% 22%/56% 56% 18% 18%;
  background:radial-gradient(120% 90% at 30% 20%,color-mix(in srgb,var(--ps-a) 55%,var(--blanco)),var(--ps-a) 60%,color-mix(in srgb,var(--ps-a) 70%,var(--negro)));box-shadow:0 2px 6px rgba(var(--sombra-rgb),.18)}
.ps-esc[data-sil="ancha"] .ps-cue{width:72%;height:44%;border-radius:40% 40% 18% 18%/50% 50% 16% 16%}
.ps-esc[data-sil="redonda"] .ps-cue{width:64%;height:46%;border-radius:50% 50% 40% 40%}
.ps-esc[data-sil="alta"] .ps-cue{width:52%;height:58%}
.ps-cab{position:absolute;left:50%;bottom:58%;width:30%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--blanco),var(--crema) 55%,var(--ps-cab));box-shadow:0 1px 3px rgba(var(--sombra-rgb),.2)}
.ps-cab::after{content:"";position:absolute;left:12%;right:12%;top:46%;height:12%;border-radius:4px;background:var(--cielo);box-shadow:0 0 6px var(--cielo)}
.ps-esc[data-sil="ancha"] .ps-cab{bottom:50%}
.ps-esc[data-sil="redonda"] .ps-cab{bottom:52%;width:32%}
.ps-esc[data-sil="alta"] .ps-cab{bottom:64%;width:28%}
.ps-obj{position:absolute;left:28%;bottom:18%;width:42%;aspect-ratio:1;border-radius:30%;display:grid;place-items:center;background:var(--papel);color:color-mix(in srgb,var(--ps-a) 70%,var(--negro));box-shadow:0 1px 3px rgba(var(--sombra-rgb),.25)}

/* ---- Fichas ---- */
.ps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.ps-card{background:var(--tarjeta);border-radius:18px;padding:16px;box-shadow:0 1px 2px rgba(var(--sombra-rgb),.06);display:flex;flex-direction:column;gap:10px;min-width:0;border-top:4px solid var(--linea)}
.ps-card-top{display:flex;gap:12px;align-items:center;min-width:0}
.ps-card .ps-fig{--t:84px}
.ps-quien{min-width:0}
.ps-quien h3{font-size:1.125rem;line-height:1.2;overflow-wrap:anywhere}
.ps-ocu{margin:4px 0 0;font-size:.9375rem;color:var(--tinta-2);line-height:1.35}
.ps-frase{margin:0;font-family:var(--display);font-weight:600;font-size:1.0625rem;line-height:1.35;color:var(--tinta)}
.ps-chips{display:flex;flex-wrap:wrap;gap:6px}
.jz-tag.ps-pd,.ps-pd-t{border:1px dashed var(--ps-pd-filo);background:transparent;color:var(--neutro);font-weight:600}
.ps-mas summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;font-size:.9375rem}
.ps-mas h4{font-size:.875rem;margin:10px 0 4px;color:var(--tinta-2);text-transform:uppercase;letter-spacing:.04em}
.ps-mas ul{margin:0;padding-left:18px;font-size:.9375rem;line-height:1.45}
.ps-ctx{font-size:.9375rem;margin:0;line-height:1.45}
.ps-pie{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:auto;border-top:1px solid var(--linea);padding-top:10px}
.ps-fuente{font-size:.875rem;color:var(--neutro);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-fuente span{font-weight:700;color:var(--tinta-2)}

/* ---- Controles del análisis ---- */
.ps-ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:4px 0 6px}
dialog form.ps-ctl{padding:0;max-height:none;overflow:visible}  /* dialog form trae el relleno de los diálogos */
.ps-campo{display:grid;gap:4px;margin:0;font-size:.875rem;flex:1 1 300px;min-width:0}
.ps-campo.ps-mod{flex:0 1 180px}
.ps-campo select{min-height:44px;width:100%;border:1px solid var(--linea);border-radius:12px;padding:0 10px;background:var(--tarjeta);font-size:1rem}
.ps-cuota{font-size:.875rem;color:var(--tinta-2);margin:6px 0 0}
.ps-cuota b{color:var(--tinta);margin-right:6px}
.ps-hist{margin:10px 0}
.ps-hist button{min-height:44px}

/* ---- Escena: las personas frente a la pantalla ---- */
.ps-escena{position:relative;border-radius:22px;padding:22px 18px 18px;margin:8px 0 14px;overflow:hidden;color:var(--papel);
  background:radial-gradient(70% 55% at 50% 0%,rgba(125,211,252,.22),transparent 70%),linear-gradient(180deg,var(--marino-2),var(--marino) 70%)}
.ps-escena::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-40px;height:120px;border-radius:50%;background:radial-gradient(rgba(125,211,252,.16),transparent 70%);pointer-events:none}
.ps-pantalla{position:relative;z-index:1;max-width:620px;margin:0 auto 22px;border-radius:14px;padding:12px 16px 14px;background:rgba(244,241,234,.08);
  border:1px solid rgba(125,211,252,.35);box-shadow:0 0 32px rgba(125,211,252,.18),inset 0 1px 0 rgba(255,255,255,.08);display:grid;gap:4px;text-align:center}
.ps-pantalla b{font-family:var(--display);font-size:1.0625rem;line-height:1.25;overflow-wrap:anywhere}
.ps-pantalla small{font-size:.875rem;color:var(--ps-tinta-2)}
.ps-pdots{display:flex;gap:5px;justify-content:flex-start}
.ps-pdots i{width:8px;height:8px;border-radius:50%;background:rgba(244,241,234,.35)}
.ps-secs{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:4px}
.ps-secs i{font-style:normal;font-size:.875rem;padding:1px 9px;border-radius:999px;background:rgba(125,211,252,.14);color:var(--ps-secs)}
.ps-fila{position:relative;z-index:1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:14px;align-items:start;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;overscroll-behavior-x:contain}
.ps-col{scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;animation:psEntra .55s linear(0,.36 12%,.79 26%,1.03 40%,1.07 50%,1.02 64%,1) both;animation-delay:calc(var(--i,0) * 140ms)}
.ps-col.fallo{opacity:.6}
@keyframes psEntra{from{opacity:0;translate:0 18px;scale:.94}}
.ps-globo{position:relative;margin:0;background:var(--papel);color:var(--tinta);border-radius:16px;padding:10px 12px;font-size:.9375rem;line-height:1.35;font-weight:500;
  min-height:84px;width:100%;display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.25);overflow-wrap:anywhere;
  animation:psGlobo .45s ease-out both;animation-delay:calc(var(--i,0) * 140ms + 260ms)}
.ps-globo::after{content:"";position:absolute;left:50%;bottom:-8px;translate:-50% 0;border:9px solid transparent;border-bottom:0;border-top-color:var(--papel)}
@keyframes psGlobo{from{opacity:0;scale:.6;transform-origin:50% 100%}}
.ps-globo.pensando{gap:6px;min-height:46px;width:auto;padding:12px 18px}
.ps-globo.pensando i{width:8px;height:8px;border-radius:50%;background:var(--ps-pensando);animation:psPunto 1.1s ease-in-out infinite}
.ps-globo.pensando i:nth-child(2){animation-delay:.15s}.ps-globo.pensando i:nth-child(3){animation-delay:.3s}
@keyframes psPunto{50%{translate:0 -4px;opacity:.4}}
.ps-quienb{display:flex;flex-direction:column;align-items:center;gap:4px;background:transparent;border:0;color:inherit;padding:4px 6px;border-radius:14px;min-height:44px;cursor:pointer}
.ps-quienb[aria-expanded="true"]{background:rgba(125,211,252,.16)}
.ps-quienb:focus-visible{outline:2px solid var(--cielo)}
.ps-escena .ps-fig{--t:132px;animation:psFlota 5s ease-in-out infinite;animation-delay:calc(var(--i,0) * -0.9s)}
.ps-col .ps-fig{animation-delay:calc(var(--i,0) * -0.9s)}
@keyframes psFlota{50%{translate:0 -4px}}
.ps-nom{font-size:.9375rem;font-weight:700;text-align:center;line-height:1.25;max-width:22ch}
.ps-med{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:8px;width:100%;font-size:.875rem}
.ps-med span:first-child{color:var(--ps-tinta-2)}
.ps-med b{font-weight:700;min-width:46px;text-align:right}
.ps-barra{height:8px;border-radius:999px;background:rgba(244,241,234,.14);overflow:hidden}
.ps-barra i{display:block;height:100%;width:calc(var(--v,0) * 1%);border-radius:inherit;background:var(--cielo);transform-origin:left;animation:psBarra .8s ease-out both;animation-delay:calc(var(--i,0) * 140ms + 400ms)}
.n-alto .ps-barra i,.n-alta .ps-barra i{background:var(--verde-claro)}
.n-bajo .ps-barra i,.n-baja .ps-barra i{background:var(--naranja)}
@keyframes psBarra{from{scale:0 1}}
.ps-tags{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.ps-escena .jz-tag{display:inline-flex;align-items:center;gap:4px;background:rgba(244,241,234,.12);color:var(--papel)}
.ps-escena .jz-tag.ok{background:rgba(74,222,128,.18);color:var(--menta)}
.ps-escena .jz-tag.mal{background:rgba(251,146,60,.22);color:var(--durazno)}
.ps-escena .jz-tag.obj{background:rgba(251,146,60,.16);color:var(--durazno)}
.ps-escena .jz-tag.s-irse{background:rgba(248,113,113,.2);color:var(--rosa-claro)}
.ps-escena .jz-tag.s-comprar,.ps-escena .jz-tag.s-agendar{background:rgba(74,222,128,.18);color:var(--menta)}
.ps-estado{position:relative;z-index:1;text-align:center;margin:14px 0 0;font-size:.9375rem}
.ps-estado small{color:var(--ps-tinta-2)}
.ps-escena.corre .ps-fig{animation-duration:2.4s}

/* ---- Detalle de una persona, resumen y qué arreglar ---- */
.ps-det{background:var(--tarjeta);border-radius:16px;padding:14px 16px;margin:0 0 14px;box-shadow:0 1px 2px rgba(var(--sombra-rgb),.06)}
.ps-det h4{margin:0 0 8px;font-size:1rem}
.ps-det ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ps-det li p{margin:4px 0;font-size:.9375rem;line-height:1.4}
.ps-det small{color:var(--neutro);font-size:.875rem}
q{quotes:"«" "»";font-style:italic}
.ps-det q,.ps-arreglar q,.ps-funciona q{display:block;font-size:.9375rem;color:var(--tinta-2);border-left:3px solid var(--cielo);padding-left:10px;margin:4px 0;overflow-wrap:anywhere}
.ps-det q.dudosa{border-left-color:var(--naranja)}
.ps-resumen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,2fr);gap:10px;margin-bottom:8px}
.ps-dato{background:var(--tarjeta);border-radius:16px;padding:12px 14px;display:grid;gap:2px;align-content:start;box-shadow:0 1px 2px rgba(var(--sombra-rgb),.06);min-width:0}
.ps-dato>span{font-size:.875rem;color:var(--tinta-2)}
.ps-dato b{font-family:var(--display);font-size:1.75rem;line-height:1.1}
.ps-dato b small{font-size:1rem}
.ps-dato em{font-style:normal;font-size:.875rem;font-weight:700;color:var(--neutro)}
.ps-dato em.sube{color:var(--ok)}.ps-dato em.baja{color:var(--err)}
.ps-dato small{font-size:.875rem;color:var(--tinta-2)}
.ps-apil{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--papel);margin:8px 0 4px}
.ps-apil i{width:calc(var(--v,0) * 1%);background:var(--cielo)}
.ps-apil i.s-comprar,.ps-apil i.s-agendar{background:var(--verde)}.ps-apil i.s-preguntar{background:var(--cielo-hondo)}
.ps-apil i.s-compartir{background:var(--morado)}.ps-apil i.s-irse{background:var(--naranja-2)}
.ps-arreglar{background:var(--tarjeta);border-radius:18px;padding:16px;box-shadow:0 1px 2px rgba(var(--sombra-rgb),.06)}
.ps-arr-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ps-arr-h h3{font-size:1.125rem}
.ps-arreglar ol{margin:0;padding-left:22px;display:grid;gap:12px}
.ps-arreglar li::marker{font-family:var(--display);font-weight:800}
.ps-arreglar li>div{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ps-arreglar li p{margin:4px 0;font-size:.9375rem;line-height:1.45}
.ps-afecta{color:var(--tinta-2)}
.ps-arreglar h4{margin:16px 0 6px;font-size:.9375rem}
.ps-funciona{margin:0;padding-left:18px;font-size:.9375rem;display:grid;gap:6px}

/* ---- Diálogo de edición ---- */
.ps-form{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.ps-form label{margin:12px 0 0}
.ps-form .ancho{grid-column:1/-1}
.ps-form input,.ps-form textarea,.ps-form select{display:block;width:100%;margin-top:6px;min-height:44px;border:1px solid var(--linea);border-radius:12px;padding:8px 12px;background:var(--tarjeta);font-size:1rem;color:var(--tinta);font-weight:400}
.ps-form textarea{line-height:1.45;resize:vertical}
.ps-form input[type=color]{padding:4px;height:44px}
.ps-fset{border:1px solid var(--linea);border-radius:14px;padding:4px 14px 14px;margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr 120px;gap:0 12px}
.ps-fset legend{font-weight:700;font-size:.875rem;padding:0 6px}
.ps-acts{display:flex;justify-content:space-between;gap:10px;margin-top:16px}
.ps-borrar{color:var(--err)}

@media (max-width:760px){
  dialog.proy #personas{padding:14px 14px 32px}
  .ps-fila{grid-auto-columns:78%}
  .ps-escena .ps-fig{--t:116px}
  .ps-secs{display:none}
  .ps-campo.ps-mod{flex:1 1 0}
  .ps-ctl .btn{flex:1 1 0}
  .ps-hist{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .ps-hist button{flex:none}
  .ps-resumen{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ps-dato.ancho{grid-column:1/-1}
  .ps-form,.ps-fset{grid-template-columns:1fr}
  .ps-escena{padding:18px 12px 14px;border-radius:18px}
}
@media (prefers-reduced-motion:reduce){
  .ps-col,.ps-globo,.ps-barra i,.ps-escena .ps-fig,.ps-globo.pensando i{animation:none}
}