/* Probador de Mark con celular (2026-09-18) — lógica en /lib/probadorMark.js.
   El celular tiene colores propios fijos (es "otra pantalla": WhatsApp o
   Instagram), el resto usa los tokens de la app en los dos temas. */
#pmOverlay{position:fixed; inset:0; z-index:98; background:var(--bg); display:none; flex-direction:column; padding:12px clamp(10px,2vw,24px); padding-top:calc(12px + env(safe-area-inset-top,0px)); gap:12px; overflow:hidden;}
.pm-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.pm-top > b{font:800 16px 'Montserrat',sans-serif;}
.pm-sub{font-size:12px; color:var(--muted);}
.pm-cuerpo{flex:1; min-height:0; display:grid; grid-template-columns:minmax(230px,300px) minmax(300px,380px) minmax(260px,1fr); gap:16px; justify-content:center;}
.pm-col{min-height:0; display:flex; flex-direction:column; gap:10px; overflow-y:auto; scrollbar-width:thin;}
.pm-izq, .pm-der{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:14px;}
.pm-col h4{margin:6px 0 0; font:800 10px 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:flex; justify-content:space-between; gap:8px; align-items:baseline;}
.pm-col h4 span{text-transform:none; letter-spacing:0; font-weight:500; font-size:10.5px;}
.pm-ayuda{font-size:12px; color:var(--muted); margin:0; line-height:1.45;}
.pm-ayuda a{color:var(--yellow);}
.pm-chips{display:flex; flex-wrap:wrap; gap:6px;}
.pm-personajes{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.pm-pj{background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:8px; cursor:pointer; color:var(--text); display:flex; flex-direction:column; gap:2px; align-items:flex-start; font-family:'Inter',sans-serif; text-align:left;}
.pm-pj span{font-size:18px;} .pm-pj b{font-size:11.5px; font-weight:700;}
.pm-pj:hover, .pm-pj.on{border-color:var(--yellow);}
.pm-pj[disabled]{opacity:.5; cursor:wait;}
.pm-check{font-size:12px; color:var(--muted); display:flex; gap:8px; align-items:center; cursor:pointer;}

/* celular */
.pm-centro{align-items:center; overflow:visible;}
.pm-phone{width:100%; max-width:360px; height:100%; max-height:760px; min-height:420px; border:11px solid #1b1b19; border-radius:42px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 0 0 2px #3a3a36, 0 26px 60px -22px rgba(0,0,0,.6); font-size:13.5px;}
.pm-phone.wa{background:#0b141a; color:#e9edef;} .pm-phone.ig{background:#000; color:#f5f5f5;}
.pm-notch{height:24px; display:grid; place-items:center; flex:none;} .pm-notch i{width:88px; height:15px; border-radius:99px; background:#000; display:block; box-shadow:0 0 0 1px #222;}
.pm-band{flex:none; background:repeating-linear-gradient(-45deg,#FFE000 0 12px,#15140F 12px 24px); padding:4px;}
.pm-band span{display:block; background:#FFE000; color:#15140F; text-align:center; font:800 10px 'Inter',sans-serif; letter-spacing:.08em; padding:4px; border-radius:3px;}
.pm-head{flex:none; display:flex; align-items:center; gap:10px; padding:9px 12px;}
.wa .pm-head{background:#202c33;} .ig .pm-head{border-bottom:1px solid #262626;}
.pm-av{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font:800 11px 'Inter',sans-serif; color:#fff; background:#2a3942; flex:none;}
.ig .pm-av{background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);}
.pm-head b{display:block; font-size:13px;} .pm-head small{font-size:10.5px; opacity:.6;}
.pm-hilo{flex:1; min-height:0; overflow-y:auto; padding:12px 10px; display:flex; flex-direction:column; gap:6px; scrollbar-width:thin;}
.pm-vacio{margin:auto; text-align:center; font-size:12px; opacity:.55; padding:0 18px; line-height:1.5;}
.pm-w{max-width:84%; padding:7px 10px; border-radius:10px; line-height:1.4; word-break:break-word; position:relative;}
.pm-w.out{align-self:flex-end;} .pm-w.in{align-self:flex-start;}
.wa .pm-w.out{background:#005c4b;} .wa .pm-w.in{background:#202c33;}
.ig .pm-w.out{background:#3797f0; border-radius:18px;} .ig .pm-w.in{background:#262626; border-radius:18px;}
.pm-nota{display:inline-block; margin-left:8px; font:800 10px 'Inter',sans-serif; padding:1px 6px; border-radius:99px; background:#444; color:#fff; cursor:pointer; vertical-align:middle;}
.pm-nota.nok{background:#1B9E55;} .pm-nota.nmed{background:#D98A00;} .pm-nota.nmal{background:#D6362E;}
.pm-typing{display:flex; gap:4px; padding:11px 12px;}
.pm-typing i{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.5; animation:pmDot 1.2s infinite;}
.pm-typing i:nth-child(2){animation-delay:.2s;} .pm-typing i:nth-child(3){animation-delay:.4s;}
@keyframes pmDot{0%,60%,100%{opacity:.25; transform:none;} 30%{opacity:.9; transform:translateY(-3px);}}
@media (prefers-reduced-motion:reduce){ .pm-typing i{animation:none;} }
.pm-comp{flex:none; display:flex; gap:8px; align-items:flex-end; padding:8px 10px 16px;}
.pm-comp textarea{flex:1; resize:none; border:0; outline:none; border-radius:20px; padding:9px 14px; font:400 14px 'Inter',sans-serif; color:inherit; max-height:96px;}
.wa .pm-comp textarea{background:#202c33;} .ig .pm-comp textarea{background:#262626;}
.pm-send{width:38px; height:38px; border-radius:50%; border:0; color:#fff; cursor:pointer; font-size:15px; flex:none;}
.wa .pm-send{background:#00a884;} .ig .pm-send{background:#3797f0;}
.pm-send[disabled]{opacity:.5;}

/* evaluación */
.pm-ev{display:flex; gap:12px; align-items:center;}
.pm-ev p{margin:0; font-size:12.5px; line-height:1.45;}
.pm-ev-nota{flex:none; width:58px; height:58px; border-radius:14px; display:flex; align-items:baseline; justify-content:center; padding-top:13px; color:#fff;}
.pm-ev-nota b{font:900 24px 'Montserrat',sans-serif;} .pm-ev-nota span{font-size:10px; opacity:.85;}
.pm-ev-nota.nok{background:#1B9E55;} .pm-ev-nota.nmed{background:#D98A00;} .pm-ev-nota.nmal{background:#D6362E;}
.pm-checks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;}
.pm-checks li{display:flex; gap:9px; align-items:flex-start; font-size:12.5px;}
.pm-checks li > span{flex:none; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:800; color:#fff;}
.pm-checks li.ok > span{background:#1B9E55;} .pm-checks li.mal > span{background:#D6362E;}
.pm-checks small{display:block; color:var(--muted); font-size:11.5px; line-height:1.4;}
.pm-der code{font-size:10.5px; color:var(--yellow);}

/* palabra clave, comparar, historial */
.pm-linea{display:flex; flex-direction:column; gap:0; border-left:2px solid var(--border); margin-left:6px;}
.pm-paso{position:relative; padding:0 0 16px 16px; display:flex; flex-direction:column; gap:3px;}
.pm-paso::before{content:""; position:absolute; left:-6px; top:3px; width:10px; height:10px; border-radius:50%; background:var(--yellow);}
.pm-paso.cortado{opacity:.6;} .pm-paso.cortado::before{background:var(--red);}
.pm-cuando{font:800 11px 'Inter',sans-serif; color:var(--yellow); text-transform:capitalize;}
.pm-paso b{font-size:12px;} .pm-paso p{margin:3px 0; font-size:12.5px; line-height:1.45; background:var(--panel-2); border-radius:8px; padding:7px 9px;}
.pm-paso small{display:block; font-size:11px; color:var(--muted);}
.pm-cmp{background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:10px 12px;}
.pm-cmp b{font-size:12.5px; color:var(--yellow);} .pm-cmp p{margin:6px 0; font-size:12.5px; line-height:1.5;} .pm-cmp small{font-size:11px; color:var(--muted);}
.pm-hist{width:100%; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:8px 10px; cursor:pointer; color:var(--text); display:flex; justify-content:space-between; align-items:center; gap:8px; text-align:left; font-family:'Inter',sans-serif; margin-bottom:6px;}
.pm-hist:hover{border-color:var(--yellow);}
.pm-hist b{display:block; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px;} .pm-hist small{font-size:10.5px; color:var(--muted);}

@media (max-width:980px){
  #pmOverlay{overflow-y:auto;}
  .pm-cuerpo{grid-template-columns:1fr; flex:none;}
  .pm-col{overflow:visible;}
  .pm-centro{order:-1;}
  .pm-phone{height:620px;}
}

/* segunda tanda: adjuntos, examen, situación */
.pm-clip{width:34px; height:38px; border:0; background:none; color:inherit; font-size:17px; cursor:pointer; flex:none; opacity:.8;}
.pm-adj{flex:none; font-size:11.5px; padding:6px 12px; display:flex; gap:8px; align-items:center; opacity:.85;}
.pm-adj button{background:none; border:0; color:inherit; cursor:pointer;}
.pm-adj-b{display:block; margin-bottom:4px; font-size:12px; opacity:.9;} .pm-adj-b img{display:block; max-width:160px; max-height:140px; border-radius:6px;}
.pm-info{align-self:center; max-width:92%; text-align:center; font-size:11px; line-height:1.4; background:rgba(255,224,0,.14); color:#FFE98A; border-radius:8px; padding:6px 10px;}
.pm-ex-fila{display:grid; grid-template-columns:1fr auto; gap:4px 10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:12.5px; cursor:pointer;}
.pm-ex-fila small{grid-column:1 / -1; color:var(--muted); font-size:11.5px; line-height:1.4;}
.pm-ex-fila .d{font-size:10.5px; font-weight:700;} .pm-ex-fila .d.sube{color:var(--green);} .pm-ex-fila .d.baja{color:var(--red);}