/* ═══════════════════════════════════════════════════════════════════════
   Tarjeta de cliente del panel — js/14-admin.js (.ptcard.ptq)

   Misma arquitectura que la de IronQx, con la voz de OneProtocol:
     · cabecera: avatar con aro de objetivo, nombre, objetivo y estado, y a la
       derecha membresía + plan (sus reglas siguen en 05/20);
     · un solo panel hundido con cuatro datos: semana, peso, adherencia y
       actividad. Lo que vivía en el desplegable entra aquí (peso meta, días
       activos) o ya lo dice el aro (avance al objetivo);
     · avisos fijados y recordatorio, si los hay;
     · pie: nota clínica (flexible) y push (su ancho), a la misma altura.
   Sin desplegable ni botones de más: tocar la tarjeta abre al cliente.
   Inter en todo, el acento de la marca del coach, nada por debajo de 10 px.
   ═══════════════════════════════════════════════════════════════════════ */
#scr-admin .ptcard.ptq{padding:16px 16px 14px 18px!important;gap:12px!important}

/* El nombre completo, en dos líneas si hace falta: cortado a una no se reconocía */
#scr-admin .ptq .ptc-name{white-space:normal!important;overflow:hidden!important;text-overflow:clip!important;
  display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.15!important}
#scr-admin .ptq .ptc-hd-row1{min-width:0}

/* ── Panel de datos ── */
#scr-admin .ptq-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(0,0,0,.26),rgba(0,0,0,.16));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055),inset 0 1px 2px rgba(0,0,0,.35)}
#scr-admin .ptq-stat{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:11px 4px 10px;margin:0;border:0;background:none;color:inherit;font:inherit;text-align:center;-webkit-tap-highlight-color:transparent}
#scr-admin .ptq-stat+.ptq-stat::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.09),transparent)}
#scr-admin .ptq-stat.is-tap{cursor:pointer;transition:background .15s}
#scr-admin .ptq-stat.is-tap:active{background:rgba(var(--accent-rgb),.08)}
#scr-admin .ptq-stat.is-tap:focus-visible{outline:2px solid rgba(var(--accent-rgb),.7);outline-offset:-2px;border-radius:12px}
#scr-admin .ptq-lbl{font:800 10px/1 var(--font,"Inter"),sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--cx-label,rgba(214,224,238,.55));white-space:nowrap}
#scr-admin .ptq-val{display:flex;align-items:baseline;justify-content:center;gap:2px;white-space:nowrap;
  min-height:21px;font:800 21px/1 var(--font,"Inter"),sans-serif;letter-spacing:-.035em;color:#f4f7fb;font-variant-numeric:tabular-nums}
#scr-admin .ptq-val small{font-size:11px;font-weight:650;letter-spacing:0;color:var(--cx-label,rgba(214,224,238,.55))}
#scr-admin .ptq-stat.is-empty .ptq-val{color:rgba(255,255,255,.22)}
#scr-admin .ptq-meta{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 10.5px/1.15 var(--font,"Inter"),sans-serif;color:var(--cx-sub,rgba(214,224,238,.62))}
#scr-admin .ptq-meta .ptcard-trend{display:inline-flex;align-items:center;gap:2px;padding:1px 6px!important;border-radius:6px;font-size:10px!important}
#scr-admin .ptq-meta .ptcard-trend span{font-size:9px!important}
/* Adherencia: neutra; verde solo cuando cumple. Sin rojo. */
#scr-admin .ptq-adh.is-good{color:#4ade80}
#scr-admin .ptq-adh.is-mid{color:#f4f7fb}
#scr-admin .ptq-adh.is-low{color:#d6a44b}
/* Actividad: el color dice qué hacer con este cliente hoy */
#scr-admin .ptq-act .ptq-val i{align-self:center;width:7px;height:7px;margin-right:4px;border-radius:50%;background:currentColor;flex:none}
#scr-admin .ptq-act.is-live :is(.ptq-val,.ptq-meta){color:#4ade80}
#scr-admin .ptq-act.is-live .ptq-val i{box-shadow:0 0 0 3px rgba(74,222,128,.2);animation:ptq-pulse 2.4s ease-in-out infinite}
#scr-admin .ptq-act.is-ok :is(.ptq-val,.ptq-meta){color:#9be3b8}
#scr-admin .ptq-act.is-warn :is(.ptq-val,.ptq-meta){color:#fbbf24}
#scr-admin .ptq-act.is-risk :is(.ptq-val,.ptq-meta){color:#ff9b6b}
#scr-admin .ptq-act.is-lost :is(.ptq-val,.ptq-meta){color:#ff8a80}
#scr-admin .ptq-act.is-none .ptq-val{align-items:center;font-size:15px;letter-spacing:-.02em;color:rgba(255,255,255,.4)}
#scr-admin .ptq-act.is-none .ptq-val i{display:none}
@keyframes ptq-pulse{0%,100%{box-shadow:0 0 0 3px rgba(74,222,128,.2)}50%{box-shadow:0 0 0 6px rgba(74,222,128,0)}}

/* ── Recordatorio (js/39): misma fila que la nota, una sola línea ── */
#scr-admin .ptq .ptc-rem-slot{margin:0}
#scr-admin .ptq .ptc-rem{min-height:42px;padding:6px 10px 6px 6px;border-radius:13px;grid-template-columns:30px minmax(0,1fr) auto;gap:9px}
#scr-admin .ptq .ptc-rem-ic{width:30px;height:30px;border-radius:10px}
#scr-admin .ptq .ptc-rem-ic svg{width:15px;height:15px}
#scr-admin .ptq .ptc-rem-copy{flex-direction:row;align-items:baseline;gap:7px;overflow:hidden}
#scr-admin .ptq .ptc-rem-label{flex:none;font-size:10px;letter-spacing:.06em}
#scr-admin .ptq .ptc-rem-text{font-size:12.5px;font-weight:600}
#scr-admin .ptq :is(.ptc-rem-count,.ptc-rem-go){min-width:22px;height:22px;border-radius:8px;font-size:10.5px}

/* ── Pie: nota y push ── */
#scr-admin .ptq-foot{display:flex;gap:8px;align-items:stretch}
#scr-admin :is(.ptq-note,.ptq-push){appearance:none;-webkit-appearance:none;cursor:pointer;min-height:44px;margin:0;border-radius:14px;
  display:flex;align-items:center;gap:9px;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:transform .12s,border-color .16s,background .16s}
#scr-admin :is(.ptq-note,.ptq-push):active{transform:scale(.97)}
#scr-admin :is(.ptq-note,.ptq-push):focus-visible{outline:2px solid rgba(var(--accent-rgb),.7);outline-offset:2px}
#scr-admin .ptq-tile,#scr-admin .ptq-push-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:10px}
#scr-admin .ptq-tile svg,#scr-admin .ptq-push-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#scr-admin .ptq-note{flex:1;min-width:0;padding:6px 12px 6px 7px;text-align:left;
  border:1px dashed rgba(255,255,255,.12);background:rgba(255,255,255,.018);color:var(--cx-sub,rgba(214,224,238,.62))}
#scr-admin .ptq-note.is-empty .ptq-tile{color:var(--cx-label,rgba(214,224,238,.55));background:rgba(255,255,255,.05)}
#scr-admin .ptq-note.has-note{--k:#8fb4ff;border:1px solid color-mix(in srgb,var(--k) 26%,transparent);color:rgba(239,244,252,.88);
  background:linear-gradient(135deg,color-mix(in srgb,var(--k) 11%,transparent),rgba(255,255,255,.015) 72%)}
#scr-admin .ptq-note.has-note .ptq-tile{color:var(--k);background:color-mix(in srgb,var(--k) 15%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k) 22%,transparent)}
#scr-admin .ptq-note-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 12.5px/1.2 var(--font,"Inter"),sans-serif}
#scr-admin .ptq-note-text b{margin-right:7px;font-size:10px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--k)}
#scr-admin .ptq-count{flex:none;padding:3px 8px;border-radius:99px;font:800 10.5px/1.2 var(--font,"Inter"),sans-serif;color:rgba(239,244,252,.75);background:rgba(255,255,255,.08)}
/* Push: el acento del coach. Si el cliente no lo recibe, se dice antes de escribirle. */
#scr-admin .ptq-push{flex:none;padding:6px 14px 6px 7px;color:var(--accent-text,#9ccaff);
  border:1px solid rgba(var(--accent-rgb),.32);background:linear-gradient(135deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.05))}
#scr-admin .ptq-push-ic{color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 80%,#fff),var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 14px -6px rgba(var(--accent-rgb),.9)}
#scr-admin .ptq-push-t{font:750 12.5px/1 var(--font,"Inter"),sans-serif;white-space:nowrap}
#scr-admin .ptq-push.is-unavailable{color:#fbbf24;border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.07)}
#scr-admin .ptq-push.is-unavailable .ptq-push-t::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;vertical-align:middle;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(251,191,36,.2)}
#scr-admin .ptq-push.is-unavailable .ptq-push-ic{color:#fbbf24;background:rgba(251,191,36,.14);box-shadow:inset 0 0 0 1px rgba(251,191,36,.28)}

@media (max-width:370px){
  #scr-admin .ptcard.ptq{padding:14px 13px 12px 15px!important}
  #scr-admin .ptq-val{font-size:18px}
  #scr-admin .ptq-lbl{font-size:10px;letter-spacing:.04em}
  #scr-admin .ptq-push{padding-right:11px}
}
@media (prefers-reduced-motion:reduce){#scr-admin .ptq-act.is-live .ptq-val i{animation:none}}

/* ── Deslizar la tarjeta ───────────────────────────────────────────────
   Izquierda: chat, recordar y reporte en mosaicos: icono en su ficha de
   color, la palabra debajo, letra legible (antes 9 y 7 px).
   Derecha: el toque. Un aro se llena según arrastras; con el panel abierto
   queda lleno y se toca para enviar; llevado hasta el final se arma —aro
   encendido, «suelta para enviar»— y se envía al soltar. */
#scr-admin .ptq ~ .ptcard-actions-rail,#scr-admin .ptcard-swipe .ptcard-actions-rail{gap:6px;padding:8px 8px 8px 12px}
#scr-admin .ptcard-swipe .ptcard-action{--k:#8fb4ff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:6px 4px;
  border-radius:14px;border-color:color-mix(in srgb,var(--k) 20%,transparent);color:var(--k);
  background:linear-gradient(160deg,color-mix(in srgb,var(--k) 10%,transparent),rgba(255,255,255,.015))}
#scr-admin .ptcard-swipe .ptcard-action-icon{position:relative;width:32px!important;height:32px!important;border:0;border-radius:11px;
  background:color-mix(in srgb,var(--k) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k) 30%,transparent)}
#scr-admin .ptcard-swipe .ptcard-action-icon svg{width:16px;height:16px}
#scr-admin .ptcard-swipe .ptcard-action-icon b{position:absolute;top:-6px;right:-8px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;display:grid;place-items:center;
  font:800 10px/1 var(--font,"Inter"),sans-serif;color:#fff;background:var(--accent);box-shadow:0 0 0 2px #161616}
#scr-admin .ptcard-swipe .ptcard-action-copy{align-items:center}
#scr-admin .ptcard-swipe .ptcard-action-copy strong{font-size:12px!important;font-weight:700!important;color:#eef2f7}
#scr-admin .ptcard-swipe .ptcard-action--chat{--k:var(--accent-text,#8fb4ff)}
#scr-admin .ptcard-swipe .ptcard-action--rem{--k:#fbbf24}
#scr-admin .ptcard-swipe .ptcard-action--report{--k:#4ade80}

#scr-admin .ptcard-swipe .ptcard-archive-rail{padding:8px 12px 8px 8px}
#scr-admin .ptcard-swipe.is-swiping-archive .ptcard-archive-rail{width:max(108px,var(--sx,0px))}
#scr-admin .ptcard-swipe .ptcard-archive-action{--k:var(--accent-text,#8fb4ff);--k-rgb:var(--accent-rgb,79,140,255);gap:9px;padding:8px 6px;border-radius:14px;
  border:1px solid rgba(var(--k-rgb),.24);color:var(--k);background:radial-gradient(120% 80% at 50% 50%,rgba(var(--k-rgb),.15),rgba(var(--k-rgb),.03))}
#scr-admin .ptcard-swipe .ptcard-archive-action.is-warn{--k:#fbbf24;--k-rgb:251,191,36}
#scr-admin .ptcard-swipe .ptcard-archive-action.is-danger{--k:#ff8a80;--k-rgb:255,138,128}
#scr-admin .ptcard-swipe .ptcard-archive-action:is(.is-ok,.is-info){--k:#4ade80;--k-rgb:74,222,128}
#scr-admin .ptcard-swipe .ptcard-archive-action[class]{border-color:rgba(var(--k-rgb),.26);color:var(--k);background:radial-gradient(120% 80% at 50% 50%,rgba(var(--k-rgb),.15),rgba(var(--k-rgb),.03))}
#scr-admin .ptcard-swipe .ptn-ring{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;flex:none;
  background:conic-gradient(var(--k) calc(var(--np,0)*360deg),rgba(var(--k-rgb),.16) 0);transform:scale(calc(.84 + var(--np,0)*.16))}
#scr-admin .ptcard-swipe.archive-open .ptn-ring{--np:1}
#scr-admin .ptcard-swipe .ptn-ring::before{content:"";position:absolute;inset:3px;border-radius:50%;background:#15171a}
#scr-admin .ptcard-swipe .ptn-ic{position:relative;display:grid;place-items:center;width:18px!important;height:18px!important;color:var(--k)}
#scr-admin .ptcard-swipe .ptn-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#scr-admin .ptcard-swipe .ptcard-archive-copy{gap:4px}
#scr-admin .ptcard-swipe .ptcard-archive-copy strong{font-size:12px!important;font-weight:800!important;line-height:1.15;color:#f4f7fb}
#scr-admin .ptcard-swipe .ptcard-archive-copy small{max-width:96px;font-size:10px!important;font-weight:600!important;line-height:1.25;color:var(--k);opacity:.9}
#scr-admin .ptcard-swipe.nudge-armed .ptcard-archive-action{border-color:rgba(var(--k-rgb),.55);background:radial-gradient(120% 80% at 50% 50%,rgba(var(--k-rgb),.28),rgba(var(--k-rgb),.06))}
#scr-admin .ptcard-swipe.nudge-armed .ptn-ring{transform:scale(1.04);background:var(--k);box-shadow:0 0 0 5px rgba(var(--k-rgb),.18),0 10px 24px -6px rgba(var(--k-rgb),.7)}
#scr-admin .ptcard-swipe.nudge-armed .ptn-ring::before{background:var(--k)}
#scr-admin .ptcard-swipe.nudge-armed .ptn-ic{color:#0b0d10}
#scr-admin .ptcard-swipe.nudge-armed .ptcard-archive-copy small{font-size:0!important}
#scr-admin .ptcard-swipe.nudge-armed .ptcard-archive-copy small::after{content:"Suelta para enviar";font-size:10px;font-weight:700}

/* ── Hoja de gestión del cliente (pulsar y mantener) ───────────────────
   Tres datos que se tocan (adherencia de la semana, señal, sin leer), el
   toque sugerido con lo que hará, el próximo recordatorio real y ocho
   accesos; reiniciar a semana 1 baja a las acciones delicadas, donde está
   lo que cambia o borra datos. Letra legible: nada por debajo de 10 px. */
#m-ptact .ptact-kpis{margin-bottom:12px}
#m-ptact button.ptact-kpi{appearance:none;-webkit-appearance:none;border:0;background:none;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s}
#m-ptact button.ptact-kpi:active{background:rgba(255,255,255,.05)}
#m-ptact .ptact-kpi span{font-size:10px!important;letter-spacing:.08em!important;margin-top:6px}
#m-ptact .ptact-kpi small{display:block;margin-top:3px;font:600 10.5px/1.2 var(--font,"Inter"),sans-serif;color:var(--cx-label,rgba(214,224,238,.55))}
#m-ptact .ptact-sug{--k:var(--accent-text,#9ccaff);--k-rgb:var(--accent-rgb,79,140,255);display:flex;align-items:center;gap:12px;width:100%;margin:0 0 10px;padding:11px 14px 11px 11px;
  border-radius:18px;border:1px solid rgba(var(--k-rgb),.3);cursor:pointer;text-align:left;color:#eef2f7;font:inherit;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(140deg,rgba(var(--k-rgb),.16),rgba(var(--k-rgb),.03))}
#m-ptact .ptact-sug:active{transform:scale(.985)}
#m-ptact .ptact-sug.is-warn{--k:#fbbf24;--k-rgb:251,191,36}
#m-ptact .ptact-sug.is-danger,#m-ptact .ptact-sug.is-late{--k:#ff8a80;--k-rgb:255,138,128}
#m-ptact .ptact-sug.is-ok,#m-ptact .ptact-sug.is-info{--k:#4ade80;--k-rgb:74,222,128}
#m-ptact .ptact-sug.is-rem{--k:#fbbf24;--k-rgb:251,191,36}
#m-ptact .ptact-sug.is-rem.is-late{--k:#ff8a80;--k-rgb:255,138,128}
#m-ptact .ptact-sug.is-new{border-style:dashed;background:rgba(255,255,255,.02)}
#m-ptact .ptact-sug-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;color:#0b0d10;
  background:linear-gradient(160deg,color-mix(in srgb,var(--k) 75%,#fff),var(--k));box-shadow:0 8px 18px -8px rgba(var(--k-rgb),.8)}
#m-ptact .ptact-sug.is-new .ptact-sug-ic{color:var(--k);background:rgba(var(--k-rgb),.14);box-shadow:inset 0 0 0 1px rgba(var(--k-rgb),.3)}
#m-ptact .ptact-sug-ic .iq-ic,#m-ptact .ptact-sug-ic svg{width:18px;height:18px}
#m-ptact .ptact-sug-ic svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#m-ptact .ptact-sug-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#m-ptact .ptact-sug-copy i{font:800 10px/1 var(--font,"Inter"),sans-serif;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--k)}
#m-ptact .ptact-sug-copy b{font:750 15px/1.2 var(--font,"Inter"),sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#m-ptact .ptact-sug-copy small{font:550 12px/1.25 var(--font,"Inter"),sans-serif;color:var(--cx-sub,rgba(214,224,238,.62));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#m-ptact .ptact-sug .ptact-chevron{color:var(--k);font-size:20px}
#m-ptact .ptact-act-copy b{font-size:15px!important}
#m-ptact .ptact-act-copy small{font-size:11.5px!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#m-ptact .ptact-label small{display:block;margin-top:2px;font:500 11.5px/1.25 var(--font,"Inter"),sans-serif;color:var(--cx-label,rgba(214,224,238,.55))}
#m-ptact .ptact-row .ptact-label{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
#m-ptact .ptact-sug{width:calc(100% - 32px);margin:0 16px 10px}

/* Gestión del cliente: cabecera y «Cerrar» fijos; en medio, lo único que se
   desplaza (datos, sugerido, recordatorio, accesos y lo delicado). */
#m-ptact .ptact-hero{flex:none;border-bottom:1px solid rgba(255,255,255,.06)}
#m-ptact .ptact-body{flex:1 1 auto;padding:12px 16px 14px;gap:10px;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 14px),transparent);mask:linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 14px),transparent)}
#m-ptact .ptact-body>.ptact-kpis{flex:none;margin:0!important}
#m-ptact .ptact-body>.ptact-sug{flex:none;width:100%;margin:0}
#m-ptact .ptact-cancel{flex:none;margin-top:0!important;border-top:0}
#m-ptact .ptact-sheet>.ptact-cancel,#m-ptact .msheet>.ptact-cancel{position:relative}
/* Dentro de una columna flex que scrollea nada se encoge: así se aplastaba
   el grupo de acciones delicadas hasta quedar como una raya. */
#m-ptact .ptact-body>*{flex-shrink:0}
/* Fijo arriba también: los tres datos y el sugerido. Se desplaza desde el recordatorio. */
#m-ptact .ptact-hero{border-bottom:0}
#m-ptact .ptact-top{flex:none;display:flex;flex-direction:column;gap:10px;padding:0 16px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
#m-ptact .ptact-top>.ptact-kpis{margin:0!important}
#m-ptact .ptact-top>.ptact-sug{width:100%;margin:0}