/* ═══════════════════════════════════════════════
   OneProtocol — 08-client
   Capa premium del lado del cliente (pestañas del paciente).
   Se carga al final: puede sobreescribir 04/05 sin tocarlos.

   Namespaces:
     .cx-*   primitivas compartidas entre pestañas del cliente
     .rpx-*  pestaña Reporte
   ═══════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   1. PRIMITIVAS COMPARTIDAS (.cx-*)
   Superficie, cabecera de sección, chips y ritmo
   tipográfico común a todas las pestañas cliente.
─────────────────────────────────────────────── */
.cx{
  --cx-gap:12px;
  --cx-pad:15px;
  --cx-r:18px;
  --cx-surface:linear-gradient(168deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.014) 46%,rgba(255,255,255,0) 100%),var(--bg2);
  --cx-brd:rgba(255,255,255,.075);
  --cx-brd-soft:rgba(255,255,255,.05);
  --cx-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 26px rgba(0,0,0,.45);
  display:flex;
  flex-direction:column;
  gap:var(--cx-gap);
}

/* Tarjeta base — hairline superior de luz + sombra profunda */
.cx-card{
  position:relative;
  background:var(--cx-surface,linear-gradient(168deg,rgba(255,255,255,.045),rgba(255,255,255,0)),var(--bg2));
  border:1px solid var(--cx-brd,rgba(255,255,255,.075));
  border-radius:var(--cx-r,18px);
  padding:var(--cx-pad,15px);
  box-shadow:var(--cx-shadow,0 8px 26px rgba(0,0,0,.45));
  overflow:hidden;
}
.cx-card::before{
  content:"";
  position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  pointer-events:none;
}

/* Cabecera de tarjeta: icono + título + estado a la derecha */
.cx-hd{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.cx-hd-ic{
  width:32px;height:32px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:11px;
  background:linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  color:var(--txt2);
}
.cx-hd-ic .iq-ic{width:16px;height:16px}
.cx-hd-ic.is-blue{background:linear-gradient(150deg,rgba(0,123,255,.22),rgba(0,123,255,.05));border-color:rgba(0,123,255,.3);color:#63b0ff}
.cx-hd-ic.is-green{background:linear-gradient(150deg,rgba(46,171,101,.22),rgba(46,171,101,.05));border-color:rgba(46,171,101,.3);color:#4fd08a}
.cx-hd-ic.is-amber{background:linear-gradient(150deg,rgba(232,150,12,.22),rgba(232,150,12,.05));border-color:rgba(232,150,12,.3);color:#f0ab3d}
.cx-hd-copy{flex:1;min-width:0;display:block}
.cx-hd-title{
  display:block;
  font-family:"Inter",sans-serif;font-size:13.5px;font-weight:800;
  letter-spacing:.2px;color:var(--txt);line-height:1.25;
}
.cx-hd-sub{display:block;font-size:11.5px;color:rgba(255,255,255,.42);margin-top:3px;line-height:1.4}
.cx-hd-state{
  font-family:"Inter",sans-serif;font-size:11px;font-weight:800;
  letter-spacing:.4px;color:var(--txt2);flex-shrink:0;
  padding:4px 9px;border-radius:8px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);
}
.cx-hd-state.is-done{color:#4fd08a;background:rgba(46,171,101,.1);border-color:rgba(46,171,101,.26)}

/* Etiqueta de sección fuera de tarjeta */
.cx-label{
  display:flex;align-items:center;gap:7px;
  font-family:"Inter",sans-serif;font-size:10px;font-weight:800;
  letter-spacing:1.8px;text-transform:uppercase;
  color:rgba(255,255,255,.34);
  margin:6px 2px 0;
}
.cx-label .iq-ic{width:12px;height:12px}

/* Chip de estado */
.cx-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-family:"Inter",sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:1.2px;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  color:var(--txt2);
}
.cx-chip .iq-ic{width:11px;height:11px}
.cx-chip.is-green{background:var(--green-bg);border-color:var(--green-brd);color:#4fd08a}
.cx-chip.is-amber{background:var(--amber-bg);border-color:var(--amber-brd);color:#f0ab3d}
.cx-chip.is-red{background:var(--red-bg);border-color:var(--red-brd);color:#ff6b6b}
.cx-chip.is-blue{background:var(--blue-bg);border-color:var(--blue-brd);color:#63b0ff}
.cx-chip.is-purple{background:var(--purple-bg);border-color:var(--purple-brd);color:#b48bee}

/* Entrada escalonada */
@keyframes cx-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cx-rise{animation:cx-rise .42s cubic-bezier(.22,1,.36,1) both}
.cx-d1{animation-delay:.04s}.cx-d2{animation-delay:.09s}.cx-d3{animation-delay:.14s}
.cx-d4{animation-delay:.19s}.cx-d5{animation-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .cx-rise{animation:none}
}

/* ───────────────────────────────────────────────
   2. PESTAÑA REPORTE (.rpx-*)
─────────────────────────────────────────────── */

/* ── 2.1 Hero: semana, anillo de adherencia y estado ── */
.rpx-hero{
  position:relative;
  border-radius:20px;
  padding:16px 16px 14px;
  overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 60%,transparent),var(--bg2);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 34px rgba(0,0,0,.5);
}
.rpx-hero::before{
  content:"";position:absolute;top:0;left:16px;right:16px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
.rpx-hero-glow{
  position:absolute;top:-58px;right:-42px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,123,255,.2),transparent 68%);
  pointer-events:none;filter:blur(4px);
}
.rpx-hero.is-pending .rpx-hero-glow{background:radial-gradient(circle,rgba(232,150,12,.2),transparent 68%)}
.rpx-hero.is-urgent .rpx-hero-glow{background:radial-gradient(circle,rgba(221,68,68,.22),transparent 68%)}
.rpx-hero.is-sent .rpx-hero-glow,
.rpx-hero.is-late .rpx-hero-glow{background:radial-gradient(circle,rgba(46,171,101,.2),transparent 68%)}
.rpx-hero.is-closed .rpx-hero-glow{background:radial-gradient(circle,rgba(153,102,221,.2),transparent 68%)}

.rpx-hero-top{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:14px;
}
.rpx-hero-week{
  font-family:"Inter",sans-serif;font-size:10px;font-weight:800;
  letter-spacing:1.7px;text-transform:uppercase;color:rgba(255,255,255,.4);
}
.rpx-hero-week b{color:rgba(255,255,255,.72);font-weight:800}

.rpx-hero-main{position:relative;display:flex;align-items:center;gap:15px}
.rpx-hero-copy{flex:1;min-width:0}
.rpx-hero-title{
  font-family:"Inter",sans-serif;font-size:19px;font-weight:800;
  letter-spacing:-.3px;line-height:1.15;color:var(--txt);
}
.rpx-hero-sub{
  font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.5);margin-top:5px;
}
.rpx-hero-sub b{color:rgba(255,255,255,.8);font-weight:700}

/* Anillo de adherencia — conic-gradient controlado por --pct */
.rpx-ring{
  --pct:0;
  --ring-col:var(--blue);
  position:relative;width:78px;height:78px;flex-shrink:0;border-radius:50%;
  background:
    conic-gradient(var(--ring-col) calc(var(--pct) * 1%),rgba(255,255,255,.07) 0);
  display:flex;align-items:center;justify-content:center;
  transition:background .5s cubic-bezier(.22,1,.36,1);
}
.rpx-ring::after{
  content:"";position:absolute;inset:6px;border-radius:50%;
  background:var(--bg2);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;
}
.rpx-ring-in{position:relative;z-index:1;text-align:center;line-height:1}
.rpx-ring-val{
  display:block;font-family:"Inter",sans-serif;font-size:21px;font-weight:900;
  letter-spacing:-.6px;color:var(--txt);
}
.rpx-ring-val i{font-style:normal;font-size:11px;font-weight:700;opacity:.55;margin-left:1px}
.rpx-ring-lbl{
  display:block;font-family:"Inter",sans-serif;font-size:7.5px;font-weight:800;
  letter-spacing:.7px;text-transform:uppercase;color:rgba(255,255,255,.36);margin-top:3px;
}
.rpx-ring.is-green{--ring-col:var(--green)}
.rpx-ring.is-amber{--ring-col:var(--amber)}
.rpx-ring.is-red{--ring-col:var(--red)}

/* Pasos del hero — progreso del formulario */
.rpx-steps{
  position:relative;display:flex;align-items:center;gap:7px;
  margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.06);
}
.rpx-step{
  flex:1;display:flex;align-items:center;gap:6px;
  font-family:"Inter",sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:.7px;text-transform:uppercase;color:rgba(255,255,255,.32);
  min-width:0;
}
.rpx-step-dot{
  width:16px;height:16px;flex-shrink:0;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;
  transition:all .25s ease;
}
.rpx-step-dot .iq-ic{width:9px;height:9px;opacity:0;transition:opacity .2s}
.rpx-step.is-done{color:rgba(79,208,138,.9)}
.rpx-step.is-done .rpx-step-dot{border-color:var(--green);background:var(--green-bg)}
.rpx-step.is-done .rpx-step-dot .iq-ic{opacity:1;color:var(--green)}
.rpx-step-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 2.2 Selector de días ── */
.rpx-days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.rpx-day{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:9px 0 8px;border-radius:12px;
  background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.06);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .14s cubic-bezier(.3,1.4,.5,1),background .18s,border-color .18s;
}
.rpx-day:active{transform:scale(.9)}
.rpx-day-n{
  font-family:"Inter",sans-serif;font-size:14px;font-weight:800;
  letter-spacing:-.3px;color:rgba(255,255,255,.55);line-height:1;
}
.rpx-day-lbl{
  font-family:"Inter",sans-serif;font-size:8px;font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,.28);line-height:1;
}
.rpx-day-mk{
  position:absolute;top:-5px;right:-3px;width:15px;height:15px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid rgba(255,255,255,.1);
  opacity:0;transform:scale(.4);transition:all .2s cubic-bezier(.3,1.5,.5,1);
}
.rpx-day-mk .iq-ic{width:9px;height:9px}
.rpx-day.is-done{background:var(--green-bg);border-color:var(--green-brd)}
.rpx-day.is-done .rpx-day-n,.rpx-day.is-done .rpx-day-lbl{color:#4fd08a}
.rpx-day.is-done .rpx-day-mk{opacity:1;transform:none;border-color:var(--green-brd);color:var(--green)}
.rpx-day.is-part{background:var(--amber-bg);border-color:var(--amber-brd)}
.rpx-day.is-part .rpx-day-n,.rpx-day.is-part .rpx-day-lbl{color:#f0ab3d}
.rpx-day.is-part .rpx-day-mk{opacity:1;transform:none;border-color:var(--amber-brd);color:var(--amber)}
.rpx-day.is-miss{background:var(--red-bg);border-color:var(--red-brd)}
.rpx-day.is-miss .rpx-day-n,.rpx-day.is-miss .rpx-day-lbl{color:#ff7b7b}
.rpx-day.is-miss .rpx-day-mk{opacity:1;transform:none;border-color:var(--red-brd);color:var(--red)}
.rpx-day.is-today::after{
  content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--blue);
}
.rpx-days.is-static .rpx-day{cursor:default;pointer-events:none}

.rpx-legend{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:11px;padding-top:11px;border-top:1px solid rgba(255,255,255,.055);
}
.rpx-legend-keys{display:flex;flex-wrap:wrap;gap:9px}
.rpx-legend-key{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-family:"Inter",sans-serif;font-weight:700;
  letter-spacing:.3px;color:rgba(255,255,255,.4);
}
.rpx-legend-key i{width:6px;height:6px;border-radius:50%;display:inline-block;font-style:normal}
.rpx-legend-key.k-done i{background:var(--green)}
.rpx-legend-key.k-part i{background:var(--amber)}
.rpx-legend-key.k-miss i{background:var(--red)}
.rpx-legend-pct{
  font-family:"Inter",sans-serif;font-size:12px;font-weight:900;
  letter-spacing:.2px;color:var(--txt);flex-shrink:0;
}

/* ── 2.3 Fotos ── */
.rpx-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rpx-shot{
  position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .15s,border-color .18s,background .18s;
}
.rpx-shot:active{transform:scale(.96)}
.rpx-shot-ic{
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.45);
}
.rpx-shot-ic .iq-ic{width:16px;height:16px}
.rpx-shot-lbl{
  font-family:"Inter",sans-serif;font-size:8.5px;font-weight:800;
  letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.38);
}
.rpx-shot.is-full{border-color:rgba(0,123,255,.28);background:var(--bg3)}
.rpx-shot.is-full img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rpx-shot-tag{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:14px 8px 6px;
  background:linear-gradient(transparent,rgba(0,0,0,.78));
  font-family:"Inter",sans-serif;font-size:8.5px;font-weight:800;
  letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:space-between;gap:4px;
}
.rpx-shot-tag .iq-ic{width:11px;height:11px;color:#4fd08a}
.rpx-shot.is-empty-static{opacity:.32;cursor:default;pointer-events:none}

/* ── 2.4 Autoevaluación ── */
.rpx-note{
  position:relative;border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.07);
  transition:border-color .2s,background .2s;
}
.rpx-note:focus-within{border-color:rgba(0,123,255,.4);background:rgba(0,123,255,.045)}
.rpx-note textarea{
  width:100%;min-height:132px;resize:vertical;display:block;
  background:transparent;border:0;outline:0;
  padding:13px 13px 8px;
  font-family:"Barlow",sans-serif;font-size:13.5px;line-height:1.62;color:var(--txt);
}
.rpx-note textarea::placeholder{color:rgba(255,255,255,.24)}
.rpx-note-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 13px 10px;
  border-top:1px solid rgba(255,255,255,.05);
}
.rpx-note-hint{font-size:10.5px;color:rgba(255,255,255,.34);line-height:1.35}
.rpx-note-count{
  font-family:"Inter",sans-serif;font-size:10.5px;font-weight:800;
  letter-spacing:.4px;color:rgba(255,255,255,.32);flex-shrink:0;
}
.rpx-note-count.is-ok{color:#4fd08a}

/* Sugerencias rápidas */
.rpx-prompts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rpx-prompt{
  font-family:"Inter",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.2px;
  padding:6px 11px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.5);
  -webkit-tap-highlight-color:transparent;transition:all .16s;
}
.rpx-prompt:active{transform:scale(.94);background:rgba(0,123,255,.12);border-color:rgba(0,123,255,.3);color:#8cc6ff}

/* ── 2.5 CTA de envío ── */
.rpx-submit{
  position:relative;width:100%;
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:16px 18px;border:0;border-radius:16px;cursor:pointer;
  font-family:"Inter",sans-serif;font-size:14px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,#0a84ff,#0060df);
  box-shadow:0 10px 28px rgba(0,96,223,.34),0 1px 0 rgba(255,255,255,.18) inset;
  -webkit-tap-highlight-color:transparent;transition:transform .15s,opacity .2s,box-shadow .2s;
}
.rpx-submit .iq-ic{width:16px;height:16px}
.rpx-submit:active{transform:scale(.985)}
.rpx-submit[disabled]{
  opacity:.42;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.06));
  box-shadow:none;color:rgba(255,255,255,.6);
}
.rpx-submit-note{
  text-align:center;font-size:10.5px;color:rgba(255,255,255,.3);
  margin-top:-4px;line-height:1.4;
}

/* ── 2.6 Resumen del reporte entregado ── */
.rpx-metrics{display:grid;gap:8px}
.rpx-metrics.c2{grid-template-columns:repeat(2,1fr)}
.rpx-metrics.c3{grid-template-columns:repeat(3,1fr)}
.rpx-metric{
  padding:12px 10px;border-radius:14px;text-align:center;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
}
.rpx-metric-v{
  font-family:"Inter",sans-serif;font-size:19px;font-weight:900;
  letter-spacing:-.5px;color:var(--txt);line-height:1.1;
}
.rpx-metric-v span{font-size:10px;font-weight:700;opacity:.5;margin-left:1px}
.rpx-metric-l{
  font-family:"Inter",sans-serif;font-size:8.5px;font-weight:800;
  letter-spacing:.9px;text-transform:uppercase;color:rgba(255,255,255,.34);margin-top:5px;
  min-height:11px;
}
.rpx-metric-foot{
  text-align:center;font-family:"Inter",sans-serif;font-size:10px;
  color:rgba(255,255,255,.32);margin-top:9px;
}
.rpx-metric-foot b{font-weight:800}

/* Texto del cliente / respuesta del coach */
.rpx-quote{
  font-size:13.5px;line-height:1.68;color:rgba(255,255,255,.72);
  white-space:pre-wrap;word-break:break-word;
}
.rpx-reply{
  position:relative;border-radius:14px;padding:13px 14px;
  background:linear-gradient(160deg,rgba(0,123,255,.12),rgba(0,123,255,.03));
  border:1px solid rgba(0,123,255,.24);
}
.rpx-reply-hd{
  display:flex;align-items:center;gap:7px;margin-bottom:8px;
  font-family:"Inter",sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:1.3px;text-transform:uppercase;color:#63b0ff;
}
.rpx-reply-hd .iq-ic{width:12px;height:12px}
.rpx-reply-txt{font-size:13px;line-height:1.68;color:rgba(255,255,255,.76);white-space:pre-wrap}
.rpx-await{
  display:flex;align-items:center;gap:11px;
  padding:13px 14px;border-radius:14px;
  background:rgba(255,255,255,.025);border:1px dashed rgba(255,255,255,.1);
}
.rpx-await-ic{
  width:30px;height:30px;flex-shrink:0;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.42);
}
.rpx-await-ic .iq-ic{width:15px;height:15px}
.rpx-await-txt{font-size:12px;line-height:1.45;color:rgba(255,255,255,.44)}

/* ── 2.7 Historial (timeline) ── */
.rpx-timeline{position:relative;display:flex;flex-direction:column;gap:8px}
.rpx-tl{
  position:relative;border-radius:15px;overflow:hidden;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);
}
.rpx-tl-hd{
  display:flex;align-items:center;gap:11px;padding:12px 13px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.rpx-tl-hd:active{background:rgba(255,255,255,.03)}
.rpx-tl-dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:var(--muted);box-shadow:0 0 0 3px rgba(255,255,255,.04);
}
.rpx-tl-dot.is-replied{background:var(--green);box-shadow:0 0 0 3px var(--green-bg)}
.rpx-tl-dot.is-wait{background:var(--amber);box-shadow:0 0 0 3px var(--amber-bg)}
.rpx-tl-copy{flex:1;min-width:0;display:block}
.rpx-tl-title{
  display:block;
  font-family:"Inter",sans-serif;font-size:12.5px;font-weight:800;
  letter-spacing:.1px;color:var(--txt);
}
.rpx-tl-meta{
  display:block;
  font-family:"Inter",sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.3px;color:rgba(255,255,255,.34);margin-top:3px;
}
.rpx-tl-arr{
  width:14px;height:14px;flex-shrink:0;color:rgba(255,255,255,.3);
  transition:transform .22s cubic-bezier(.22,1,.36,1);
}
.rpx-tl.is-open .rpx-tl-arr{transform:rotate(180deg)}
.rpx-tl-bd{display:none;padding:0 13px 13px;border-top:1px solid rgba(255,255,255,.055)}
.rpx-tl.is-open .rpx-tl-bd{display:block;padding-top:12px;animation:cx-rise .3s ease both}
.rpx-tl-bd .rpx-days{margin-bottom:11px}
.rpx-tl-bd .rpx-quote{font-size:12.5px;margin-bottom:11px}

/* ── 2.8 Estado vacío / bloqueado ── */
.rpx-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:34px 22px 30px;min-height:46vh;
  border-radius:20px;
  background:linear-gradient(168deg,rgba(255,255,255,.035),rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.06);
}
.rpx-empty.is-compact{min-height:0;padding:26px 22px 24px}
.rpx-empty-ic{
  width:60px;height:60px;border-radius:20px;margin-bottom:15px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(0,123,255,.18),rgba(0,123,255,.03));
  border:1px solid rgba(0,123,255,.22);
  color:#63b0ff;
}
.rpx-empty-ic .iq-ic{width:26px;height:26px}
.rpx-empty-ic.is-muted{
  background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.45);
}
.rpx-empty-title{
  font-family:"Inter",sans-serif;font-size:17px;font-weight:800;
  letter-spacing:-.2px;color:var(--txt);
}
.rpx-empty-sub{
  font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.44);
  margin-top:8px;max-width:280px;
}
.rpx-empty-sub b{color:#8cc6ff;font-weight:800}

/* ───────────────────────────────────────────────
   3. PESTAÑA PROGRESO (#scr-prog)
   Reviste el marcado existente sin renombrar ids:
   mismas superficies, ritmo y jerarquía que Reporte.
─────────────────────────────────────────────── */

/* 3.1 Etiquetas de sección — mismo tono que .cx-label */
.cx-screen .sl{
  font-size:10px;font-weight:800;letter-spacing:1.8px;
  color:rgba(255,255,255,.34);margin:22px 0 10px;
}
.cx-screen .sl::after{background:linear-gradient(90deg,rgba(255,255,255,.1),transparent)}
.cx-screen .sl .iq-ic{width:12px;height:12px;color:rgba(255,255,255,.4);opacity:1}
.cx-screen .sl:first-child{margin-top:4px}
/* Cabeceras colapsables (icono + texto + contador) */
.cx-screen .sl.rowb>span:first-child{display:flex;align-items:center;gap:8px}

/* 3.2 Superficies */
.cx-screen .card{
  background:linear-gradient(168deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.014) 46%,rgba(255,255,255,0) 100%),var(--bg2);
  border:1px solid rgba(255,255,255,.075);
  border-radius:18px;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 26px rgba(0,0,0,.45);
  margin-bottom:10px;
  position:relative;
}
.cx-screen .card::after{
  content:"";position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  pointer-events:none;
}
.cx-screen .card-bd{padding:15px}

/* 3.3 Celdas de métrica (inicio / cambio / actual) */
.cx-screen .sg{gap:8px}
.cx-screen .sc{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;padding:12px 8px 11px;box-shadow:none;
}
.cx-screen .sc.g{
  background:linear-gradient(150deg,rgba(0,123,255,.13),rgba(0,123,255,.03));
  border-color:rgba(0,123,255,.24);box-shadow:none;
}
.cx-screen .sc.g::after{background:linear-gradient(90deg,transparent,rgba(0,123,255,.5),transparent)}
.cx-screen .sc .su{
  font-size:8.5px;letter-spacing:.9px;color:rgba(255,255,255,.34);
  font-weight:800;margin-top:5px;
}

/* 3.4 Composición corporal */
#scr-prog .bc-grid{gap:8px;margin-bottom:10px}
#scr-prog .bc-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;padding:14px 10px 12px;
  box-shadow:none;
}
#scr-prog .bc-card::before{background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.05),transparent 70%)}
#scr-prog .bc-val{font-size:26px;letter-spacing:-.6px}
#scr-prog .bc-unit{font-size:8.5px;letter-spacing:.9px;color:rgba(255,255,255,.32);font-weight:800}
#scr-prog .bc-label{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.55);margin-top:7px}
#scr-prog .bc-tag{font-size:7.5px;letter-spacing:1.1px;margin-top:7px;padding:3px 7px;border-radius:6px}
#scr-prog .bc-bar{height:9px;gap:2px}
#scr-prog .bc-bar-legend{gap:9px}
#scr-prog .bc-updated-ts{
  font-family:"Inter",sans-serif;font-size:9px;letter-spacing:.8px;
  text-transform:uppercase;color:rgba(255,255,255,.26);text-align:center;margin:2px 0 4px;
}

/* 3.5 Calendario mensual
   FIX: la clase genérica `.empty` (05-screens) inyectaba padding 28/16 en las
   celdas de relleno; con aspect-ratio:1 eso empujaba la rejilla fuera del ancho. */
#scr-prog .mhm-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
#scr-prog .mhm-day-row{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:6px}
#scr-prog .mhm-cell{
  padding:0;min-width:0;border-radius:9px;font-size:10.5px;font-weight:700;
  background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.05);
  color:rgba(255,255,255,.4);
}
#scr-prog .mhm-cell.empty{padding:0;background:transparent;border-color:transparent}
#scr-prog .mhm-cell.done{background:var(--green-bg);border-color:var(--green-brd);color:#4fd08a}
#scr-prog .mhm-cell.part{background:var(--amber-bg);border-color:var(--amber-brd);color:#f0ab3d}
#scr-prog .mhm-cell.miss{background:var(--red-bg);border-color:var(--red-brd);color:#ff7b7b;opacity:1}
#scr-prog .mhm-cell.today{box-shadow:0 0 0 1.5px var(--blue);color:#63b0ff}
#scr-prog .mhm-day-lbl{font-size:8.5px;font-weight:800;letter-spacing:.8px;color:rgba(255,255,255,.26)}
#scr-prog .mhm-month{font-size:12.5px;letter-spacing:1.4px;color:var(--txt)}
#scr-prog .mhm-header{margin-bottom:12px}

/* 3.6 Registros de peso */
#scr-prog .plog-row,
#scr-prog .prog-row{
  background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
}

/* 3.6b Banner motivacional */
#scr-prog .prog-motiv{
  display:flex;align-items:center;gap:13px;
  padding:15px;border-radius:18px;margin-bottom:4px;
  background:linear-gradient(168deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),var(--bg2);
  border:1px solid rgba(255,255,255,.075);
  box-shadow:0 8px 26px rgba(0,0,0,.45);
}
#scr-prog .prog-motiv-emoji{
  width:44px;height:44px;flex-shrink:0;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
}
#scr-prog .prog-motiv-title{
  font-family:"Inter",sans-serif;font-size:14.5px;font-weight:800;
  letter-spacing:-.2px;color:var(--txt);line-height:1.25;
}
#scr-prog .prog-motiv-sub{font-size:11.5px;color:rgba(255,255,255,.42);margin-top:3px;line-height:1.4}

/* 3.6c Registros de peso */
#scr-prog .wlog-item{
  background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
}
#scr-prog .wlog-item.wlog-latest{
  background:linear-gradient(150deg,rgba(0,123,255,.1),rgba(0,123,255,.02));
  border-color:rgba(0,123,255,.24);
}
#scr-prog .wlog-w{font-family:"Inter",sans-serif;font-weight:900;letter-spacing:-.5px}
#scr-prog .wlog-date{font-size:10.5px;color:rgba(255,255,255,.34)}
#scr-prog .wlog-delta{
  font-family:"Inter",sans-serif;font-size:11px;font-weight:800;
  border-radius:8px;padding:4px 9px;
}

/* 3.6d Estados vacíos dentro de Progreso */
#scr-prog .empty{
  border-radius:18px;
  background:linear-gradient(168deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.055);
  padding:26px 20px;
}
#scr-prog .empty .et{
  font-family:"Inter",sans-serif;font-size:15px;font-weight:800;
  letter-spacing:-.1px;color:var(--txt);
}
#scr-prog .empty .es{font-size:12px;color:rgba(255,255,255,.4);margin-top:6px;line-height:1.5}

/* 3.7 FAB — sobre la barra de navegación, en azul de marca */
#scr-prog .prog-fab,
.prog-fab{
  bottom:calc(78px + max(3px,env(safe-area-inset-bottom,0px) * .18));
  right:14px;
  gap:8px;padding:12px 17px;font-size:12.5px;letter-spacing:1.3px;
  color:#fff;
  background:linear-gradient(135deg,#0a84ff,#0060df);
  box-shadow:0 10px 26px rgba(0,96,223,.42),0 1px 0 rgba(255,255,255,.2) inset;
}
.prog-fab .iq-ic{color:#fff}
.prog-fab:active{box-shadow:0 4px 14px rgba(0,96,223,.3)}

/* ───────────────────────────────────────────────
   4. PESTAÑA PLAN (#scr-plan)
   Control segmentado + estado vacío en el mismo
   lenguaje que el resto de las pestañas cliente.
─────────────────────────────────────────────── */

/* 4.1 Control segmentado Entrenamiento / Nutrición */
.plnx-tabs{
  display:flex;gap:4px;
  margin:10px 14px 0;padding:4px;
  border-radius:14px;border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
}
.plnx-tab{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 8px;border:0;border-radius:11px;cursor:pointer;
  background:transparent;color:rgba(255,255,255,.42);
  font-family:"Inter",sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:.4px;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s,color .2s,box-shadow .2s;
}
.plnx-tab .iq-ic{width:14px;height:14px}
.plnx-tab:active{transform:scale(.98)}
.plnx-tab.is-on{
  color:var(--txt);
  background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 4px 14px rgba(0,0,0,.4);
}
#plan-tab-train.is-on .iq-ic{color:#63b0ff}
#plan-tab-nutri.is-on .iq-ic{color:#4fd08a}

/* 4.2 Estado "plan en preparación" */
.plnx-empty-ic{
  width:74px;height:74px;border-radius:24px;margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(0,123,255,.16),rgba(0,123,255,.03));
  border:1px solid rgba(0,123,255,.22);
  color:#63b0ff;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
}
.plnx-empty-ic .iq-ic{width:32px;height:32px}
.plnx-empty-title{
  font-family:"Inter",sans-serif;font-size:19px;font-weight:800;
  letter-spacing:-.2px;color:var(--txt);margin-bottom:9px;
}
.plnx-empty-sub{
  font-size:13px;line-height:1.65;color:rgba(255,255,255,.44);max-width:270px;
}
.plnx-empty-chip{
  display:inline-flex;align-items:center;gap:6px;margin-top:18px;
  padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  font-family:"Inter",sans-serif;font-size:10px;font-weight:800;
  letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.4);
}
.plnx-empty-chip .iq-ic{width:12px;height:12px;color:rgba(255,255,255,.35)}

/* ───────────────────────────────────────────────
   5. PESTAÑA INICIO (#scr-home)
   Baja el ruido cromático (oro/ámbar/azul compitiendo)
   y alinea superficies con el resto de pestañas.
─────────────────────────────────────────────── */

/* 5.1 Hero del cliente */
#scr-home .hero{
  background:linear-gradient(160deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 55%,rgba(255,255,255,0) 100%),var(--bg2);
  border:1px solid rgba(255,255,255,.085);
  border-radius:20px;padding:17px 16px 16px;display:block;
  box-shadow:0 10px 34px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.06) inset;
  animation:none; /* el pulso dorado competía con el resto de la pantalla */
}
#scr-home .hero-main{position:relative;z-index:1;display:flex;align-items:center;gap:14px;min-width:0}
#scr-home .hero::before{opacity:.55}
#scr-home .hero::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
#scr-home .hero-name{font-size:24px;font-weight:800;letter-spacing:-.4px}
#scr-home .hero-goal{
  font-size:9.5px;letter-spacing:1.5px;color:#63b0ff;margin-top:5px;
}
#scr-home .hero-goal::before{background:#63b0ff;box-shadow:0 0 6px rgba(99,176,255,.8)}
#scr-home .hero-meta{font-size:11px;color:rgba(255,255,255,.4);margin-top:6px}
#scr-home .av.av-xl{
  background:linear-gradient(140deg,#1f2937,#0b1220);
  border:1px solid rgba(255,255,255,.14);
  color:#cfe0f5;
  box-shadow:0 0 0 4px rgba(255,255,255,.04),0 6px 18px rgba(0,0,0,.5);
}

/* 5.2 Franja de días en programa */
#scr-home .dias-strip{
  position:relative;z-index:1;margin:16px 0 0;display:grid;grid-template-columns:minmax(112px,.82fr) minmax(0,1.35fr);
  overflow:hidden;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.075);border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
#scr-home .dias-strip-left{
  min-width:0;padding:13px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border-right:1px solid rgba(255,255,255,.075);text-align:center;
}
#scr-home .dias-strip-num{
  color:var(--gold);font:900 31px/1 "Inter",sans-serif;letter-spacing:0;font-variant-numeric:tabular-nums;
  text-shadow:0 0 18px color-mix(in srgb,var(--gold) 24%,transparent);
}
#scr-home .dias-strip-lbl{max-width:none;color:rgba(220,229,241,.4);font:800 7.5px/1.15 "Inter",sans-serif;letter-spacing:1px;text-transform:uppercase}
#scr-home .dias-strip-right{min-width:0;padding:13px 15px;display:flex;flex-direction:column;justify-content:center;color:rgba(220,229,241,.48)}
#scr-home .dias-week-row{display:flex;align-items:baseline;gap:4px;min-width:0;white-space:nowrap}
#scr-home .dias-week-row strong{color:var(--gold);font:800 12px/1.1 "Inter",sans-serif;letter-spacing:0}
#scr-home .dias-week-row span{font:600 11px/1.1 "Inter",sans-serif;letter-spacing:0}
#scr-home .dias-start{margin-top:7px;color:rgba(220,229,241,.48);font:600 10px/1.2 "Inter",sans-serif;letter-spacing:0;white-space:nowrap}
@media(max-width:360px){
  #scr-home .hero{padding:15px 14px 14px}
  #scr-home .hero-main{gap:12px}
  #scr-home .dias-strip{grid-template-columns:minmax(102px,.76fr) minmax(0,1.24fr);margin-top:14px}
  #scr-home .dias-strip-left{padding-left:9px;padding-right:9px}
  #scr-home .dias-strip-right{padding-left:12px;padding-right:12px}
  #scr-home .dias-strip-num{font-size:28px}
}

/* 5.3 Tarjetas de navegación "Mi espacio" */
#scr-home .home-nav-card{
  background:linear-gradient(168deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),var(--bg2);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;padding:14px;
  box-shadow:0 8px 26px rgba(0,0,0,.45);
}
#scr-home .home-nav-card.gold,
#scr-home .home-nav-card.blue,
#scr-home .home-nav-card.green{border-color:rgba(255,255,255,.07)}
#scr-home .hnc-title{
  font-size:14px;font-weight:800;letter-spacing:.1px;text-transform:none;
}
#scr-home .hnc-sub{font-size:11.5px;color:rgba(255,255,255,.4);margin-top:3px}
#scr-home .hnc-icon{width:42px;height:42px;border-radius:14px}
#scr-home .hnc-icon.gold{
  background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.75);box-shadow:none;
}
#scr-home .hnc-icon.blue{box-shadow:none}
#scr-home .hnc-icon.green{box-shadow:none}
#scr-home .home-nav-card:active .hnc-arr{color:#63b0ff}

/* 5.4 Tarjeta ancha de adherencia 7 días */
#scr-home .st-adh-card{border-radius:16px;padding:14px 15px}
#scr-home .st-adh-dot{border-radius:9px}

/* 5.4b Banner de reporte en Inicio — misma información, menos peso visual:
   en Inicio es un recordatorio, no la pantalla principal de entrega. */
#scr-home .report-banner{
  border-radius:18px;padding:14px 15px;
  box-shadow:0 8px 26px rgba(0,0,0,.45);
}
#scr-home .report-banner.pending{
  background:linear-gradient(165deg,rgba(232,150,12,.09),rgba(232,150,12,.015)),var(--bg2);
}
#scr-home .report-banner.urgent{
  background:linear-gradient(165deg,rgba(221,68,68,.1),rgba(221,68,68,.015)),var(--bg2);
  animation:none;
}
#scr-home .report-banner.sent{
  background:linear-gradient(165deg,rgba(46,171,101,.08),rgba(46,171,101,.015)),var(--bg2);
}
#scr-home .rb-title{font-size:14.5px;font-weight:800;letter-spacing:-.1px;text-transform:none}
#scr-home .rb-sub{font-size:11.5px;color:rgba(255,255,255,.42)}
#scr-home .rb-icon .iq-ic{width:22px;height:22px}
#scr-home .rb-tag{font-size:9px;letter-spacing:1.1px;padding:4px 9px;border-radius:999px}

/* 5.5 Resumen semanal y bloques inyectados por JS */
#scr-home .wsum-card,
#scr-home .hoy-card,
#scr-home .logros-home{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
}

/* ───────────────────────────────────────────────
   6. MODALES DEL CLIENTE (.cx-modal → .mx-*)
   Ajustes · Logros · Perfil · Mensajes comparten
   cabecera, secciones, filas, tiles y pie.
─────────────────────────────────────────────── */
.cx-modal .msheet{
  background:linear-gradient(178deg,var(--bg3) 0%,var(--bg2) 42%,var(--bg) 100%);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -24px 60px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.07);
}
.cx-modal .mhandle{background:transparent}
.cx-modal .msheet-body>*+.mx-sec{margin-top:18px}

/* 6.1 Cabecera */
.mx-head{
  display:flex;align-items:center;gap:12px;
  padding-bottom:16px;margin-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mx-head-ic{
  width:40px;height:40px;flex-shrink:0;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.6);
}
.mx-head-ic .iq-ic{width:18px;height:18px}
.mx-head-ic.is-blue{background:linear-gradient(150deg,rgba(0,123,255,.22),rgba(0,123,255,.05));border-color:rgba(0,123,255,.3);color:#63b0ff}
.mx-head-ic.is-gold{background:linear-gradient(150deg,rgba(235,235,235,.16),rgba(235,235,235,.04));border-color:rgba(235,235,235,.22);color:#ebebeb}
.mx-head-copy{flex:1;min-width:0;display:block}
.mx-eyebrow{
  display:block;font-family:"Inter",sans-serif;font-size:9px;font-weight:800;
  letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.32);
}
.mx-title{
  display:block;font-family:"Inter",sans-serif;font-size:20px;font-weight:800;
  letter-spacing:-.4px;color:var(--txt);line-height:1.15;margin-top:3px;
}
.mx-sub{
  display:block;font-size:11.5px;color:rgba(255,255,255,.42);
  margin-top:3px;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mx-head-act{
  flex-shrink:0;align-self:center;
  font-family:"Inter",sans-serif;font-size:10px;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;
  color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:8px 12px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:all .16s;
}
.mx-head-act:active{transform:scale(.95);background:rgba(0,123,255,.14);border-color:rgba(0,123,255,.32);color:#8cc6ff}

/* 6.2 Secciones y grupos */
.mx-sec{
  font-family:"Inter",sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:1.7px;text-transform:uppercase;color:rgba(255,255,255,.3);
  margin:16px 2px 8px;
}
.mx-group{
  border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.065);
}
.mx-group+.mx-group{margin-top:8px}

.mx-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;
}
.mx-row+.mx-row{border-top:1px solid rgba(255,255,255,.05)}
.mx-row-k{font-size:12.5px;color:rgba(255,255,255,.5)}
.mx-row-v{
  font-family:"Inter",sans-serif;font-size:12px;font-weight:700;
  color:var(--txt);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%;
}
.mx-row-v.is-green{color:#4fd08a}

/* Tile con icono + copy + control */
.mx-tile{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:13px 14px;background:transparent;border:0;text-align:left;
}
.mx-tile+.mx-tile{border-top:1px solid rgba(255,255,255,.05)}
.mx-tile-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s}
.mx-tile-btn:active{background:rgba(255,255,255,.035)}
.mx-tile-ic{
  width:34px;height:34px;flex-shrink:0;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.55);
}
.mx-tile-ic .iq-ic{width:16px;height:16px}
.mx-tile-ic.is-blue{background:rgba(0,123,255,.14);border-color:rgba(0,123,255,.28);color:#63b0ff}
.mx-tile-ic.is-green{background:var(--green-bg);border-color:var(--green-brd);color:#4fd08a}
.mx-tile-copy{flex:1;min-width:0;display:block}
.mx-tile-copy b{
  display:block;font-family:"Inter",sans-serif;font-size:13px;font-weight:700;
  color:var(--txt);line-height:1.25;
}
.mx-tile-copy small{
  display:block;font-size:11px;color:rgba(255,255,255,.38);margin-top:2px;line-height:1.35;
}
.mx-btn{
  flex-shrink:0;
  font-family:"Inter",sans-serif;font-size:11px;font-weight:800;
  letter-spacing:.6px;color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:9px 13px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:all .16s;
}
.mx-btn:active{transform:scale(.96);background:rgba(0,123,255,.16);border-color:rgba(0,123,255,.34);color:#8cc6ff}

/* Interruptor (el estado on/off lo pinta updatePushToggle) */
.mx-switch{
  position:relative;flex-shrink:0;width:44px;height:26px;border-radius:999px;
  background:var(--line2);border:1px solid rgba(255,255,255,.08);
  transition:background .2s,border-color .2s,box-shadow .2s;pointer-events:none;display:block;
}
.mx-switch-knob{
  position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#d8dce2;box-shadow:0 1px 3px rgba(0,0,0,.4);
  transition:transform .2s,background .2s,box-shadow .2s;
}
.mx-switch.is-on{
  background:rgba(35,196,107,.34)!important;border-color:rgba(53,221,127,.62);
  box-shadow:inset 0 0 10px rgba(35,196,107,.2),0 0 13px rgba(35,196,107,.18);
}
.mx-switch.is-on .mx-switch-knob{
  background:#f4fff8;box-shadow:0 0 0 2px rgba(53,221,127,.12),0 0 9px rgba(53,221,127,.52);
}
.mx-switch.is-checking{
  border-color:rgba(68,144,238,.48);box-shadow:0 0 10px rgba(68,144,238,.14);
}
.mx-switch.is-checking .mx-switch-knob{animation:op-push-check 1s ease-in-out infinite}
.mx-switch.is-error{border-color:rgba(217,79,79,.34)}
#push-btn-coach[data-push-state="on"],
#push-btn-patient-settings[data-push-state="on"]{border-color:rgba(53,221,127,.2)!important}
@keyframes op-push-check{50%{opacity:.55;transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.mx-switch.is-checking .mx-switch-knob{animation:none}}

/* 6.3 Pie de modal */
.mx-foot{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.mx-action{
  width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 16px;border-radius:14px;cursor:pointer;
  font-family:"Inter",sans-serif;font-size:13px;font-weight:800;
  letter-spacing:.9px;text-transform:uppercase;
  color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  -webkit-tap-highlight-color:transparent;transition:transform .15s,background .18s;
}
.mx-action .iq-ic{width:15px;height:15px}
.mx-action:active{transform:scale(.985)}
.mx-action.is-primary{
  color:#fff;border:0;
  background:linear-gradient(135deg,#0a84ff,#0060df);
  box-shadow:0 10px 26px rgba(0,96,223,.32),0 1px 0 rgba(255,255,255,.18) inset;
}
.mx-action.is-danger{
  color:#ff7b7b;background:rgba(221,68,68,.09);border-color:rgba(221,68,68,.25);
}
.mx-version{
  text-align:center;font-family:"Inter",sans-serif;font-size:9.5px;
  letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.22);
  margin-top:12px;
}

/* 6.4 Estado vacío en modal */
.mx-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:32px 22px 26px;
}
.mx-empty-ic{
  width:54px;height:54px;border-radius:18px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.4);
}
.mx-empty-ic .iq-ic{width:24px;height:24px}
.mx-empty-title{
  font-family:"Inter",sans-serif;font-size:15.5px;font-weight:800;color:var(--txt);
}
.mx-empty-sub{
  font-size:12px;line-height:1.6;color:rgba(255,255,255,.4);
  margin-top:7px;max-width:250px;
}

/* 6.5 Mensajes */
.mx-msg{
  position:relative;border-radius:16px;padding:12px 13px 13px;margin-bottom:9px;
  background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.06);
}
.mx-msg.is-unread{
  background:linear-gradient(160deg,rgba(0,123,255,.09),rgba(0,123,255,.02));
  border-color:rgba(0,123,255,.24);
}
.mx-msg-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.mx-msg-kicker{
  display:inline-flex;align-items:center;gap:6px;flex:1;min-width:0;
  font-family:"Inter",sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.42);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mx-msg-kicker .iq-ic{width:12px;height:12px;flex-shrink:0}
.mx-msg-kicker.is-blue{color:#63b0ff}
.mx-msg-kicker.is-green{color:#4fd08a}
.mx-msg-date{
  flex-shrink:0;font-family:"Inter",sans-serif;font-size:10px;
  font-weight:600;color:rgba(255,255,255,.28);
}
.mx-msg-del{
  flex-shrink:0;width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.3);
  -webkit-tap-highlight-color:transparent;transition:all .16s;
}
.mx-msg-del .iq-ic{width:12px;height:12px}
.mx-msg-del:active{background:var(--red-bg);border-color:var(--red-brd);color:#ff7b7b}
.mx-msg-body{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.68)}
.mx-msg-cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:11px;
  padding:8px 12px;border-radius:10px;cursor:pointer;
  font-family:"Inter",sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.7px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.6);
  -webkit-tap-highlight-color:transparent;transition:all .16s;
}
.mx-msg-cta .iq-ic{width:12px;height:12px}
.mx-msg-cta.is-blue{background:rgba(0,123,255,.12);border-color:rgba(0,123,255,.28);color:#8cc6ff}
.mx-msg-cta.is-green{background:var(--green-bg);border-color:var(--green-brd);color:#6fdba0}
.mx-msg-cta:active{transform:scale(.97)}

/* Burbujas */
.mx-thread{display:flex;flex-direction:column;gap:7px}
.mx-bub{
  max-width:88%;padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
}
.mx-bub.is-coach{align-self:flex-start;border-bottom-left-radius:5px}
.mx-bub.is-me{
  align-self:flex-end;border-bottom-right-radius:5px;
  background:linear-gradient(150deg,rgba(0,123,255,.16),rgba(0,123,255,.06));
  border-color:rgba(0,123,255,.26);
}
.mx-bub-txt{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.8);word-break:break-word}
.mx-bub-time{
  font-family:"Inter",sans-serif;font-size:9px;color:rgba(255,255,255,.28);
  margin-top:5px;text-align:right;
}

/* Composer */
.mx-compose{
  display:flex;align-items:flex-end;gap:8px;
  margin-top:11px;padding-top:11px;border-top:1px solid rgba(255,255,255,.055);
}
.mx-compose-inp{
  flex:1;min-height:40px;max-height:120px;resize:none;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  border-radius:12px;padding:11px 13px;
  font-family:"Barlow",sans-serif;font-size:13px;line-height:1.45;color:var(--txt);
  outline:none;transition:border-color .18s,background .18s;
}
.mx-compose-inp::placeholder{color:rgba(255,255,255,.25)}
.mx-compose-inp:focus{border-color:rgba(0,123,255,.4);background:rgba(0,123,255,.04)}
.mx-compose-send{
  flex-shrink:0;width:40px;height:40px;border-radius:12px;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#0a84ff,#0060df);
  box-shadow:0 6px 16px rgba(0,96,223,.32);
  -webkit-tap-highlight-color:transparent;transition:transform .15s;
}
.mx-compose-send .iq-ic{width:15px;height:15px}
.mx-compose-send:active{transform:scale(.93)}

/* ═══════════════════════════════════════════════
   6.5b BANDEJA DEL CLIENTE — #m-notif (.nbx-*)
   Solo avisos del coach. Estado de leído por item:
   "Nuevos" = material saliente, "Anteriores" = hundido.
   Móvil primero (390px).
─────────────────────────────────────────────── */
#m-notif .msheet-body{padding-bottom:calc(24px + var(--safe-b,0px))}
#notif-list{display:flex;flex-direction:column;gap:9px;padding-top:4px}

/* Puntero al chat — no es un aviso, es un acceso */
.nbx-chatlink{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:12px 13px;border-radius:15px;
  background:linear-gradient(150deg,rgba(0,123,255,.16),rgba(0,123,255,.04));
  border:1px solid rgba(0,123,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 20px -12px rgba(0,123,255,.6);
  -webkit-tap-highlight-color:transparent;transition:transform .12s ease;
}
.nbx-chatlink:active{transform:scale(.99)}
.nbx-chatlink-ic{
  width:36px;height:36px;flex-shrink:0;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,123,255,.2);border:1px solid rgba(0,123,255,.34);color:#8cc6ff;
}
.nbx-chatlink-ic .iq-ic{width:16px;height:16px}
.nbx-chatlink-copy{flex:1;min-width:0}
.nbx-chatlink-copy strong{
  display:block;font-family:"Inter",sans-serif;font-size:13px;font-weight:800;
  letter-spacing:-.1px;color:#dbeaff;
}
.nbx-chatlink-copy small{display:block;font-size:11px;color:rgba(200,210,226,.6);margin-top:2px}
.nbx-chatlink-arr{flex-shrink:0;color:rgba(140,198,255,.7)}
.nbx-chatlink-arr .iq-ic{width:16px;height:16px}

/* Tarjeta de aviso ─────────────────────────────────────────────────────── */
.nbx-item{
  position:relative;overflow:hidden;
  padding:12px 13px 13px 16px;border-radius:15px;
  border:1px solid rgba(255,255,255,.07);
}
.nbx-rail{position:absolute;left:0;top:0;bottom:0;width:3px;background:rgba(255,255,255,.14)}

/* NUEVO: material saliente, filo interior, sombra */
.nbx-item.is-new{
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(0,123,255,.08),transparent 60%),
    linear-gradient(158deg,#1b1f26 0%,#141821 55%,#0d0f15 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.014),0 16px 30px -20px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05);
}
.nbx-item.is-new .nbx-rail{background:#4f8cff;box-shadow:0 0 12px rgba(79,140,255,.55)}
.nbx-item.is-new.is-urgent .nbx-rail{background:#e0554f;box-shadow:0 0 12px rgba(224,85,79,.55)}
.nbx-item.is-new.is-important .nbx-rail{background:#e8960c;box-shadow:0 0 12px rgba(232,150,12,.5)}
.nbx-item.is-new.is-green .nbx-rail{background:#2eab65;box-shadow:0 0 12px rgba(46,171,101,.5)}
.nbx-item.is-new.is-urgent{border-color:rgba(224,85,79,.3);background:radial-gradient(120% 90% at 0% 0%,rgba(224,85,79,.1),transparent 60%),linear-gradient(158deg,#221619 0%,#141821 55%,#0d0f15 100%)}
.nbx-item.is-new.is-important{border-color:rgba(232,150,12,.26)}

/* ANTERIOR: material hundido, apagado */
.nbx-item.is-seen{
  background:rgba(0,0,0,.28);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.02);
  opacity:.72;
}
.nbx-item.is-seen .nbx-body{color:rgba(255,255,255,.5)}
.nbx-item.is-seen .nbx-rail{background:rgba(255,255,255,.09)}

.nbx-item-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.nbx-kicker{
  display:inline-flex;align-items:center;gap:6px;flex:1;min-width:0;
  font-family:"Inter",sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.5);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nbx-kicker .iq-ic{width:12px;height:12px;flex-shrink:0}
.nbx-kicker.is-blue{color:#63b0ff}
.nbx-kicker.is-green{color:#4fd08a}
.nbx-kicker.is-urgent{color:#f08a84}
.nbx-kicker.is-important{color:#f0b24a}
.nbx-tag{
  flex-shrink:0;font-family:"Inter",sans-serif;font-size:8px;font-weight:900;
  letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.55);
  padding:3px 7px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
}
.nbx-date{
  flex-shrink:0;font-family:"Inter",sans-serif;font-size:10px;font-weight:600;
  color:rgba(255,255,255,.3);font-variant-numeric:tabular-nums;
}
.nbx-arch{
  flex-shrink:0;width:28px;height:28px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.32);
  -webkit-tap-highlight-color:transparent;transition:all .15s;
}
.nbx-arch .iq-ic{width:13px;height:13px}
.nbx-arch:active{background:rgba(0,123,255,.14);border-color:rgba(0,123,255,.3);color:#8cc6ff;transform:scale(.92)}

.nbx-body{
  font-family:"Barlow",sans-serif;font-size:13px;line-height:1.55;
  color:rgba(255,255,255,.72);margin:0;word-break:break-word;
}
.nbx-replied{
  display:flex;align-items:center;gap:6px;margin-top:9px;
  font-family:"Inter",sans-serif;font-size:10.5px;font-weight:600;color:#4fd08a;
}
.nbx-replied .iq-ic{width:12px;height:12px;flex-shrink:0}

/* CTA accionable (Ver plan) */
.nbx-cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:11px;
  padding:9px 13px;border-radius:11px;cursor:pointer;
  font-family:"Inter",sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;
  background:rgba(0,123,255,.14);border:1px solid rgba(0,123,255,.3);color:#8cc6ff;
  -webkit-tap-highlight-color:transparent;transition:transform .12s;
}
.nbx-cta.is-green{background:rgba(46,171,101,.14);border-color:rgba(46,171,101,.3);color:#6fdba0}
.nbx-cta .iq-ic{width:12px;height:12px}
.nbx-cta:active{transform:scale(.97)}

/* Responder — segundo material: hundido */
.nbx-reply{
  display:flex;align-items:flex-end;gap:8px;margin-top:11px;
  padding:8px;border-radius:13px;
  background:rgba(0,0,0,.34);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.03);
}
.nbx-reply-inp{
  flex:1;min-height:36px;max-height:110px;resize:none;
  background:transparent;border:0;outline:none;padding:6px 4px;
  font-family:"Barlow",sans-serif;font-size:13px;line-height:1.45;color:var(--txt);
}
.nbx-reply-inp::placeholder{color:rgba(255,255,255,.28)}
.nbx-reply-send{
  flex-shrink:0;width:36px;height:36px;border-radius:11px;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#0a84ff,#0060df);
  box-shadow:0 6px 16px rgba(0,96,223,.32);
  -webkit-tap-highlight-color:transparent;transition:transform .13s;
}
.nbx-reply-send .iq-ic{width:14px;height:14px}
.nbx-reply-send:active{transform:scale(.92)}

/* Skeleton — sin spinner */
.nbx-skeleton{display:flex;flex-direction:column;gap:9px}
.nbx-sk{
  position:relative;overflow:hidden;border-radius:15px;
  padding:14px 13px 16px 16px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);
}
.nbx-sk-rail{position:absolute;left:0;top:0;bottom:0;width:3px;background:rgba(255,255,255,.08)}
.nbx-sk i{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.06)}
.nbx-sk-l1{width:38%;margin-bottom:11px}
.nbx-sk-l2{width:92%;margin-bottom:7px}
.nbx-sk-l3{width:64%}
.nbx-sk::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
  animation:nbxsheen 1.3s infinite;
}
@keyframes nbxsheen{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.nbx-sk::after{animation:none}}

@media (max-width:370px){
  .nbx-item{padding:11px 11px 12px 14px}
  .nbx-body{font-size:12.5px}
  .nbx-kicker{font-size:9px}
}

/* 6.6 Perfil (player card) */
.cx-modal .pc-hero{
  gap:15px;padding:15px;border-radius:18px;margin-bottom:2px;
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),var(--bg2);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.cx-modal .pc-hero::before{background:radial-gradient(circle,rgba(0,123,255,.14),transparent 70%)}
.cx-modal .pc-name{font-size:20px;font-weight:800;letter-spacing:-.4px}
.cx-modal .pc-goal{font-size:9px;letter-spacing:1.3px;color:rgba(255,255,255,.36);margin-top:4px}
.cx-modal .pc-level-badge{
  background:linear-gradient(135deg,#0a84ff,#0060df);color:#fff;
  padding:2px 9px;font-size:8.5px;letter-spacing:1.2px;
  box-shadow:0 4px 12px rgba(0,96,223,.4);
}
.cx-modal #pc-ring-circle{stroke:#0a84ff}

.cx-modal .pc-stats{gap:8px;margin-bottom:14px}
.cx-modal .pc-stat{
  border-radius:14px;padding:12px;gap:10px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
}
.cx-modal .pc-stat-ic{
  width:30px;height:30px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.45);
}
.cx-modal .pc-stat-ic .iq-ic{width:14px;height:14px}
.cx-modal .pc-stat-val{font-size:19px;letter-spacing:-.5px}
.cx-modal .pc-stat-lbl{font-size:9px;color:rgba(255,255,255,.34);margin-top:3px;letter-spacing:.4px}
/* Tonos por clase (antes venían inline desde renderPlayerCard) */
.cx-modal .pc-stat.is-green .pc-stat-ic{background:var(--green-bg);border-color:var(--green-brd);color:#4fd08a}
.cx-modal .pc-stat.is-amber .pc-stat-ic{background:var(--amber-bg);border-color:var(--amber-brd);color:#f0ab3d}
.cx-modal .pc-stat.is-red .pc-stat-ic{background:var(--red-bg);border-color:var(--red-brd);color:#ff7b7b}
.cx-modal .pc-stat.is-blue .pc-stat-ic{background:var(--blue-bg);border-color:var(--blue-brd);color:#63b0ff}
.cx-modal .pc-stat.is-gold .pc-stat-ic{background:rgba(235,235,235,.09);border-color:rgba(235,235,235,.2);color:#ebebeb}
.cx-modal .pc-stat.is-purple .pc-stat-ic{background:var(--purple-bg);border-color:var(--purple-brd);color:#b48bee}
.cx-modal .pc-stat.is-accent.is-green{background:linear-gradient(150deg,rgba(46,171,101,.11),rgba(46,171,101,.02));border-color:var(--green-brd)}
.cx-modal .pc-stat.is-accent.is-amber{background:linear-gradient(150deg,rgba(232,150,12,.11),rgba(232,150,12,.02));border-color:var(--amber-brd)}
.cx-modal .pc-stat.is-accent.is-red{background:linear-gradient(150deg,rgba(221,68,68,.11),rgba(221,68,68,.02));border-color:var(--red-brd)}
.cx-modal .pc-stat.is-accent.is-green .pc-stat-val{color:#4fd08a}
.cx-modal .pc-stat.is-accent.is-amber .pc-stat-val{color:#f0ab3d}
.cx-modal .pc-stat.is-accent.is-red .pc-stat-val{color:#ff7b7b}

.cx-modal .pc-xp-wrap{
  border-radius:16px;padding:13px 14px;margin-bottom:0;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
}
.pc-xp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pc-xp-ttl{
  font-family:"Inter",sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.4);
}
.pc-xp-val{font-family:"Inter",sans-serif;font-size:10.5px;font-weight:800;color:#63b0ff}
.pc-xp-track{height:7px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.pc-xp-fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg,#0a84ff,#63b0ff);
  transition:width 1s cubic-bezier(.32,1,.36,1);
}

/* 6.7 Logros */
.mx-progress{margin:14px 0 2px}
.cx-modal .ach-master-bar{height:6px;background:rgba(255,255,255,.06);margin-bottom:0}
.cx-modal .ach-master-fill{
  background:linear-gradient(90deg,#0a84ff,#8cc6ff);
  box-shadow:0 0 10px rgba(10,132,255,.4);
}
.cx-modal .logros-preview-grid{gap:8px}
.cx-modal .logros-more-btn{
  border-radius:14px;padding:12px;margin-top:9px;
  background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.12);
  color:rgba(255,255,255,.42);
}
.cx-modal .logros-more-btn:active{background:rgba(0,123,255,.1);border-color:rgba(0,123,255,.3);color:#8cc6ff}

/* ───────────────────────────────────────────────
   7. ALTA DE CLIENTE (#m-newpt) + credenciales
   Mismo sistema de superficies que el resto: el
   formulario traía cada estilo incrustado y cada
   sección se veía de una época distinta.
─────────────────────────────────────────────── */
#m-newpt .msheet{
  background:linear-gradient(178deg,var(--bg3) 0%,var(--bg2) 42%,var(--bg) 100%);
  border-top:1px solid rgba(255,255,255,.12);
}
#m-newpt .newpt-hero{
  align-items:center;gap:13px;margin-bottom:16px;padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
#m-newpt .newpt-eyebrow{
  font-family:"Inter",sans-serif;font-size:9px;font-weight:800;
  letter-spacing:1.7px;text-transform:uppercase;color:rgba(255,255,255,.32);
}
#m-newpt .form-av-circle{
  border-radius:16px;
  background:linear-gradient(150deg,rgba(0,123,255,.22),rgba(0,123,255,.05));
  border:1px solid rgba(0,123,255,.3);color:#8cc6ff;
}
#m-newpt .form-progress{background:rgba(255,255,255,.06)}
#m-newpt .form-progress-fill{background:linear-gradient(90deg,#0a84ff,#63b0ff)}
#m-newpt #np-prog-pct{color:#63b0ff}

/* Pestañas del formulario */
#m-newpt .ftab-nav{
  display:flex;gap:4px;padding:4px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
}
#m-newpt .ftab-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 4px;border:0;border-radius:11px;background:transparent;cursor:pointer;
  font-family:"Inter",sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.4px;
  color:rgba(255,255,255,.34);transition:background .2s,color .2s;
}
#m-newpt .ftab-btn .ftab-ic{width:13px;height:13px}
#m-newpt .ftab-btn.on{
  color:#fff;
  background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 4px 12px rgba(0,0,0,.4);
}
#m-newpt .ftab-btn.on .ftab-ic{color:#63b0ff}

/* Encabezado de sección */
.np-sec{
  display:flex;align-items:center;gap:9px;
  font-family:"Inter",sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:1.7px;text-transform:uppercase;color:rgba(255,255,255,.3);
  margin:18px 0 10px;
}
.np-sec::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.1),transparent);
}

/* Campos */
#m-newpt .field{margin-bottom:11px}
#m-newpt .flbl{
  display:block;font-family:"Inter",sans-serif;font-size:9px;font-weight:800;
  letter-spacing:1.9px;text-transform:uppercase;color:rgba(255,255,255,.34);margin-bottom:7px;
}
#m-newpt input,#m-newpt textarea,#m-newpt select{
  width:100%;border-radius:13px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.075);
  padding:13px 14px;
  font-family:"Inter",sans-serif;font-size:14px;color:#fff;
  outline:none;-webkit-appearance:none;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
#m-newpt textarea{font-family:"Barlow",sans-serif;font-size:13.5px;line-height:1.6}
#m-newpt input::placeholder,#m-newpt textarea::placeholder{color:rgba(255,255,255,.22)}
#m-newpt input:focus,#m-newpt textarea:focus{
  border-color:rgba(0,123,255,.42);background:rgba(0,123,255,.045);
  box-shadow:0 0 0 3px rgba(0,123,255,.12);
}

/* Campo con icono */
.np-input-ic{position:relative}
.np-input-ic>.iq-ic{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:rgba(255,255,255,.24);pointer-events:none;transition:color .2s;
}
.np-input-ic input{padding-left:42px!important}
.np-input-ic:focus-within>.iq-ic{color:#63b0ff}

/* Teléfono: código de país + número */
.np-phone{display:grid;grid-template-columns:84px 1fr;gap:8px}
.np-phone-cc{text-align:center;letter-spacing:.5px}
.np-hint{
  margin:7px 2px 0;font-size:10.5px;line-height:1.5;color:rgba(255,255,255,.3);
}

/* ── Modal de credenciales (tarjeta de alta) ── */
.iq-cred-overlay{
  position:fixed;inset:0;z-index:99998;
  display:flex;align-items:center;justify-content:center;
  padding:max(18px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(18px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.credx{
  position:relative;width:100%;max-width:390px;max-height:min(92dvh,760px);overflow-y:auto;box-sizing:border-box;
  padding:22px 20px 18px;border-radius:22px;text-align:left;
  background:#0b0e13;border:1px solid rgba(191,205,224,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 80px rgba(0,0,0,.82);
}
.credx:before{content:"";position:absolute;z-index:1;top:0;left:28px;right:28px;height:2px;border-radius:0 0 2px 2px;background:#278cff;box-shadow:0 0 18px rgba(39,140,255,.55)}
.credx::-webkit-scrollbar{display:none}
.credx-top{text-align:center;margin-bottom:17px;padding:6px 0 18px;border-bottom:1px solid rgba(191,205,224,.10)}
.credx-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:13px;margin-bottom:12px;
  background:#10241a;border:1px solid rgba(63,210,127,.34);color:#5add91;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px rgba(17,105,57,.18);
}
.credx-check .iq-ic{width:21px;height:21px}
.credx-eyebrow{
  display:block;font-family:"Inter",sans-serif;font-size:8px;font-weight:850;
  letter-spacing:1.7px;text-transform:uppercase;color:#69dfa0;
}
.credx-name{
  margin:6px 0 0;font-family:"Inter",sans-serif;font-size:22px;font-weight:850;
  letter-spacing:0;color:#fff;line-height:1.15;overflow-wrap:anywhere;
}
.credx-sub{margin:6px 0 0;color:rgba(224,231,241,.48);font:550 10px/1.4 "Inter",sans-serif}
.credx-sec{
  font-family:"Inter",sans-serif;font-size:9px;font-weight:800;
  letter-spacing:1.5px;text-transform:uppercase;color:rgba(203,215,232,.42);
  margin:0 2px 9px;
}
.credx-box{
  border-radius:14px;overflow:hidden;
  background:#0f131a;border:1px solid rgba(191,205,224,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.credx-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:56px;box-sizing:border-box;padding:13px 15px;
}
.credx-row+.credx-row{border-top:1px solid rgba(191,205,224,.09)}
.credx-k{
  font-family:"Inter",sans-serif;font-size:10px;font-weight:800;
  letter-spacing:1.2px;text-transform:uppercase;color:rgba(203,215,232,.42);
}
.credx-v{
  font-family:"Inter",sans-serif;font-size:16px;font-weight:800;
  color:#f5f8fc;letter-spacing:0;text-align:right;
  overflow:hidden;text-overflow:ellipsis;
}
.credx-v.is-code{font-size:22px;letter-spacing:5px;color:#6eb5ff;font-variant-numeric:tabular-nums}
.credx-note{
  margin:9px 0 17px;padding:9px 11px;border-left:2px solid rgba(72,151,255,.45);border-radius:0 9px 9px 0;
  color:rgba(203,215,232,.46);background:rgba(72,151,255,.045);font:520 10px/1.5 "Inter",sans-serif;
}

.iq-cred-overlay .cred-invite{
  border-radius:15px;padding:14px;margin-bottom:15px;text-align:left;
  background:#0e1218;border:1px solid rgba(191,205,224,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.cred-invite-head{display:flex;min-width:0;flex-direction:column;gap:3px;margin-bottom:11px;text-align:center}.cred-invite-head p{margin:0;color:rgba(203,215,232,.4);font:520 8.5px/1.4 "Inter",sans-serif}
.cred-invite-hd{
  font-family:"Inter",sans-serif;font-size:9px;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;color:rgba(225,232,242,.58);
}
.cred-invite-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cred-send{
  display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:45px;box-sizing:border-box;padding:11px 9px;border-radius:11px;cursor:pointer;text-decoration:none;
  font-family:"Inter",sans-serif;font-size:11px;font-weight:800;letter-spacing:0;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.7);
  -webkit-tap-highlight-color:transparent;transition:transform .15s,background .2s,border-color .2s;
}
.cred-send svg,.cred-send .iq-ic{width:15px;height:15px}
.cred-send:active{transform:scale(.97)}
.cred-send.is-wa{
  background:rgba(37,162,68,.14);border-color:rgba(37,162,68,.32);color:#5ddb8a;
}
.cred-send.is-mail{
  background:rgba(0,123,255,.12);border-color:rgba(0,123,255,.3);color:#8cc6ff;
}
.cred-send[disabled]{opacity:.4;pointer-events:none}
.cred-send-state{
  width:100%;margin:10px auto 0;text-align:center;overflow-wrap:anywhere;
  font-family:"Inter",sans-serif;font-size:9.5px;font-weight:600;
  color:rgba(203,215,232,.42);line-height:1.45;
}
.cred-send-state.is-ok{color:#4fd08a}
.cred-send-state.is-err{color:#ff8a8a}
.cred-send-state.is-busy{color:#8cc6ff}
.iq-cred-overlay .cred-done{
  width:100%;min-height:50px;padding:14px;border:1px solid rgba(86,164,255,.30);border-radius:13px;cursor:pointer;
  font-family:"Inter",sans-serif;font-size:13px;font-weight:800;
  letter-spacing:1.8px;text-transform:uppercase;color:#fff;
  background:#087cf0;
  box-shadow:0 10px 26px rgba(0,96,223,.34);
}
@media(max-width:360px){.credx{padding:20px 15px 15px}.cred-invite-row{grid-template-columns:1fr}.credx-row{padding-inline:13px}.credx-v{max-width:60%}}

/* ───────────────────────────────────────────────
   8. CHAT DEL CLIENTE CON SU COACH (.pchat-*)
   Cajón dentro de la pestaña Plan. Antes vivía
   entero en estilos inline y se cerraba con un
   arrastre que el pull-to-refresh confundía con
   un tirón de recarga.
─────────────────────────────────────────────── */
.pchat-scrim{
  position:absolute;inset:0;z-index:25;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .28s ease;
}
.pchat-scrim.is-on{opacity:1;pointer-events:auto}

.pchat{
  --pchat-kb:0px;
  position:absolute;left:0;right:0;bottom:0;z-index:30;
  display:flex;flex-direction:column;
  max-height:min(86%,620px);
  border-radius:24px 24px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 22%),#0a0b10;
  border-top:1px solid rgba(255,255,255,.1);
  box-shadow:0 -18px 60px rgba(0,0,0,.8);
  transform:translateY(101%);
  transition:transform .34s cubic-bezier(.32,1,.36,1);
  visibility:hidden;
}
.pchat.is-open{transform:translateY(calc(-1 * var(--pchat-kb)));visibility:visible}
.pchat.is-dragging{transition:none}
@media (prefers-reduced-motion:reduce){
  .pchat{transition:none}
  .pchat-scrim{transition:none}
}

.pchat-grab{display:flex;justify-content:center;padding:10px 0 4px;cursor:grab;touch-action:none}
.pchat-grab-bar{width:38px;height:4px;border-radius:99px;background:rgba(255,255,255,.16)}

.pchat-head{
  display:flex;align-items:center;gap:11px;
  padding:8px 14px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  touch-action:none;
}
.pchat-av{
  width:38px;height:38px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#0a84ff,#0044ab);
  font-family:"Inter",sans-serif;font-size:13px;font-weight:800;color:#fff;
}
.pchat-who{flex:1;min-width:0}
.pchat-name{
  font-family:"Inter",sans-serif;font-size:14.5px;font-weight:800;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pchat-sub{
  display:flex;align-items:center;gap:5px;margin-top:2px;
  font-family:"Inter",sans-serif;font-size:10.5px;color:rgba(255,255,255,.36);
}
.pchat-sub::before{
  content:"";width:5px;height:5px;border-radius:50%;background:#4fd08a;flex-shrink:0;
}
.pchat-close{
  width:32px;height:32px;flex-shrink:0;border-radius:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.5);
  -webkit-tap-highlight-color:transparent;transition:background .18s,color .18s;
}
.pchat-close .iq-ic{width:14px;height:14px}
.pchat-close:active{background:rgba(255,255,255,.1);color:#fff}

.pchat-history{
  flex:1;min-height:120px;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:14px 14px 8px;
  scroll-behavior:smooth;
}
.pchat-history::-webkit-scrollbar{display:none}
.pchat-loading{
  padding:26px;text-align:center;
  font-family:"Inter",sans-serif;font-size:12px;color:rgba(255,255,255,.32);
}

.pchat-day{display:flex;align-items:center;justify-content:center;margin:6px 0 12px}
.pchat-day span{
  padding:4px 11px;border-radius:999px;
  background:rgba(255,255,255,.045);
  font-family:"Inter",sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.34);
}

.pchat-row{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:3px}
.pchat-row.is-me{align-items:flex-end}
.pchat-row.is-last{margin-bottom:12px}
.pchat-bubble{
  max-width:80%;padding:10px 13px;
  border-radius:16px 16px 16px 5px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.07);
  font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.88);
  word-break:break-word;white-space:pre-wrap;
}
.pchat-row.is-me .pchat-bubble{
  border-radius:16px 16px 5px 16px;
  background:linear-gradient(150deg,#0a84ff,#0059cc);
  border-color:rgba(120,190,255,.28);color:#fff;
}
.pchat-time{
  font-family:"Inter",sans-serif;font-size:9.5px;color:rgba(255,255,255,.26);
  margin-top:4px;padding:0 3px;
}

.pchat-empty{
  height:100%;min-height:180px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:20px;
}
.pchat-empty-ic{
  width:46px;height:46px;border-radius:15px;margin-bottom:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.38);
}
.pchat-empty-ic .iq-ic{width:20px;height:20px}
.pchat-empty-t{font-family:"Inter",sans-serif;font-size:14px;font-weight:800;color:var(--txt)}
.pchat-empty-s{font-size:12px;color:rgba(255,255,255,.34);margin-top:5px}

.pchat-composer{
  display:flex;align-items:flex-end;gap:9px;
  padding:10px 12px calc(12px + var(--safe-b,0px));
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.015);
}
.pchat-inp{
  flex:1;min-height:42px;max-height:120px;resize:none;
  padding:11px 15px;border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  font-family:"Barlow",sans-serif;font-size:14px;line-height:1.45;color:var(--txt);
  outline:none;-webkit-appearance:none;overflow-y:auto;
  transition:border-color .18s,background .18s;
}
.pchat-inp::placeholder{color:rgba(255,255,255,.25)}
.pchat-inp:focus{border-color:rgba(0,123,255,.42);background:rgba(0,123,255,.05)}
.pchat-send{
  width:42px;height:42px;flex-shrink:0;border-radius:14px;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#0a84ff,#0060df);
  box-shadow:0 8px 20px rgba(0,96,223,.34);
  -webkit-tap-highlight-color:transparent;transition:transform .15s,opacity .2s;
}
.pchat-send svg{width:17px;height:17px}
.pchat-send:active{transform:scale(.93)}
.pchat-send[disabled]{opacity:.45;pointer-events:none}

/* ── 8.1 Botón de chat ──
   Antes: verde, redondo, position:absolute a 16px del borde → flotaba sobre
   #plan-signature y la pisaba. Ahora es el elemento derecho de esa barra
   (hijo flex), comparte forma y color con el resto de acciones primarias.
   Su visibilidad la sigue mandando _updatePlanChatFab (chat disponible o no). */
.pchat-fab{
  position:relative;flex-shrink:0;
  width:46px;height:46px;border-radius:15px;border:0;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  color:#fff;
  background:linear-gradient(140deg,#0a84ff,#0052cc);
  box-shadow:0 10px 24px -6px rgba(0,70,180,.5),0 1px 0 rgba(255,255,255,.22) inset;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s cubic-bezier(.32,1,.36,1),box-shadow .2s;
}
.pchat-fab svg{width:21px;height:21px}
.pchat-fab:active{transform:scale(.92);box-shadow:0 6px 16px rgba(0,70,180,.35)}
.pchat-fab-pip{
  position:absolute;top:-4px;right:-4px;
  min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  display:none;align-items:center;justify-content:center;box-sizing:border-box;
  background:var(--red);border:2px solid #0a0c0f;
  font-family:"Inter",sans-serif;font-size:9.5px;font-weight:900;line-height:1;color:#fff;
}

/* ───────────────────────────────────────────────
   9. BARRA DE NAVEGACIÓN DEL CLIENTE (#bnav)
   Se veía alta: icono grande que además saltaba,
   halo radial y etiqueta de 10px. Se compacta y
   el estado activo se resuelve con color.
─────────────────────────────────────────────── */
:root{--bnav-h:48px}
/* Altura REAL de #bnav (fija abajo). Antes #plan-wrap reservaba
   `--bnav-h + 6 + safe-b` mientras #bnav solo ocupa `--bnav-h + 18% del inset`:
   el safe-area contaba dos veces y dejaba ~32px de banda negra sobre las
   pestañas. Ahora los dos se miden desde --bnav-real-h. Las demás pantallas
   (.cx-screen .scroll) siguen usando --bnav-h y no cambian. */
#plan-wrap{bottom:var(--bnav-real-h)}
#bnav{
  height:var(--bnav-real-h);
  padding:2px 0 max(3px,calc(env(safe-area-inset-bottom,4px) * .18));
}
#bnav .ni{gap:3px;padding:5px 4px 3px}
#bnav .ni-ic{min-height:20px}
#bnav .ni-ic .iq-ic{width:19px;height:19px}
#bnav .ni-lb{
  font-family:"Inter",sans-serif;font-size:9px;font-weight:800;
  letter-spacing:.7px;
}
/* El icono ya no salta ni proyecta halo: el activo se distingue por color y
   por la barra superior, que es lo que se lee de un vistazo. */
#bnav .ni.on .ni-ic{transform:none;color:var(--blue)}
#bnav .ni.on .ni-ic .iq-ic{filter:drop-shadow(0 0 5px rgba(0,123,255,.45))}
#bnav .ni-glow{display:none}
#bnav .ni-bar{height:2px;border-radius:0 0 2px 2px}
#bnav .ni.on .ni-bar{width:26px}
#bnav .ni-pip{top:0;right:-2px;width:7px;height:7px;border-width:1.5px}
/* El colchón inferior del scroll se ata a la altura real de la barra: con el
   valor fijo anterior sobraba hueco al final de cada pestaña. */
.cx-screen .scroll{padding-bottom:calc(var(--bnav-h) + 24px + var(--safe-b,0px))}
.pwa-standalone .cx-screen .scroll{padding-bottom:calc(var(--bnav-h) + 16px + env(safe-area-inset-bottom,0px))}

/* ───────────────────────────────────────────────
   10. PERFIL Y AJUSTES DEL COACH (#m-drprofile)
   Cada bloque traía su propia paleta incrustada
   (oro, verde, azul, violeta) y sus propios
   radios. Aquí manda el sistema .mx-* y el acento
   sirve para jerarquizar, no para decorar.
─────────────────────────────────────────────── */
.dpx-head{
  display:flex;align-items:center;gap:14px;
  padding:4px 0 18px;margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.dpx-av{
  width:58px;height:58px;flex-shrink:0;
  font-family:"Inter",sans-serif;font-size:20px;font-weight:900;
  box-shadow:0 0 0 2px #000,0 0 0 3.5px rgba(0,123,255,.5),0 8px 22px rgba(0,0,0,.5);
}
.dpx-head-copy{flex:1;min-width:0}
.dpx-name{
  margin:4px 0 0;
  font-family:"Inter",sans-serif;font-size:20px;font-weight:800;
  letter-spacing:-.4px;color:var(--txt);line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Pestañas Perfil / Ajustes */
.dpx-tabs{
  display:flex;gap:4px;margin-bottom:18px;padding:4px;
  border-radius:15px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
}
.dpx-tab{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 0;border:0;border-radius:12px;background:transparent;cursor:pointer;
  font-family:"Inter",sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.34);
  -webkit-tap-highlight-color:transparent;transition:background .2s,color .2s,box-shadow .2s;
}
.dpx-tab .iq-ic{width:14px;height:14px}
.dpx-tab.is-on{
  color:#fff;
  background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 4px 14px rgba(0,0,0,.4);
}
.dpx-tab.is-on .iq-ic{color:#63b0ff}

/* Datos de la cuenta */
.dpx-sec{
  font-family:"Inter",sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:1.8px;text-transform:uppercase;color:rgba(255,255,255,.3);
  margin:0 2px 9px;
}
.dpx-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.dpx-stat{
  display:flex;flex-direction:column;gap:6px;
  padding:14px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.065);
}
.dpx-stat-k{
  font-family:"Inter",sans-serif;font-size:9px;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.32);
}
.dpx-stat-v{
  font-family:"Inter",sans-serif;font-size:13px;font-weight:800;color:var(--txt);
  line-height:1.2;
}
.dpx-stat-v.is-big{font-size:26px;letter-spacing:-.8px;color:#63b0ff}
.dpx-group{margin-bottom:14px}
#m-drprofile .mx-row-v{font-size:12px;max-width:65%}

/* Filas de acción */
.dpx-row{border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.065)}
.dpx-row+.dpx-row{margin-top:8px;border-top:1px solid rgba(255,255,255,.065)}
.dpx-row--solo{margin-bottom:10px}
.dpx-arrow{
  flex-shrink:0;font-family:"Barlow",sans-serif;font-size:20px;font-weight:200;
  line-height:1;color:rgba(255,255,255,.2);
}
#dppanel-ajustes>div{display:flex;flex-direction:column;gap:0}
.dpx-logout{margin-top:14px}

/* Tarjetas colapsables heredadas (WhatsApp, branding): se les quita el marco
   de color propio para que no compitan entre sí dentro del mismo panel. */
#m-drprofile #dp-branding-card>button,
#m-drprofile #dppanel-perfil>div[style*="rgba(37,211,102"]{
  border-radius:16px!important;
}
#m-drprofile #dp-quickroutine-card>button{border-radius:16px!important}

/* ───────────────────────────────────────────────
   11. TARJETAS DE CLIENTE (panel del coach)

   Por qué se veían planas, en orden de impacto:
   1. La tarjeta y sus tres bloques internos (cabecera, franja operativa y
      detalle) usaban el mismo tratamiento —translúcido claro sobre negro,
      borde de 1px, radio parecido—: todo al mismo nivel, sin jerarquía.
   2. El filo de estado era una línea de 1px ARRIBA. La geometría venía del
      hairline base y las clases de acento solo cambiaban su color, así que en
      una lista el estado de membresía era invisible.
   3. Una sola sombra difusa, sin sombra de contacto: la tarjeta no se
      despegaba del fondo.
   4. Los badges (que sí funcionan) tienen relieve real, y por contraste
      dejaban en evidencia lo demás.

   El arreglo no toca el marcado ni los gestos: sube la tarjeta y HUNDE sus
   bloques internos. Ese contraste elevado/hundido es lo que da profundidad.
─────────────────────────────────────────────── */
#pt-list{gap:12px}

#scr-admin .ptcard{
  border-radius:18px;
  padding:15px 15px 13px 17px;
  background:
    radial-gradient(130% 90% at 50% -25%,rgba(255,255,255,.075),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.008) 38%,rgba(0,0,0,.25) 100%),
    #07080b;
  border:1px solid rgba(255,255,255,.075);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 20px 36px -24px rgba(0,0,0,.95),
    0 3px 9px -5px rgba(0,0,0,.75);
  transition:transform .14s cubic-bezier(.32,1,.36,1),box-shadow .2s,border-color .2s;
}
/* Filo de estado: pasa de línea superior de 1px a canto vertical. */
#scr-admin .ptcard::before{
  top:12px;bottom:12px;left:0;right:auto;
  width:3px;height:auto;border-radius:0 3px 3px 0;
}
#scr-admin .ptcard:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 18px -14px rgba(0,0,0,.9),
    0 1px 4px -2px rgba(0,0,0,.7);
}
/* Abierta, la tarjeta se separa más del resto de la lista. El borde conserva
   el tinte de estado: neutralizarlo al expandir perdía la señal justo cuando
   más se mira la tarjeta. */
#scr-admin .ptcard.is-expanded{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 28px 48px -26px rgba(0,0,0,1),
    0 4px 12px -6px rgba(0,0,0,.8);
}

/* Cabecera: el nombre es el ancla de la tarjeta y necesitaba peso. */
#scr-admin .ptc-name{font-size:20px;letter-spacing:-.3px;line-height:1.1}
#scr-admin .ptc-hd{gap:12px;margin-bottom:11px}
#scr-admin .ptc-goal{
  padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);
  font-size:8px;letter-spacing:1px;
}

/* Bloques internos HUNDIDOS — aquí está el grueso de la profundidad. */
#scr-admin .ptc-glance{
  border-radius:14px;
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.28));
  border:1px solid rgba(255,255,255,.05);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.65),
    inset 0 -1px 0 rgba(255,255,255,.035);
}
#scr-admin .ptc-glance-item b{font-size:21px;letter-spacing:-.2px}
#scr-admin .ptc-glance-weight b{font-size:23px}
#scr-admin .ptc-glance-weight-trend .ptcard-trend{font-size:7.2px;letter-spacing:0}
#scr-admin .ptc-glance-activity .ptc-activity-status b{font-size:12.5px}
#scr-admin .ptc-glance-item small{
  font-size:7.5px;letter-spacing:1.1px;color:rgba(255,255,255,.3);
}

#scr-admin .ptc-stats{gap:7px}
#scr-admin .ptc-stat{
  border-radius:13px;padding:10px 5px 9px;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.22));
  border:1px solid rgba(255,255,255,.05);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6);
}
#scr-admin #pt-list .ptc-stat-goal,
#scr-admin #pt-list .ptc-stat-target{
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.22));
}
#scr-admin #pt-list .ptc-stat-adh{
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6);
}
#scr-admin .ptc-stat-lbl{font-size:7.5px;letter-spacing:.9px;color:rgba(255,255,255,.34)}

/* El detalle abierto se separa de la franja con un filo de luz, no con un
   borde plano: se lee como una capa nueva y no como más de lo mismo. */
/* Solo al abrir: sin la condicion, el margen y el borde del detalle seguian
   midiendo ~22px con la tarjeta cerrada y dejaban aire muerto sobre el pie. */
#scr-admin .ptcard.is-expanded .ptc-expand-body{
  padding-top:11px;margin-top:10px;
  border-top:1px solid rgba(255,255,255,.055);
  box-shadow:0 -1px 0 rgba(0,0,0,.6);
}

@media(prefers-reduced-motion:reduce){
  #scr-admin .ptcard{transition:none}
}

/* ───────────────────────────────────────────────
   12. MI PLAN (#m-miplan)
   La tarjeta de membresía ya tenía cuerpo, pero lo
   que venía debajo —herramientas, capacidades,
   referidos, datos de pago— eran bloques planos
   con paletas propias (oro, plata, violeta, verde)
   que competían con ella. Se aplica el mismo
   sistema que a las tarjetas de cliente: superficie
   elevada, bloques internos hundidos, un acento.
─────────────────────────────────────────────── */
#m-miplan .msheet{
  background:linear-gradient(178deg,var(--bg3) 0%,var(--bg2) 40%,var(--bg) 100%);
  border-top:1px solid rgba(255,255,255,.12);
}
#m-miplan .mp-sheet-head{
  gap:12px;padding-bottom:16px;margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
#m-miplan .mp-sheet-eyebrow{
  font-family:"Inter",sans-serif;font-size:9px;font-weight:800;
  letter-spacing:1.7px;text-transform:uppercase;color:rgba(255,255,255,.32);
}
#m-miplan .mp-sheet-title{
  font-family:"Inter",sans-serif;font-size:20px;font-weight:800;
  letter-spacing:-.4px;color:var(--txt);margin-top:3px;
}
#m-miplan .mp-sheet-sub{font-size:11px;color:rgba(255,255,255,.34);margin-top:2px}

/* Tarjeta de membresía: se eleva de verdad sobre la hoja. */
#m-miplan .mp-card{
  border-radius:20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 22px 40px -26px rgba(0,0,0,1),
    0 4px 10px -6px rgba(0,0,0,.8);
}
#m-miplan .mp-card-bar{
  background:rgba(0,0,0,.5);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7);
}

/* Herramientas y acordeón: superficie hundida, como en las tarjetas. */
#m-miplan .mp-tools-grid{gap:8px}
#m-miplan .mp-tool,
#m-miplan .mp-acc,
#m-miplan .mp-feature{
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.22));
  border:1px solid rgba(255,255,255,.055);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55);
}
#m-miplan .mp-tool{border-radius:14px}
#m-miplan .mp-acc{border-radius:15px}
#m-miplan .mp-feature{border-radius:12px}

/* ── Referidos ────────────────────────────────────────────────────────────
   Escala de contraste, que era el problema de fondo: casi todo el texto
   secundario vivia en blanco al 28-36%, que sobre este fondo da ~3:1. No
   habia escala intermedia — blanco arriba y gris muerto debajo.
     valor    #EFF2F7
     etiqueta rgba(214,222,235,.62)   ~9:1
     apoyo    rgba(200,210,226,.55)   ~7:1
     minimo   .5 · por debajo no baja nada
   Y dos materiales, como en los datos bancarios: la tarjeta sobresale, los
   valores viven en pozos hundidos. */
.mp-ref{
  --ref-rgb:99,176,255;--ref:#63b0ff;
  margin-top:12px;padding:14px;border-radius:18px;
  background:
    radial-gradient(120% 80% at 50% -20%,rgba(var(--ref-rgb),.07),transparent 64%),
    linear-gradient(158deg,#1a1e25 0%,#111419 48%,#08090b 100%);
  border:1px solid rgba(200,210,225,.1);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.016),
    0 18px 32px -22px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(255,255,255,.055);
}
.mp-ref-head{
  display:flex;align-items:center;gap:12px;width:100%;
  background:transparent;border:0;padding:0;cursor:pointer;text-align:left;
  -webkit-tap-highlight-color:transparent;
}
.mp-ref-ic{
  width:40px;height:40px;flex-shrink:0;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--ref-rgb),.13);border:1px solid rgba(var(--ref-rgb),.28);
  color:var(--ref);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 20px -12px rgba(var(--ref-rgb),.5);
}
.mp-ref-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9}
/* Nombre propio: `mp-ref-copy` la usaba también el botón de copiar y este
   bloque heredaba su fondo y su borde, que es la pastilla gris que se tragaba
   el título. */
.mp-ref-title{flex:1;min-width:0;display:block}
.mp-ref-title b{
  display:block;font-family:"Inter",sans-serif;font-size:14px;font-weight:800;
  color:#F1F4F9;letter-spacing:-.1px;
}
.mp-ref-title small{
  display:block;font-family:"Inter",sans-serif;font-size:11px;font-weight:500;
  color:rgba(200,210,226,.58);margin-top:2px;line-height:1.35;
}
.mp-ref-chev{
  flex-shrink:0;width:16px;height:16px;color:rgba(200,210,226,.55);
  transition:transform .22s cubic-bezier(.22,1,.36,1);
}
.mp-ref-chev svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}
.mp-ref-body{
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .3s ease,opacity .24s ease;
}
.mp-ref-body.is-open{max-height:1100px;opacity:1}
.mp-ref-head[aria-expanded="true"] .mp-ref-chev{transform:rotate(180deg)}
.mp-ref-body>*:first-child{margin-top:15px}

/* ── Cómo funciona: lo que faltaba por completo ── */
.mp-ref-how{
  list-style:none;margin:0 0 13px;padding:11px 12px;border-radius:14px;
  display:flex;flex-direction:column;gap:9px;
  background:rgba(var(--ref-rgb),.05);
  border:1px solid rgba(var(--ref-rgb),.16);
}
.mp-ref-how li{
  display:flex;align-items:center;gap:10px;
  font-family:"Inter",sans-serif;font-size:12px;font-weight:600;
  color:rgba(214,222,235,.82);line-height:1.3;
}
.mp-ref-how li span{
  width:20px;height:20px;flex:0 0 20px;border-radius:7px;
  display:grid;place-items:center;
  font-size:10px;font-weight:900;color:var(--ref);
  background:rgba(var(--ref-rgb),.14);border:1px solid rgba(var(--ref-rgb),.3);
}

/* ── El dinero manda ── */
.mp-ref-money{
  display:flex;align-items:stretch;gap:11px;margin-bottom:14px;
  padding:13px;border-radius:15px;
  background:rgba(0,0,0,.36);
  border:1px solid rgba(240,171,61,.18);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7),inset 0 -1px 0 rgba(255,255,255,.035);
}
.mp-ref-money-main{flex:1 1 auto;min-width:0}
.mp-ref-money-k{
  display:block;font-family:"Inter",sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:1.2px;text-transform:uppercase;color:rgba(240,171,61,.72);
}
.mp-ref-money-main b{
  display:block;font-family:"Inter",sans-serif;font-size:30px;font-weight:900;
  letter-spacing:-1.2px;line-height:1.05;color:#F0AB3D;margin-top:4px;
  font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(240,171,61,.3);
}
.mp-ref-money-main small{
  display:block;font-family:"Inter",sans-serif;font-size:11px;font-weight:500;
  color:rgba(200,210,226,.55);margin-top:3px;
}
.mp-ref-money-side{
  flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:9px;
  padding-left:12px;border-left:1px solid rgba(255,255,255,.07);text-align:right;
}
.mp-ref-money-side b{
  display:block;font-family:"Inter",sans-serif;font-size:15px;font-weight:800;
  color:#E9EDF4;line-height:1;font-variant-numeric:tabular-nums;
}
.mp-ref-money-side small{
  display:block;font-family:"Inter",sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.9px;text-transform:uppercase;color:rgba(200,210,226,.52);margin-top:3px;
}

.mp-ref-block{margin-bottom:14px}
.mp-ref-lbl{
  font-family:"Inter",sans-serif;font-size:10px;font-weight:800;
  letter-spacing:1.2px;text-transform:uppercase;color:rgba(214,222,235,.62);
  margin-bottom:8px;
}

/* ── El link: el valor ES el botón ── */
.mp-ref-link{
  width:100%;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;
  padding:10px 10px 10px 13px;border-radius:13px;
  background:rgba(0,0,0,.36);
  border:1px solid rgba(var(--ref-rgb),.2);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7),inset 0 -1px 0 rgba(255,255,255,.035);
  -webkit-tap-highlight-color:transparent;
  transition:border-color .18s,transform .12s;
}
.mp-ref-link:active{transform:scale(.99);border-color:rgba(var(--ref-rgb),.38)}
/* El dominio cede espacio; el código, nunca — es la parte que identifica
   el link y era justo la que se comía la elipsis. */
.mp-ref-link-txt{
  flex:1;min-width:0;display:flex;align-items:baseline;
  font-family:"Inter",sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.1px;
}
.mp-ref-link-host{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:rgba(200,210,226,.55);font-weight:600;
}
.mp-ref-link-slug{flex:0 0 auto;color:var(--ref);white-space:nowrap}
.mp-ref-link-act{
  flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
  height:30px;padding:0 11px;border-radius:9px;
  font-family:"Inter",sans-serif;font-size:10.5px;font-weight:700;
  color:rgba(206,214,228,.72);
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.mp-ref-link-act svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}

.mp-slug{
  display:flex;align-items:stretch;overflow:hidden;border-radius:13px;
  background:rgba(0,0,0,.36);border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7);
}
.mp-slug-pre{
  display:flex;align-items:center;padding:12px 6px 12px 14px;flex-shrink:0;
  font-family:"Inter",sans-serif;font-size:11.5px;font-weight:600;
  color:rgba(200,210,226,.5);user-select:none;
}
.mp-slug-inp{
  flex:1;min-width:0;background:transparent;border:0;outline:0;padding:12px 6px;
  font-family:"Inter",sans-serif;font-size:15px;font-weight:800;color:#F1F4F9;
  -webkit-appearance:none;
}
.mp-slug-save{
  flex-shrink:0;padding:0 15px;border:0;border-left:1px solid rgba(255,255,255,.09);
  background:rgba(var(--ref-rgb),.18);color:#9ccbff;cursor:pointer;
  font-family:"Inter",sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.3px;
  white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background .18s;
}
.mp-slug-save:disabled{opacity:.42;cursor:default}
.mp-ref-hint{margin:8px 2px 0;font-size:10.5px;line-height:1.5;color:rgba(200,210,226,.52)}
.mp-ref-warn{
  display:none;margin-top:9px;padding:9px 11px;border-radius:11px;
  background:var(--amber-bg);border:1px solid var(--amber-brd);
  font-size:10.5px;line-height:1.55;color:#f0ab3d;
}

.mp-ref-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px}
.mp-ref-tier{
  position:relative;overflow:hidden;
  padding:12px 8px;border-radius:13px;text-align:center;
  background:linear-gradient(158deg,#1a1e25,#0d1014);
  border:1px solid rgba(200,210,225,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 20px -18px rgba(0,0,0,.9);
}
.mp-ref-tier::before{
  content:"";position:absolute;top:0;left:12px;right:12px;height:1px;
  background:linear-gradient(90deg,transparent,currentColor,transparent);
  opacity:.5;
}
.mp-ref-tier b{
  display:block;font-family:"Inter",sans-serif;font-size:19px;font-weight:900;
  letter-spacing:-.4px;line-height:1;
}
.mp-ref-tier small{
  display:block;font-family:"Inter",sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.4px;color:rgba(200,210,226,.58);margin-top:5px;
}
.mp-ref-tier.is-starter{color:#4fd08a}
.mp-ref-tier.is-pro{color:#63b0ff}
.mp-ref-tier.is-elite{color:#b48bee}
.mp-ref-tier b{color:currentColor}
.mp-ref-foot{
  margin:0;text-align:center;font-family:"Inter",sans-serif;
  font-size:10.5px;line-height:1.55;color:rgba(200,210,226,.5);
}

@media (prefers-reduced-motion:reduce){
  .mp-ref-body,.mp-ref-chev{transition:none}
}

/* ── 2.9 Topbar de la pestaña ── */
.rpx-tb-meta{
  display:flex;align-items:center;gap:6px;
  font-family:"Inter",sans-serif;font-size:9px;font-weight:800;
  letter-spacing:1.3px;text-transform:uppercase;color:rgba(255,255,255,.36);
  margin-top:3px;
}
.rpx-tb-meta .iq-ic{width:11px;height:11px}