/* ═══════════════════════════════════════════════════════════════════════
   Pestaña Reporte del cliente — js/11-reports.js (todos los estados)
   · antes del sábado y semana cerrada: la semana en curso, cuenta atrás y
     qué se le pedirá;
   · formulario: días más claros, fotos compactas y el envío anclado sobre la
     barra con lo que falta;
   · entregado / tardío / en cola: seguimiento Entregado → En revisión →
     Respondido y la respuesta del coach arriba, como mensaje suyo.
   Acento de la marca, nada por debajo de 10 px, movimiento que se apaga.
   ═══════════════════════════════════════════════════════════════════════ */
#scr-reporte .rpx-hero{padding:18px 16px 16px!important;border-radius:26px!important;
  background:radial-gradient(120% 90% at 100% 0%,rgba(var(--tone-rgb,var(--accent-rgb)),.16),transparent 60%),linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,.012))!important;
  border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 18px 40px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)!important}
#scr-reporte .rpx-hero.is-pending{--tone-rgb:251,191,36}
#scr-reporte .rpx-hero.is-urgent{--tone-rgb:255,107,107}
#scr-reporte .rpx-hero.is-sent{--tone-rgb:74,222,128}
#scr-reporte .rpx-hero.is-late{--tone-rgb:167,139,250}
#scr-reporte .rpx-hero.is-closed{--tone-rgb:167,139,250}
#scr-reporte .rpx-hero.is-upcoming{--tone-rgb:var(--accent-rgb)}
#scr-reporte .rpx-hero-glow{display:none}
#scr-reporte .rpx-hero-week{font-size:10.5px!important;letter-spacing:.12em!important;color:rgba(214,224,238,.6)!important}
#scr-reporte .rpx-hero-main{gap:16px!important}
#scr-reporte .rpx-hero-title{font:800 21px/1.2 var(--font,"Inter"),sans-serif!important;letter-spacing:-.02em!important;color:#fff!important}
#scr-reporte .rpx-hero-sub{font-size:13.5px!important;line-height:1.5!important;color:rgba(214,224,238,.66)!important;margin-top:6px!important}
#scr-reporte .rpx-hero-sub b{color:#fff!important}
/* Anillo: más grande, con degradado y su propio brillo */
#scr-reporte .rpx-ring{width:92px!important;height:92px!important;
  background:conic-gradient(from -90deg,color-mix(in srgb,var(--ring-col) 55%,#fff),var(--ring-col) calc(var(--pct)*1%),rgba(255,255,255,.07) 0)!important;
  box-shadow:0 12px 30px -14px var(--ring-col)}
#scr-reporte .rpx-ring::after{inset:8px!important;background:#15171c!important}
#scr-reporte .rpx-ring:not(.is-green):not(.is-amber):not(.is-red){--ring-col:rgba(255,255,255,.25)}
#scr-reporte .rpx-ring-val{font-size:26px!important;letter-spacing:-.04em!important}
#scr-reporte .rpx-ring-lbl{font-size:10px!important;letter-spacing:.04em!important;text-transform:none!important;color:rgba(214,224,238,.55)!important}
#scr-reporte .rpx-steps{gap:10px!important;margin-top:16px!important;padding-top:14px!important}
#scr-reporte .rpx-step{font-size:11px!important;letter-spacing:.02em!important;text-transform:none!important;font-weight:700!important}
#scr-reporte .rpx-step-dot{width:20px!important;height:20px!important}
#scr-reporte .rpx-step-dot .iq-ic{width:11px!important;height:11px!important}

/* Seguimiento de la entrega */
#scr-reporte .rpx-track{position:relative;display:flex;align-items:flex-start;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
#scr-reporte .rpx-track-step{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:70px;text-align:center}
#scr-reporte .rpx-track-step i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-style:normal;
  color:#0b0d10;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14)}
#scr-reporte .rpx-track-step i .iq-ic{width:13px;height:13px}
#scr-reporte .rpx-track-step b{font:700 11px/1.2 var(--font,"Inter"),sans-serif;color:rgba(214,224,238,.5)}
#scr-reporte .rpx-track-step.is-on i{background:linear-gradient(160deg,#86efac,#22c55e);box-shadow:0 6px 14px -6px rgba(74,222,128,.8)}
#scr-reporte .rpx-track-step.is-on b{color:#eef2f7}
#scr-reporte .rpx-track-step.is-now i{animation:rpx-now 2.2s ease-in-out infinite}
#scr-reporte .rpx-track-step.is-now:not(.is-on) i{background:rgba(var(--accent-rgb),.2);box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.6)}
#scr-reporte .rpx-track-line{flex:1;height:2px;margin-top:12px;border-radius:2px;background:rgba(255,255,255,.1)}
#scr-reporte .rpx-track-line.is-on{background:linear-gradient(90deg,#22c55e,#86efac)}
@keyframes rpx-now{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.45)}50%{box-shadow:0 0 0 7px rgba(74,222,128,0)}}

/* Días: más claros y los que aún no llegan, apagados */
#scr-reporte .rpx-days{gap:6px!important}
#scr-reporte .rpx-day{padding:10px 0 9px!important;border-radius:14px!important}
#scr-reporte .rpx-day-n{font-size:16px!important}
#scr-reporte .rpx-day-lbl{font-size:10px!important;letter-spacing:.02em!important}
#scr-reporte .rpx-day.is-future{opacity:.38}
#scr-reporte .rpx-day.is-today{box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.7)}
#scr-reporte .rpx-day.is-today::after{background:var(--accent)!important}
#scr-reporte .rpx-legend-key{font-size:11px!important}
#scr-reporte .rpx-legend-pct{font-size:15px;font-weight:850}

/* Fotos del formulario: compactas, punteadas, con su «+» */
#scr-reporte .rpx-shots{gap:8px}
#scr-reporte .rpx-shot{aspect-ratio:3/4;max-height:132px;min-height:0!important;border-radius:16px!important;border:1.5px dashed rgba(255,255,255,.14)!important;background:rgba(255,255,255,.025)!important}
#scr-reporte .rpx-shot.is-full,#scr-reporte .rpx-shot.is-empty-static{border-style:solid!important}
#scr-reporte .rpx-shot:not(.is-full):not(.is-empty-static) .rpx-shot-ic{position:relative;color:var(--accent-text,#9ccaff);background:rgba(var(--accent-rgb),.12)!important}
#scr-reporte .rpx-shot:not(.is-full):not(.is-empty-static) .rpx-shot-ic::after{content:"+";position:absolute;right:-5px;bottom:-5px;width:16px;height:16px;border-radius:50%;
  display:grid;place-items:center;font:800 12px/1 var(--font,"Inter"),sans-serif;color:#fff;background:var(--accent);box-shadow:0 0 0 2px #15171c}
#scr-reporte .rpx-shot-lbl{font-size:10.5px!important;letter-spacing:.06em!important}

/* Envío anclado sobre la barra de navegación (misma geometría que la cápsula
   de css/25-experiencia.css): siempre a la vista mientras se llena el reporte. */
#scr-reporte .cx:has(.rpx-dock){padding-bottom:88px}
#scr-reporte:not(.active) .rpx-dock{display:none}
@keyframes rpx-dock-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#scr-reporte .rpx-dock{position:fixed;z-index:95;left:max(14px,calc(50% - 246px));right:max(14px,calc(50% - 246px));bottom:calc(max(10px,env(safe-area-inset-bottom,0px) - 10px) + 74px);display:flex;align-items:center;gap:12px;margin:0;animation:rpx-dock-in .45s cubic-bezier(.22,1,.36,1) both;padding:10px 10px 10px 16px;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03)),rgba(16,18,23,.72);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px -16px rgba(0,0,0,.9)}
#scr-reporte .rpx-dock-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#scr-reporte .rpx-dock-copy b{font:750 14px/1.2 var(--font,"Inter"),sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scr-reporte .rpx-dock-copy small{font:550 11.5px/1.2 var(--font,"Inter"),sans-serif;color:rgba(214,224,238,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scr-reporte .rpx-dock .rpx-submit{flex:none;width:auto!important;height:48px!important;margin:0!important;padding:0 20px!important;border-radius:16px!important;gap:8px}
#scr-reporte .rpx-submit:not(:disabled){background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 86%,#fff),var(--accent))!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 26px -12px rgba(var(--accent-rgb),.95)!important;animation:rpx-ready .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes rpx-ready{0%{transform:scale(.92)}60%{transform:scale(1.05)}100%{transform:scale(1)}}

/* Respuesta del coach: su mensaje, con su nombre */
#scr-reporte .rpx-reply{padding:0!important;border:0!important;background:none!important}
#scr-reporte .rpx-reply-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#scr-reporte .rpx-reply-av{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;flex:none;font:800 13px var(--font,"Inter"),sans-serif;color:#fff;
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 75%,#fff),var(--accent))}
#scr-reporte .rpx-reply-hd b{display:block;font:750 14px var(--font,"Inter"),sans-serif;color:#fff}
#scr-reporte .rpx-reply-hd small{display:block;font:550 11.5px var(--font,"Inter"),sans-serif;color:rgba(214,224,238,.55)}
#scr-reporte .rpx-reply-txt{position:relative;padding:14px 16px;border-radius:6px 20px 20px 20px;font:500 15px/1.55 var(--font,"Inter"),sans-serif;color:#eef2f7;
  background:linear-gradient(160deg,rgba(var(--accent-rgb),.2),rgba(var(--accent-rgb),.07));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.25);white-space:pre-wrap}
#scr-reporte .rpx-await{border-radius:16px!important}
#scr-reporte .rpx-quote{font-size:14.5px!important;line-height:1.55!important;color:rgba(236,240,246,.85)!important}

/* «Qué te va a pedir» */
#scr-reporte .rpx-ask{display:flex;flex-direction:column;gap:10px}
#scr-reporte .rpx-ask-row{display:flex;align-items:center;gap:12px}
#scr-reporte .rpx-ask-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;flex:none;--k:var(--accent-text,#9ccaff);color:var(--k);background:color-mix(in srgb,var(--k) 14%,transparent)}
#scr-reporte .rpx-ask-ic.is-green{--k:#4ade80}#scr-reporte .rpx-ask-ic.is-blue{--k:#7cc0ff}
#scr-reporte .rpx-ask-ic .iq-ic{width:18px;height:18px}
#scr-reporte .rpx-ask-copy b{display:block;font:700 14px var(--font,"Inter"),sans-serif;color:#fff}
#scr-reporte .rpx-ask-copy small{display:block;margin-top:2px;font:500 12.5px var(--font,"Inter"),sans-serif;color:rgba(214,224,238,.6)}

/* Historial */
#scr-reporte .rpx-tl-hd{padding:13px 14px!important}
#scr-reporte .rpx-tl-title{font-size:14px!important;font-weight:750!important}
#scr-reporte .rpx-tl-meta{font-size:12px!important}
#scr-reporte .rpx-tl-dot.is-replied{background:#4ade80!important;box-shadow:0 0 0 4px rgba(74,222,128,.15)}
#scr-reporte .rpx-tl-dot.is-wait{background:#fbbf24!important;box-shadow:0 0 0 4px rgba(251,191,36,.15)}
@media (prefers-reduced-motion:reduce){#scr-reporte .rpx-track-step.is-now i,#scr-reporte .rpx-submit{animation:none!important}}
#scr-reporte .rpx-reply-hd,#scr-reporte .rpx-reply-hd *{text-transform:none!important;letter-spacing:0!important}