:root{
  /* ===== Sistema visual "instrumento" (v2): negro de marca + grafito + paleta funcional sobria ===== */
  --bg:#0A0A0A;            /* negro de marca LoGua */
  --surface:#121318;       /* grafito (tarjetas) */
  --surface-2:#16181F;
  --surface-3:#1d2029;
  --line:#23262F;          /* bordes hairline */
  --line-2:#2b2f3a;
  --text:#F2F3F5;
  --text-dim:#878B95;
  --text-faint:#737A87; /* antes #545A66: contraste ~2:1 sobre #0A0A0A, ilegible; ahora ≥4.5:1 (WCAG AA) */
  /* Signature: "watt yellow" — acento de marca, con cuentagotas */
  --watt:#FFCE00;
  --watt-dim:#C9A200;
  /* Series de datos: paleta VÍVIDA y elegante (2026-07: el dueño pidió más color y vida). */
  --fitness:#2CB8EA;   /* CTL · azur vivo */
  --fatigue:#FF7A4D;   /* ATL · coral vivo */
  --form:#34D399;      /* TSB · esmeralda */
  --form-neg:#F2555F;  /* TSB negativo / riesgo · rojo vivo */
  --warn:#D9A441;      /* aviso · ámbar (4º color semántico; era hex suelto ×16 — lote tokens 2026-07-09) */
  /* Escala tipográfica de 8 pasos (lote premium 4): anclada a los valores DOMINANTES ya en uso
     (tokenizar ≠ cambiar tamaños; consolidar los vecinos 11.5/12/13/14 se hace pantalla a pantalla). */
  --fs-2xs:10px; --fs-xs:11px; --fs-sm:12.5px; --fs-base:13.5px;
  --fs-md:15px; --fs-lg:18px; --fs-xl:22px; --fs-display:26px;
  /* Escala de radios de 6 pasos (ídem: valores exactos ya dominantes). */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --radius:14px;
  --radius-sm:9px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
  /* Lote premium 4: dígitos TABULARES en toda la app — las columnas de métricas quedan en
     retícula (el detalle WKO5). Inter/SF lo soportan; en prosa el ensanche es imperceptible. */
  font-variant-numeric:tabular-nums;
}
/* Números en retícula: mono + tabular para valores de datos (curva, KPIs, leaderboards). */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Accesibilidad: anillo de foco visible SOLO al navegar con teclado (no ensucia el uso con ratón). */
:focus-visible{outline:2px solid var(--watt);outline-offset:2px;border-radius:var(--r-xs)}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid var(--watt);outline-offset:1px}
/* FocusOnNavigate (Routes.razor) enfoca el h1 al cambiar de página — sin esto, el navegador le
   pinta su recuadro azul por defecto. El anillo amarillo de teclado (:focus-visible) sigue vivo. */
:focus:not(:focus-visible){outline:none}

/* ============ LOGIN ============ */
.auth-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;position:relative;overflow:hidden;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(255,206,0,.08), transparent 60%),
    radial-gradient(700px 600px at 10% 110%, rgba(44,184,234,.07), transparent 55%),
    var(--bg);
}
.streaks{position:absolute;inset:0;pointer-events:none;opacity:.5}
.streak{position:absolute;height:1px;width:40%;background:linear-gradient(90deg,transparent,var(--watt),transparent);
  animation:dash 9s linear infinite;opacity:.18}
.streak:nth-child(1){top:22%;left:-40%;animation-delay:0s}
.streak:nth-child(2){top:54%;left:-40%;animation-delay:3s;background:linear-gradient(90deg,transparent,var(--fitness),transparent)}
.streak:nth-child(3){top:78%;left:-40%;animation-delay:6s}
@keyframes dash{to{left:140%}}

.auth-card{
  width:100%;max-width:420px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xl);padding:40px 36px;
  position:relative;z-index:2;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  animation:rise .6s cubic-bezier(.16,1,.3,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.brand{display:flex;align-items:center;gap:11px;margin-bottom:30px}
.logo-mark{
  width:42px;height:42px;flex-shrink:0;
  display:grid;place-items:center;
}
.logo-mark svg{width:100%;height:100%;display:block}
.brand-text{display:flex;flex-direction:column;justify-content:center}
.brand-name{font-size:20px;font-weight:800;font-style:italic;letter-spacing:-.02em;display:inline-flex;align-items:center;line-height:1}
.brand-name .lo{color:var(--watt)}
.brand-name .gua{color:#fff}
.brand-name .klk{font-style:normal;font-weight:800;font-size:.58em;letter-spacing:.03em;background:var(--watt);color:#0A0A0A;border-radius:var(--r-pill);padding:.2em .55em;margin-left:.4em;line-height:1}
.brand-name .up{color:var(--watt)}
.brand-tag{font-size:11.5px;color:var(--text-faint);font-weight:500;margin-top:2px;font-style:normal}

.auth-h{font-size:23px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.auth-sub{font-size:14px;color:var(--text-dim);margin-bottom:26px}

.gbtn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:11px;
  background:#fff;color:#1f1f1f;border:none;border-radius:11px;
  padding:13px;font-size:14.5px;font-weight:600;cursor:pointer;
  font-family:var(--font);transition:transform .15s, box-shadow .15s;
}
.gbtn:hover{transform:translateY(-1px);box-shadow:0 10px 28px -10px rgba(255,255,255,.25)}
.gbtn svg{width:19px;height:19px}

.divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--text-faint);font-size:12px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

.field{margin-bottom:14px}
.field label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text-dim);margin-bottom:6px}
/* Los <select> dentro de un .field heredan el MISMO look premium que los <input> (adiós al estilo
   admin reutilizado): misma altura, radio, foco amarillo y una flechita propia coherente. */
.field input,.field select{
  width:100%;background:var(--surface-2);border:1px solid var(--line);
  border-radius:10px;padding:12px 13px;color:var(--text);font-size:14px;font-family:var(--font);
  transition:border-color .15s, box-shadow .15s;
}
.field select{
  -webkit-appearance:none;appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23878B95' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--watt);box-shadow:0 0 0 3px rgba(255,206,0,.13)}
.field input::placeholder{color:var(--text-faint)}
/* Grupos de la pantalla de Perfil: encabezado de sección con hairline, para separar
   «Tu cuenta» de «Tu perfil de atleta» de un vistazo. */
.prof-group{display:flex;align-items:center;gap:12px;margin:22px 2px 12px}
.prof-group:first-of-type{margin-top:4px}
.prof-group h2{font-size:var(--fs-md);font-weight:800;font-style:italic;color:var(--text);margin:0;white-space:nowrap}
.prof-group .pg-sub{font-size:var(--fs-xs);color:var(--text-faint);font-weight:500}
.prof-group::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
/* Barra de guardado pegada al fondo: el botón «Guardar» siempre a mano mientras editas. */
.prof-savebar{position:sticky;bottom:0;z-index:20;margin:18px -2px 0;padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:rgba(10,10,10,.82);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 -6px 22px rgba(0,0,0,.35)}
.prof-savebar .ps-hint{font-size:var(--fs-xs);color:var(--text-faint)}
/* Foto dentro de «Tu cuenta»: avatar + acciones en una fila que reflujen en móvil. */
.prof-photo{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.prof-photo-actions{flex:1;min-width:0}
/* Dos campos por fila en desktop; a una sola columna en pantallas estrechas. */
.prof-two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:560px){.prof-two{grid-template-columns:1fr}.prof-photo{flex-direction:column;align-items:flex-start}}

.primary-btn{
  width:100%;background:linear-gradient(135deg,var(--watt),var(--watt-dim));
  color:#0a0e14;border:none;border-radius:11px;padding:13px;
  font-size:14.5px;font-weight:700;cursor:pointer;font-family:var(--font);
  transition:transform .15s, box-shadow .15s;margin-top:6px;
}
.primary-btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px -10px rgba(255,206,0,.45)}

.auth-foot{text-align:center;margin-top:20px;font-size:13px;color:var(--text-dim)}
.auth-foot a{color:var(--watt);text-decoration:none;font-weight:600;cursor:pointer}
.auth-foot a:hover{text-decoration:underline}

.req-note{
  margin-top:16px;padding:11px 13px;background:rgba(44,184,234,.08);
  border:1px solid rgba(44,184,234,.2);border-radius:10px;
  font-size:12px;color:var(--fitness);display:flex;gap:8px;align-items:flex-start;
}
.req-note svg{width:15px;height:15px;flex-shrink:0;margin-top:1px}

/* ============ APP SHELL ============ */
.app{min-height:100vh}

.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(18,24,33,.85);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
/* Contenido del header centrado y alineado al ancho del contenido (compacto). */
.topbar-inner{
  max-width:1340px;margin:0 auto;min-height:56px;
  display:flex;align-items:center;gap:14px;padding:7px 22px;flex-wrap:wrap;
}
/* Navegación horizontal (estilo mockup) */
.topnav{display:flex;align-items:center;gap:4px;flex:1 1 auto;justify-content:center;flex-wrap:nowrap}
.topnav-link{
  padding:8px 13px;border-radius:10px;font-size:var(--fs-base);font-weight:600;
  color:var(--text-dim);cursor:pointer;transition:background .15s ease,color .15s ease;white-space:nowrap;
}
.topnav-link:hover{color:var(--text);background:rgba(255,255,255,.06)}
.topnav-link.active{background:var(--surface-2);color:var(--watt)}
.topnav-sep{width:1px;height:20px;background:var(--line);margin:0 7px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}

/* Menú desplegable de cuenta (avatar) — details/summary; cierre por clic-fuera vía app.js */
.dd{position:relative}
.dd > summary.dd-trigger{list-style:none;cursor:pointer}
.dd > summary.dd-trigger::-webkit-details-marker{display:none}
.acct-trigger{display:inline-flex;align-items:center;gap:6px}
.dd-caret{color:var(--text-dim);font-size:var(--fs-xs);line-height:1;transition:transform .18s ease}
.dd[open] .dd-caret{transform:rotate(180deg);color:var(--watt)}
.acct-trigger:hover .dd-caret{color:var(--watt)}
/* max-height + scroll interno: con el bloque de Administración el menú pasa de 5 a ~16 ítems y se
   salía de la pantalla, dejando «Salir» inalcanzable. El scroll vive en .dd-scroll y el pie
   (.dd-foot) queda FUERA de él, así la acción crítica siempre se ve. */
.dd-panel{position:absolute;right:0;top:calc(100% + 10px);min-width:236px;max-height:calc(100vh - 92px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 18px 50px -16px rgba(0,0,0,.7);padding:8px;z-index:60;animation:ddIn .14s ease}
/* min-height:0 es lo que permite al flex-item encogerse y activar el scroll; los márgenes
   negativos llevan la barra al borde del panel sin comerse el padding de los ítems. */
.dd-scroll{overflow-y:auto;overscroll-behavior:contain;min-height:0;margin:0 -8px;padding:0 8px}
.dd-foot{flex:none}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.dd-head{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.dd-name{font-weight:700;font-size:14px}
.dd-mail{font-size:12px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);font-size:var(--fs-base);color:var(--text);cursor:pointer;transition:background .12s}
.dd-item:hover{background:var(--surface-2)}
.dd-ic{width:18px;text-align:center;flex-shrink:0}
.dd-sep{height:1px;background:var(--line);margin:6px 4px}
.dd-label{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);font-weight:700;padding:6px 10px 2px}
.dd-danger{color:var(--fatigue)}
.topbar .brand{margin:0}
.topbar .logo-mark{width:44px;height:44px;border-radius:11px}
.topbar .logo-mark svg{width:100%;height:100%}
.topbar .brand-name{font-size:20px}
.topbar .brand-tag{display:none}
.sync-pill{
  margin-left:auto;display:flex;align-items:center;gap:7px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:6px 13px;font-size:12px;color:var(--text-dim);cursor:pointer;transition:border-color .15s;
}
.sync-pill:hover{border-color:var(--watt)}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--form);box-shadow:0 0 8px var(--form);animation:pulse 2.4s infinite}
.sync-dot.off{background:var(--text-faint);box-shadow:none;animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.avatar{
  width:32px;height:32px;border-radius:50%;cursor:pointer;flex:none;overflow:hidden;
  background:linear-gradient(135deg,var(--fitness),var(--fatigue));
  display:grid;place-items:center;font-weight:700;font-size:var(--fs-sm);color:#fff;
  border:2px solid var(--line);
}
.avatar img{width:100%;height:100%;object-fit:cover}
/* Tarjeta de foto de perfil (página Perfil). */
.avatar-card{display:flex;align-items:center;gap:18px;grid-column:1/-1}
.avatar-lg{width:84px;height:84px;border-radius:50%;flex:none;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--fitness),var(--fatigue));color:#fff;font-weight:800;font-size:30px;border:2px solid var(--line)}
.avatar-lg img{width:100%;height:100%;object-fit:cover}
.avatar-actions{flex:1;min-width:0}
/* Reloj y datos de usuario del header (coherentes con la marca). */
.topclock{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);white-space:nowrap}
.clk-date{font-size:var(--fs-xs);color:var(--text-dim);text-transform:capitalize;font-weight:600}
.clk-dot{color:var(--text-faint);font-size:var(--fs-xs)}
.clk-time{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--text);letter-spacing:.04em}
.topbar-sep{width:1px;height:24px;background:var(--line);flex:none}
/* Barra superior en móvil: el reloj se oculta y la nav baja a su propia fila deslizable
   (no se amontona con la fecha/hora). La marca y el avatar quedan en la fila superior. */
@media (max-width: 760px){
  .topbar-inner{padding:7px 14px;gap:8px;row-gap:6px}
  .topclock,.topbar-sep{display:none}
  .topnav{
    order:3;flex:1 0 100%;justify-content:flex-start;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;gap:2px;padding-bottom:2px;
  }
  .topnav::-webkit-scrollbar{display:none}
  .topbar .logo-mark{width:38px;height:38px}
  .topbar .brand-name{font-size:var(--fs-lg)}
}
.userbox{line-height:1.2;min-width:0}
.userbox-name{font-weight:700;font-size:13px;color:var(--text);white-space:nowrap}
.userbox-mail{font-size:var(--fs-xs);color:var(--text-faint);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text-dim);padding:6px 12px}
.btn-ghost:hover{color:var(--text);border-color:var(--text-dim)}

.layout{display:block;max-width:1340px;margin:0 auto}
.sidebar{
  width:222px;flex-shrink:0;padding:22px 14px;position:sticky;top:60px;
  height:calc(100vh - 60px);
}
.nav-group-label{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-faint);padding:0 12px;margin:18px 0 8px}
.nav-group-label:first-child{margin-top:0}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  color:var(--text-dim);font-size:14px;font-weight:500;cursor:pointer;
  transition:background .15s, color .15s;margin-bottom:2px;
}
.nav-item svg{width:19px;height:19px;flex-shrink:0}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--surface-2);color:var(--watt)}
.nav-item.active svg{color:var(--watt)}
.nav-badge{margin-left:auto;background:var(--watt);color:#0a0e14;font-size:var(--fs-2xs);font-weight:800;
  padding:2px 7px;border-radius:10px}

.main{min-width:0;padding:26px 30px 60px}
/* OJO: la animación de entrada de .page-view debe ser SOLO de opacidad. Un keyframe con `transform`
   (aunque acabe en `transform:none`) hace que Chrome trate a .page-view como bloque contenedor de los
   elementos `position:fixed` descendientes → los modales/overlays (.imp-overlay) dejaban de anclarse a
   la ventana y se posicionaban dentro de la página (apareciendo lejos del disparador). Sin transform, no. */
.page-view{animation:fade .35s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.page-title{font-size:var(--fs-display);font-weight:800;letter-spacing:-.02em}
.page-sub{font-size:14px;color:var(--text-dim);margin-top:3px}

.btn{
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:9px 15px;font-size:var(--fs-base);font-weight:600;cursor:pointer;
  font-family:var(--font);display:inline-flex;align-items:center;gap:7px;transition:all .15s;
}
.btn:hover{border-color:var(--watt);color:var(--watt)}
.btn svg{width:16px;height:16px}
.btn-watt{background:linear-gradient(135deg,var(--watt),var(--watt-dim));color:#0a0e14;border:none}
.btn-watt:hover{transform:translateY(-1px);box-shadow:0 10px 26px -10px rgba(255,206,0,.45);color:#0a0e14}

/* KPI strip */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.kpi.f::after{background:var(--fitness)}
.kpi.a::after{background:var(--fatigue)}
.kpi.t::after{background:var(--form)}
.kpi.w::after{background:var(--watt)}
.kpi-label{font-size:11.5px;color:var(--text-dim);font-weight:600;display:flex;align-items:center;gap:6px;margin-bottom:8px}
.kpi-val{font-size:30px;font-weight:800;letter-spacing:-.03em;font-family:var(--mono)}
.kpi-val small{font-size:14px;color:var(--text-faint);font-weight:600}
.kpi-meta{font-size:11.5px;margin-top:5px;font-weight:600}
.up-trend{color:var(--form)}.down-trend{color:var(--form-neg)}
.kpi-hint{font-size:10.5px;color:var(--text-faint);margin-top:2px}
.kpi-vo2{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.kpi-vo2-label{font-size:var(--fs-xs);color:var(--text-dim);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.kpi-vo2-val{font-size:17px;font-weight:800;font-family:var(--mono);letter-spacing:-.02em}
.kpi-vo2-val small{font-size:var(--fs-2xs);color:var(--text-faint);font-weight:600}
.kpi-vo2-trend{font-size:11.5px;font-weight:700;margin-left:auto}

/* Badge de forma / cumplimiento en cabeceras de tarjeta */
.form-badge{font-size:var(--fs-xs);font-weight:700;padding:3px 9px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line)}
.form-badge.up-trend{color:var(--form)}
.form-badge.down-trend{color:var(--form-neg)}

/* Fila de actividad clicable */
.act-row-click{cursor:pointer;border-radius:10px;transition:background .12s}
.act-row-click:hover{background:var(--surface-2)}

/* Franja de cumplimiento de la semana (tarjeta del coach) */
.compliance-strip{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;margin-bottom:12px}
.compliance-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-dim);font-weight:600}
.compliance-row b{font-size:var(--fs-md);font-family:var(--mono)}
.compliance-bar{height:6px;border-radius:var(--r-xs);background:rgba(255,255,255,.07);margin:7px 0 5px;overflow:hidden}
.compliance-bar span{display:block;height:100%;border-radius:var(--r-xs)}
.compliance-meta{font-size:var(--fs-xs);color:var(--text-faint);font-family:var(--mono)}

/* Volumen semanal: mini-barras por día (real vs planificado) */
.vol-week{display:flex;align-items:flex-end;gap:8px;height:120px;padding:8px 4px 0}
.vol-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.vol-bars{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px;border-radius:6px;padding:2px;min-height:0}
.vol-today{background:rgba(255,206,0,.06);border-radius:var(--r-sm)}
.vol-plan{width:38%;min-height:2px;background:rgba(255,206,0,.45);border-radius:3px 3px 0 0}
.vol-actual{width:38%;min-height:2px;background:#22c55e;border-radius:3px 3px 0 0}
.vol-lbl{font-size:10.5px;color:var(--text-faint);font-weight:700}
.vol-totals{display:flex;gap:18px;justify-content:center;margin-top:12px;border-top:1px solid var(--line);padding-top:10px;font-size:var(--fs-sm);color:var(--text-dim)}
.vol-totals b{color:var(--text);font-family:var(--mono);margin:0 2px}
.vol-dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* comparación plan vs ejecutado por intervalos */
.cmp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.cmp-overalls{display:flex;gap:10px;flex:none}
.cmp-overall{text-align:center;flex:none;background:rgba(255,206,0,.06);border:1px solid rgba(255,206,0,.22);
  border-radius:14px;padding:8px 14px;min-width:90px}
.cmp-overall-eff{background:var(--surface-2);border-color:var(--line)}
.cmp-overall-pct{font-size:28px;font-weight:800;font-family:var(--mono);line-height:1;letter-spacing:-.02em;color:var(--watt)}
.cmp-overall-eff .cmp-overall-pct{color:var(--text)}
.cmp-overall-lbl{font-size:9.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-top:4px}
.cmp-profile{display:flex;align-items:flex-end;gap:3px;height:92px;padding:10px;
  background:linear-gradient(180deg,#0d141d,#0a0f16);border:1px solid var(--line);border-radius:14px;margin-bottom:16px}
.cmp-bar{border-radius:5px 5px 2px 2px;min-width:3px;box-sizing:border-box;position:relative;transition:filter .12s}
.cmp-bar:hover{filter:brightness(1.18)}

/* interruptores (switches) modernos estilo iOS */
.cmp-toggles{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:0 0 14px;padding:10px 14px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md)}
.cmp-toggles-lbl{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim)}
.cmp-sw{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:600;
  color:var(--text-dim);user-select:none;transition:color .15s}
.cmp-sw:hover{color:var(--text)}
.cmp-sw.on{color:var(--text)}
.cmp-sw .tr{width:36px;height:20px;border-radius:var(--r-pill);background:var(--surface-3);border:1px solid var(--line);
  position:relative;flex:none;transition:background .2s,border-color .2s}
.cmp-sw .kn{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#8a97a8;
  transition:transform .2s,background .2s;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.cmp-sw.on .tr{background:var(--watt);border-color:var(--watt)}
.cmp-sw.on .kn{transform:translateX(16px);background:#0a0e14}
.cmp-sw-sep{margin-left:4px;padding-left:14px;border-left:1px solid var(--line)}

/* densidad compacta de la tabla */
.cmp-compact .cmp-row{padding:6px 14px;gap:6px 12px}
.cmp-compact .cmp-stack{gap:1px;font-size:11.5px}
.cmp-compact .cmp-dot{height:14px}
.cmp-compact .cmp-meter{margin-top:3px}

.cmp-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.cmp-table{min-width:520px;font-size:13px}
.cmp-row{display:grid;grid-template-columns:.5fr 1.55fr 1.3fr 1.05fr .9fr;gap:10px 16px;align-items:center;
  padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.05)}
.cmp-row:last-child{border-bottom:none}
.cmp-row:not(.cmp-h):hover{background:rgba(255,255,255,.025)}
.cmp-h{font-size:10.5px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.cmp-row .r{text-align:right}
.cmp-row .mono{font-family:var(--mono)}
.cmp-dur2{font-family:var(--mono);color:var(--text-dim);font-weight:600}
.cmp-tipo{display:flex;align-items:flex-start;gap:9px;min-width:0;padding-right:10px}
.cmp-dot{width:9px;height:14px;border-radius:3px;flex:none;margin-top:2px}
/* La etiqueta del tipo puede ser larga ("Ritmo Medio 1 (Sweet Spot ligero)"): envuelve en varias líneas
   en vez de desbordar sobre la columna Objetivo. */
.cmp-lbl{font-weight:700;white-space:normal;overflow-wrap:anywhere;line-height:1.25}
/* celdas Objetivo/Real: apilan una línea por métrica activa (potencia, cadencia, FC, TSS) */
.cmp-stack{display:flex;flex-direction:column;gap:3px;font-family:var(--mono);font-size:var(--fs-sm);color:var(--text-dim)}
.cmp-stack > div{white-space:nowrap}
.cmp-real{color:var(--text);font-weight:600}
.cmp-pctwrap{display:flex;align-items:center;justify-content:flex-end}
.cmp-pctwrap .mono{font-size:var(--fs-md);font-weight:700}
.cmp-meter{display:block;width:60px;height:7px;border-radius:var(--r-xs);background:rgba(255,255,255,.08);overflow:hidden;margin:5px 0 0 auto}
.cmp-meter span{display:block;height:100%;border-radius:var(--r-xs);transition:width .3s}
.cmp-status{font-size:var(--fs-2xs);font-weight:700;margin-top:4px;text-align:right;text-transform:uppercase;letter-spacing:.02em}

/* subcabeceras de categorías de conexiones (activas / disponibles) */
.conx-subhead{font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);
  margin:6px 0 10px;display:flex;align-items:center;gap:10px}
.conx-subhead::after{content:"";flex:1;height:1px;background:var(--line)}

/* Profundidad premium: hairline superior (borde de luz) + sombra susurro — no altera layout */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 1px 2px rgba(0,0,0,.28)}

/* ═══════════ Sistema de movimiento — «vida» a nivel World Tour ═══════════
   Todo el motion vive detrás de prefers-reduced-motion: no-preference → un
   usuario que pide menos animación ve la interfaz instantánea, sin sacrificios. */
@media (prefers-reduced-motion: no-preference){
  @keyframes lgk-rise{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
  @keyframes lgk-fade{from{opacity:0}to{opacity:1}}
  @keyframes lgk-pop{0%{opacity:0;transform:scale(.9)}60%{transform:scale(1.02)}100%{opacity:1;transform:none}}
  /* Entrada de paneles: se elevan al aparecer (curva de salida suave, casi física) */
  .card{animation:lgk-rise .52s cubic-bezier(.16,.84,.44,1) both}
  /* Feed: cascada escalonada — las rodadas «entran» una tras otra */
  .cm-card{animation:lgk-rise .46s cubic-bezier(.16,.84,.44,1) both}
  .cm-card:nth-of-type(1){animation-delay:.03s}
  .cm-card:nth-of-type(2){animation-delay:.07s}
  .cm-card:nth-of-type(3){animation-delay:.11s}
  .cm-card:nth-of-type(4){animation-delay:.15s}
  .cm-card:nth-of-type(5){animation-delay:.19s}
  .cm-card:nth-of-type(6){animation-delay:.23s}
  .cm-card:nth-of-type(n+7){animation-delay:.26s}
  /* Detalle expandido del feed: revelado suave (solo opacidad → seguro con Leaflet) */
  .cm-detail{animation:lgk-fade .3s ease both}
  /* Panel Personalizar: aparece con vida */
  .pers-panel{animation:lgk-rise .34s cubic-bezier(.16,.84,.44,1) both}
  /* Números vivos: el count-up añade la clase mientras cuenta (ver lgkCountUp en app.js) */
  .lgk-counting{color:var(--watt)}
}

/* ═══════════ Skeletons — la app «carga» antes de cargar (lote premium 1) ═══════════
   Silueta shimmer del contenido en vez del texto «Cargando…»: cero salto de layout y
   percepción de velocidad. Base estática siempre; el brillo solo con motion permitido.
   Genérico: <LoadingSkeleton /> · siluetas específicas: componer .skel a mano. */
.skel{position:relative;overflow:hidden;background:var(--surface-2);border-radius:var(--r-sm)}
.skel-row{height:13px;margin:9px 0}
.skel-num{height:30px;width:88px}
.skel-chart{height:190px;border-radius:var(--r-md)}
.skel-strip{height:54px;border-radius:14px}
.skel-circle{border-radius:50%}
.skel-host{display:grid;gap:12px}
@media (prefers-reduced-motion: no-preference){
  .skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:lgk-shim 1.4s infinite}
  @keyframes lgk-shim{to{transform:translateX(100%)}}
}

/* ═══════════ PMC por CAPAS (lote premium 6b): YoY/anotaciones viven SIEMPRE en el SVG;
   los chips solo conmutan estas clases → togglear no reconstruye ni retransmite nada. ═══════════ */
#pmc-svg .pmc-l-yoy,#pmc-svg .pmc-l-ann{display:none}
#pmc-svg.yoy-on .pmc-l-yoy{display:inline}
#pmc-svg.ann-on .pmc-l-ann{display:inline}

/* ═══════════ MODO ANÁLISIS ≥1280px (lote premium 7, mockup del sistema aprobado) ═══════════
   Evolución compone tablero en pantallas de analista: el PMC con su PANEL DE LECTURA al lado
   (leyenda y nota YoY debajo, en la misma columna). Bajo 1280px NO cambia nada (§6: el mockup
   canónico manda) — es la MISMA tarjeta, solo re-colocada por grid-areas; el JS ni se entera. */
@media (min-width:1280px){
  .pmc-card{display:grid;column-gap:22px;grid-auto-rows:min-content;
    grid-template-columns:minmax(0,2.5fr) minmax(240px,1fr);
    grid-template-areas:"h h" "hint hint" "t t" "chart read" "chart legend" "chart note" "chart fill" "fc fc"}
  .pmc-card>h3{grid-area:h}
  .pmc-card>.pmc-hint{grid-area:hint}
  .pmc-card>.pmc-tools{grid-area:t}
  .pmc-card>#pmc-svg{grid-area:chart;align-self:start}
  .pmc-card>.pmc-read{grid-area:read;flex-direction:column;align-items:stretch;gap:8px;
    background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;margin:0}
  .pmc-card>.pmc-read .pr-item{display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:1px solid rgba(255,255,255,.05);padding:6px 2px;font-size:var(--fs-sm)}
  .pmc-card>.pmc-read .pr-item b{font-size:var(--fs-lg)}
  .pmc-card>.pmc-read .pr-tag{align-self:flex-start}
  .pmc-card>.pmc-read .pr-date{margin-left:0}
  .pmc-card>.legend{grid-area:legend;flex-direction:column;align-items:flex-start;gap:7px;margin-top:12px}
  .pmc-card>.pmc-yoy-note{grid-area:note}
  .pmc-card>.forecast-panel{grid-area:fc}
}

/* ═══════════ Tacto — feedback de PRESIÓN (en móvil no existe hover) ═══════════
   Todo botón/tarjeta interactiva comprime al pulsar y regresa suave. La variante
   :active:hover gana a los transform de hover por especificidad (sin !important). */
@media (prefers-reduced-motion: no-preference){
  button,summary,.pressable{transition:transform .15s ease}
  button:active,button:active:hover,summary:active,.pressable:active,.pressable:active:hover{
    transform:scale(.985);transition-duration:.06s}
}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-title{font-size:var(--fs-md);font-weight:700;display:flex;align-items:center;gap:9px}

/* Secciones colapsables del perfil (details/summary nativo, autoajustable) */
summary.sec-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:var(--fs-md);font-weight:700;color:var(--text)}
summary.sec-sum::-webkit-details-marker{display:none}
summary.sec-sum::after{content:"▾";color:var(--text-dim);font-size:13px;margin-left:4px;transition:transform .2s ease}
details.sec-acc[open] > summary.sec-sum::after{transform:rotate(180deg)}
details.sec-acc[open] > summary.sec-sum{margin-bottom:14px}
.sec-status{font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:3px 9px;border-radius:var(--r-md);margin-left:auto;white-space:nowrap}
.sec-status.ok{background:rgba(52,211,153,.15);color:var(--form)}
.sec-status.pend{background:rgba(255,206,0,.15);color:var(--watt)}
.card-title .ic{width:18px;height:18px;color:var(--watt)}
.seg{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px}
.seg button{background:none;border:none;color:var(--text-dim);font-size:12px;font-weight:600;
  padding:5px 11px;border-radius:6px;cursor:pointer;font-family:var(--font);transition:all .15s}
.seg button.on{background:var(--surface-3);color:var(--text)}

/* RITMO VERTICAL DE LAS PANTALLAS. Todo lo que va suelto en el flujo de una página —una tarjeta o una
   fila de tarjetas— lleva su propio margen SIMÉTRICO. Sin el de arriba, dos bloques seguidos quedaban
   PEGADOS: pasó con la matriz anual contra el evento objetivo y con el historial de FTP contra el
   volumen semanal (reportes del dueño y de Gabriel, 27-jul). Como .page-view es un bloque normal, los
   márgenes de hermanos COLAPSAN: añadir el de arriba no duplica los huecos que ya estaban bien, solo
   rellena los que valían cero. Las tarjetas que viven DENTRO de una rejilla no se ven afectadas (ahí
   el espaciado lo da el gap), porque el selector es de hijo directo. */
.page-view > .card{margin:16px 0}
.two-col{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;margin:18px 0}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--text-dim)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:11px;height:3px;border-radius:2px;display:inline-block}

/* AI coach card — the signature feature */
.coach-card{
  background:
    radial-gradient(500px 200px at 100% 0%, rgba(255,206,0,.1), transparent 60%),
    var(--surface);
  border:1px solid rgba(255,206,0,.3);border-radius:var(--radius);padding:22px;position:relative;overflow:hidden;
}
.coach-head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.coach-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--watt),var(--watt-dim));
  display:grid;place-items:center;color:#0a0e14;flex-shrink:0}
.coach-icon svg{width:21px;height:21px}
.coach-title{font-size:var(--fs-md);font-weight:800}
.coach-by{font-size:11.5px;color:var(--text-dim)}
.workout-box{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:16px;margin:14px 0}
.workout-name{font-size:16px;font-weight:800;color:var(--watt);margin-bottom:4px}
.workout-meta{display:flex;gap:14px;font-size:12px;color:var(--text-dim);margin-bottom:13px;flex-wrap:wrap}
.workout-meta b{color:var(--text);font-family:var(--mono)}
.intervals{display:flex;height:46px;border-radius:7px;overflow:hidden;gap:1px}
.iv{display:grid;place-items:center;font-size:var(--fs-2xs);font-weight:700;color:rgba(255,255,255,.9)}
.coach-reason{font-size:13px;color:var(--text-dim);line-height:1.55;margin-bottom:14px}
.coach-reason b{color:var(--text)}
.coach-actions{display:flex;gap:10px;flex-wrap:wrap}

/* activity list */
.act-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:opacity .15s}
.act-row:last-child{border-bottom:none}
.act-row:hover{opacity:.8}
.act-ic{width:40px;height:40px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;flex-shrink:0;color:var(--watt)}
.act-ic svg{width:20px;height:20px}
.act-name{font-size:14px;font-weight:600}
.act-type{display:inline-block;margin-left:7px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--text-dim);background:var(--surface-3);
  border-radius:6px;padding:2px 7px;vertical-align:middle}
/* Insignia del conector de procedencia (coloreada por marca, nombre en texto) */
.src-badge{display:inline-block;margin-left:6px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.02em;
  border-radius:10px;padding:2px 8px;vertical-align:middle;border:1px solid transparent;white-space:nowrap}
.src-intervals{color:#7fc4ec;background:rgba(45,122,168,.16);border-color:rgba(45,122,168,.45)}
.src-strava{color:#ff8350;background:rgba(252,76,2,.15);border-color:rgba(252,76,2,.45)}
.src-garmin{color:#4db8ee;background:rgba(0,124,195,.16);border-color:rgba(0,124,195,.45)}
.src-file{color:var(--text-dim);background:var(--surface-3);border-color:var(--line)}
.act-date{font-size:12px;color:var(--text-faint)}
/* Fallback de exportación: guía «cómo llevar el plan al dispositivo» + botones de descarga */
.exp-help{margin-top:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);overflow:hidden}
.exp-help>summary{cursor:pointer;list-style:none;padding:10px 14px;font-size:13px;font-weight:700;color:var(--watt)}
.exp-help>summary::-webkit-details-marker{display:none}
.exp-help>summary::before{content:"▸";margin-right:8px;display:inline-block;transition:transform .2s}
.exp-help[open]>summary::before{transform:rotate(90deg)}
.exp-help-body{padding:2px 16px 14px;font-size:13px;color:var(--text-dim)}
.exp-help-body p{margin:8px 0}
.exp-help-body b{color:var(--text)}
.exp-help-body ul{margin:8px 0 0;padding-left:18px}
.exp-help-body li{margin:5px 0}
.exp-help-body a{color:var(--watt);font-weight:600}
.dl-group{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.btn-dl{padding:4px 9px;font-size:var(--fs-xs);font-weight:700;font-family:var(--mono)}
.act-stats{margin-left:auto;display:flex;gap:22px;text-align:right}
.act-stat .v{font-size:14px;font-weight:700;font-family:var(--mono)}
.act-stat .l{font-size:10.5px;color:var(--text-faint)}

/* detail view */
.detail-hero{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-bottom:18px}
.map-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-height:280px;position:relative}
/* Leaflet gestiona su propio SVG/canvas internamente; no forzar tamaño a sus capas vectoriales. */
.map-card .leaflet-container{height:100%;width:100%}
.detail-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dstat{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:14px}
.dstat .l{font-size:var(--fs-xs);color:var(--text-dim);font-weight:600;margin-bottom:5px}
.dstat .v{font-size:var(--fs-xl);font-weight:800;font-family:var(--mono);letter-spacing:-.02em}
.dstat .v small{font-size:12px;color:var(--text-faint)}

.zone-bars{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.zone-row{display:flex;align-items:center;gap:11px}
.zone-tag{font-size:var(--fs-xs);font-weight:700;width:54px;color:var(--text-dim)}
.zone-track{flex:1;height:18px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.zone-fill{height:100%;border-radius:5px}
.zone-pct{font-size:11.5px;font-family:var(--mono);width:42px;text-align:right;color:var(--text-dim)}

/* profile */
/* Perfil = página de ajustes: una sola columna enfocada y centrada (patrón settings premium),
   no un mosaico de 3 columnas que dejaba las tarjetas desalineadas al desplegar una. */
.prof-wrap{max-width:760px;margin:0 auto}
.prof-grid{display:flex;flex-direction:column;gap:14px}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.setting-row:last-child{border:none}
.setting-row .k{font-size:var(--fs-base);font-weight:500}
.setting-row .vv{font-size:14px;font-weight:700;font-family:var(--mono);color:var(--watt)}
.goal-card{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:15px;margin-bottom:11px}
.goal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.goal-name{font-size:14px;font-weight:700}
.goal-tag{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:var(--r-xl);background:rgba(255,206,0,.15);color:var(--watt)}
.goal-bar{height:6px;background:var(--surface-3);border-radius:var(--r-xs);overflow:hidden;margin-bottom:6px}
.goal-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--watt),var(--watt-dim));border-radius:var(--r-xs)}
.goal-meta{font-size:11.5px;color:var(--text-dim)}

/* integrations */
.integ{display:flex;align-items:center;gap:14px;padding:15px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:12px}
.integ-logo{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:var(--fs-md);flex-shrink:0}
.integ-name{font-size:14px;font-weight:700}
.integ-desc{font-size:12px;color:var(--text-dim)}
.integ-status{margin-left:auto;font-size:12px;font-weight:700;display:flex;align-items:center;gap:7px}
.badge-on{color:var(--form)}.badge-off{color:var(--text-faint)}
.badge-soon{color:var(--fitness)}

.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(100px);
  background:var(--surface-3);border:1px solid var(--watt);color:var(--text);
  padding:13px 20px;border-radius:var(--r-md);font-size:var(--fs-base);font-weight:600;z-index:200;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.16,1,.3,1);
  display:flex;align-items:center;gap:10px}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast svg{width:18px;height:18px;color:var(--watt)}

.mock-banner{background:var(--surface-2);border-bottom:1px solid var(--line);text-align:center;
  font-size:11.5px;color:var(--text-faint);padding:6px;letter-spacing:.03em}

/* empty states */
.empty-state{text-align:center;padding:48px 24px}
.empty-mark{margin:0 auto 16px;width:54px;height:54px;border-radius:14px}
.empty-mark svg{width:30px;height:30px}
.empty-title{font-size:var(--fs-lg);font-weight:800;margin-bottom:6px}
.big-stat{padding:8px 2px 4px}
.big-stat-val{font-size:38px;font-weight:800;font-family:var(--mono);letter-spacing:-.03em;color:var(--watt)}
.big-stat-val small{font-size:var(--fs-md);color:var(--text-faint);font-weight:600}

/* admin: solicitudes de acceso */
.adm-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.adm-row:last-child{border-bottom:none}
.adm-main{flex:1;min-width:200px}
.adm-name{font-size:14px;font-weight:700}
.adm-email{font-size:var(--fs-sm);color:var(--text-dim)}
.adm-msg{font-size:12px;color:var(--text-faint);margin-top:3px}
.adm-actions{display:flex;gap:8px}
.chip{font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:var(--r-xl);text-transform:uppercase;letter-spacing:.04em}
.chip.pending{background:rgba(255,206,0,.15);color:var(--watt)}
.chip.approved{background:rgba(52,211,153,.15);color:var(--form)}
.chip.rejected{background:rgba(255,122,77,.15);color:var(--fatigue)}
.chip.role-admin{background:rgba(44,184,234,.15);color:var(--fitness)}
.chip.role-rider{background:var(--surface-3);color:var(--text-dim)}
.chip.inactive{background:rgba(255,122,77,.15);color:var(--fatigue)}
.adm-input,.adm-select{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--text);padding:7px 10px;font-size:13px;font-family:var(--font)}
.adm-input{width:150px}
.adm-sub{font-size:12px;color:var(--text-faint);margin-top:4px}

/* acordeón de actividades por año/mes */
.acc-row{display:flex;align-items:center;gap:12px;cursor:pointer;border-radius:10px;padding:12px;transition:background .15s}
.acc-row:hover{background:var(--surface-2)}
.acc-year{margin-top:4px}
.acc-year + .acc-month{margin-top:0}
.acc-month{margin-left:16px}
.acc-title{font-weight:700;flex-shrink:0}
.acc-year .acc-title{font-size:17px;font-weight:800;letter-spacing:-.01em}
.acc-month .acc-title{font-size:14px;text-transform:capitalize;color:var(--text-dim)}
.acc-row:hover .acc-month .acc-title,.acc-month:hover .acc-title{color:var(--text)}
.acc-stats{margin-left:auto;display:flex;gap:18px;font-size:11.5px;color:var(--text-faint);text-align:right}
.acc-stats .s{display:flex;flex-direction:column;line-height:1.2}
.acc-stats .s b{color:var(--text);font-family:var(--mono);font-weight:700;font-size:var(--fs-base)}
.acc-year .acc-stats .s b{color:var(--watt)}
.acc-chev{width:13px;height:13px;flex:0 0 13px;color:var(--text-faint);transition:transform .2s}
.acc-chev.open{transform:rotate(90deg)}
.acc-acts{margin-left:34px;border-left:1px solid var(--line);padding-left:10px;margin-bottom:6px}
.act-del{background:none;border:none;color:var(--text-faint);cursor:pointer;padding:6px;border-radius:var(--r-sm);display:inline-flex;margin-left:14px}
.act-del:hover{color:var(--fatigue);background:var(--surface-2)}
.act-del svg{width:16px;height:16px}
/* importación: progreso y resumen */
.progress{height:9px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--watt),var(--watt-dim));border-radius:6px;transition:width .25s ease}
.import-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:16px;animation:fade .3s ease both}
.import-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line)}
.import-row:last-child{border-bottom:none}
@media (max-width:680px){ .acc-stats{gap:10px} .acc-stats .s b{font-size:12px} }

/* Blazor error UI */
#blazor-error-ui{background:#231a1a;border-top:1px solid var(--fatigue);bottom:0;display:none;
  left:0;padding:.8rem 1.2rem;position:fixed;width:100%;z-index:1000;color:var(--text);font-size:13px}
#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.8rem;top:.6rem}

@media (max-width:980px){
  .sidebar{display:none}.kpi-grid{grid-template-columns:repeat(2,1fr)}
  .two-col,.detail-hero{grid-template-columns:1fr}.prof-grid{grid-template-columns:1fr}
  .main{padding:20px 16px 50px}
}

/* ============ EVOLUCIÓN v2 — métricas avanzadas ============ */
/* Evento objetivo */
.evt-banner{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(255,206,0,.12),rgba(255,122,77,.05)),var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;margin-bottom:18px}
.evt-left{flex:1 1 220px;min-width:200px}
.evt-tag{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--watt);font-weight:700}
.evt-name{font-size:20px;font-weight:800;margin:3px 0}
.evt-meta{font-size:var(--fs-sm);color:var(--text-dim)}
.evt-cd{display:flex;gap:10px}
.evt-cd div{text-align:center;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:11px;padding:10px 14px;min-width:62px}
.evt-cd b{display:block;font-family:var(--mono);font-size:var(--fs-xl);font-weight:800}
.evt-cd b.evt-phase{font-size:13px}
.evt-cd span{font-size:var(--fs-2xs);color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}
.evt-prog{flex:0 0 auto;min-width:170px}
.evt-prog-top{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--text-dim);margin-bottom:6px}
.evt-prog-top b{color:var(--watt);font-family:var(--mono)}
.evt-prog-bar{height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.evt-prog-bar span{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--watt),var(--form-neg))}

/* Hero (saludo) + card de evento (fila superior estilo mockup) */
/* La 2ª tarjeta de la fila-hero se retiró (Lote D): la que queda va a ancho completo, sin hueco huérfano. */
.hero-row{display:grid;grid-template-columns:1fr;gap:16px;margin:16px 0;align-items:start}
.hero-card{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(40,224,240,.10),rgba(155,140,255,.05)),var(--surface)}
.hero-card:after{content:"";position:absolute;right:-50px;top:-50px;width:230px;height:230px;background:radial-gradient(circle,rgba(40,224,240,.18),transparent 60%);pointer-events:none}
.hero-kicker{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fitness);font-weight:700}
.hero-row .card{padding:14px 18px}
.hero-h1{font-size:21px;font-weight:900;line-height:1.12;margin:5px 0;letter-spacing:-.02em}
.hero-p{color:var(--text-dim);font-size:13px;max-width:62ch}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hchip{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:30px;font-size:var(--fs-sm);font-weight:600;background:rgba(255,255,255,.05);border:1px solid var(--line);transition:border-color .15s ease,transform .15s ease}
.hchip:hover{border-color:#3a4760;transform:translateY(-1px)}
.hchip i{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.hero-cta{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:8px 15px;border-radius:11px;font-weight:700;font-size:var(--fs-base);background:linear-gradient(120deg,var(--watt),var(--watt-dim));color:#1a1400;cursor:pointer;width:max-content;transition:filter .15s ease,transform .15s ease}
.hero-cta:hover{filter:brightness(1.06);transform:translateY(-1px)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.hero-actions .hero-cta{margin-top:0}
.hero-sync{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:11px;font-weight:700;font-size:var(--fs-base);background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text);cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.hero-sync:hover:not(:disabled){border-color:var(--fitness);background:rgba(44,184,234,.10);transform:translateY(-1px)}
.hero-sync:disabled{opacity:.7;cursor:progress}
.spin{display:inline-block;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.evt-card{display:flex;flex-direction:column;gap:11px;background:linear-gradient(150deg,rgba(255,206,0,.10),rgba(255,122,77,.05)),var(--surface)}
/* Otros objetivos dentro de la card de evento */
.evt-others{margin-top:4px;border-top:1px solid var(--line);padding-top:11px;display:flex;flex-direction:column;gap:11px}
.evt-others-h{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);font-weight:700}
.evt-other{display:flex;flex-direction:column;gap:5px}
.evt-other-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.evt-other-name{font-size:13px;font-weight:700}
.evt-other-tag{font-size:var(--fs-xs);font-weight:700;font-family:var(--mono);white-space:nowrap}
.evt-other-desc{font-size:11.5px;color:var(--text-dim);line-height:1.4}
.evt-other-bar{height:6px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.evt-other-bar span{display:block;height:100%;border-radius:5px;transition:width .8s cubic-bezier(.2,.7,.2,1)}

/* ===== Score Real vs Plan de hoy (#5) ===== */
.score-card{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center;margin-bottom:18px}
.score-overall{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0;border-right:1px solid var(--line)}
.score-num{font-size:48px;font-weight:900;line-height:1;font-family:var(--mono);letter-spacing:-.02em}
.score-num small{font-size:20px;font-weight:800;margin-left:2px}
.score-cap{font-size:11.5px;color:var(--text-dim);text-align:center;font-weight:600;line-height:1.3}
.score-link{font-size:12px;padding:6px 12px;margin-top:4px}
.score-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.score-tile{border:1px solid var(--line);border-radius:11px;padding:11px 13px;background:rgba(255,255,255,.02)}
.score-tile-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--fs-sm);font-weight:600;color:var(--text-dim)}
.score-tile-top b{font-family:var(--mono);font-size:14px}
.score-tile-bar{height:6px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden;margin:8px 0 6px}
.score-tile-bar span{display:block;height:100%;border-radius:5px;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.score-tile-meta{font-size:var(--fs-xs);color:var(--text-faint);font-family:var(--mono)}
@media (max-width:720px){ .score-card{grid-template-columns:1fr} .score-overall{border-right:none;border-bottom:1px solid var(--line);padding-bottom:14px} }

/* ===== Sesión completada en el plan (#7) ===== */
.done-badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:800;letter-spacing:.02em;
  padding:3px 9px;border-radius:30px;color:#063;background:linear-gradient(120deg,#22c55e,#16a34a);
  box-shadow:0 0 0 1px rgba(34,197,94,.25)}
.done-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:linear-gradient(120deg,rgba(34,197,94,.08),rgba(40,224,240,.04))}
.done-score{display:flex;flex-direction:column;align-items:center;gap:1px;flex:none;padding-right:13px;border-right:1px solid var(--line)}
.done-score-num{font-size:24px;font-weight:900;font-family:var(--mono);line-height:1}
.done-score-cap{font-size:var(--fs-2xs);color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.done-chips{display:flex;gap:9px;flex-wrap:wrap;flex:1}
.done-chip{display:flex;flex-direction:column;gap:1px;min-width:86px;padding:5px 9px;border-radius:9px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.done-chip-k{font-size:10.5px;color:var(--text-dim);font-weight:600}
.done-chip-v{font-size:var(--fs-md);font-weight:800;font-family:var(--mono);line-height:1.1}
.done-chip-m{font-size:var(--fs-2xs);color:var(--text-faint);font-family:var(--mono)}

/* ===== Homologación v2: PMC tabs, sparklines, perfil, fila-3, eficiencia, récords, footer ===== */
.pmc-head-right{display:flex;align-items:center;gap:10px}
.pmc-tabs{display:flex;gap:3px;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:10px;padding:3px}
.pmc-tabs button{border:none;background:none;color:var(--text-dim);font-weight:700;font-size:12px;padding:5px 11px;border-radius:7px;cursor:pointer;transition:background .15s ease,color .15s ease}
.pmc-tabs button:hover{color:var(--text)}
.pmc-tabs button.on{background:var(--surface-3);color:var(--watt)}
/* Toggle año-vs-año del PMC: chip discreto que se enciende en acero (color del CTL) al activarse. */
.pmc-yoy{border:1px solid var(--line);background:none;color:var(--text-dim);font-weight:700;font-size:var(--fs-xs);padding:4px 10px;border-radius:var(--r-pill);cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}
.pmc-yoy:hover{color:var(--text)}
.pmc-yoy.on{color:var(--fitness);border-color:var(--fitness);background:rgba(111,177,201,.10)}

/* ===== Ficha de atleta (Perfil): tarjeta-resumen escaneable ===== */
.athlete-card{background:linear-gradient(150deg,var(--surface-2,#16181F),var(--surface,#121318));border:1px solid var(--line,#23262F);border-radius:var(--r-lg);padding:18px;margin-bottom:14px}
.athlete-card .ac-id{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.athlete-card .ac-avatar{width:60px;height:60px;border-radius:50%;overflow:hidden;flex:none;background:#0d0e12;display:grid;place-items:center;border:2px solid var(--watt)}
.athlete-card .ac-avatar img{width:100%;height:100%;object-fit:cover}
.athlete-card .ac-avatar span{font-weight:800;font-size:20px;color:var(--watt)}
.athlete-card .ac-name{min-width:0}
.athlete-card .ac-name b{display:block;font-size:19px;font-weight:800;line-height:1.15}
.athlete-card .ac-name span{font-size:var(--fs-sm);color:var(--text-dim,#8a97a8);font-weight:600}
.athlete-card .ac-hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.athlete-card .ac-wkg{flex:none;text-align:center;padding-right:18px;border-right:1px solid var(--line,#23262F)}
.athlete-card .ac-wkg .v{font-family:var(--mono,monospace);font-weight:800;font-size:40px;line-height:1;color:var(--watt);font-variant-numeric:tabular-nums}
.athlete-card .ac-wkg .u{font-size:var(--fs-xs);color:var(--text-dim,#8a97a8);letter-spacing:.14em;margin-top:3px;text-transform:uppercase}
.athlete-card .ac-stats{display:grid;grid-template-columns:repeat(4,auto);gap:10px 22px;flex:1}
.athlete-card .ac-stat{display:flex;flex-direction:column;gap:1px}
.athlete-card .ac-stat .k{font-size:var(--fs-2xs);color:var(--text-dim,#8a97a8);text-transform:uppercase;letter-spacing:.05em}
.athlete-card .ac-stat .v{font-family:var(--mono,monospace);font-weight:700;font-size:var(--fs-lg);font-variant-numeric:tabular-nums}
.athlete-card .ac-stat .v small{font-size:var(--fs-xs);color:var(--text-dim,#8a97a8);font-weight:600}
.athlete-card .ac-zttl{font-size:var(--fs-xs);color:var(--text-dim,#8a97a8);margin-bottom:6px;letter-spacing:.02em}
.athlete-card .ac-zbar{display:flex;gap:2px;height:26px;border-radius:var(--r-sm);overflow:hidden}
.athlete-card .ac-zseg{display:grid;place-items:center;min-width:0}
.athlete-card .ac-zseg span{font-size:var(--fs-2xs);font-weight:800;color:rgba(0,0,0,.62);text-shadow:0 1px 0 rgba(255,255,255,.15)}
.athlete-card .ac-zlegend{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:9px}
.athlete-card .ac-zlegend span{display:flex;align-items:center;gap:5px;font-size:var(--fs-xs);color:var(--text-dim,#8a97a8)}
.athlete-card .ac-zlegend i{width:9px;height:9px;border-radius:2px;flex:none}
.athlete-card .ac-zones-empty{font-size:13px;color:var(--text-dim,#8a97a8);padding:12px;background:#0d0e12;border:1px dashed var(--line,#23262F);border-radius:10px}
@media (max-width:560px){
  .athlete-card .ac-stats{grid-template-columns:repeat(2,1fr)}
  .athlete-card .ac-wkg{border-right:none;border-bottom:1px solid var(--line,#23262F);padding:0 0 12px;width:100%}
  .athlete-card .ac-zlegend span{font-size:var(--fs-2xs)}
}

.kpi{position:relative;overflow:hidden}
.kpi-spark{position:absolute;right:14px;bottom:14px;width:80px;height:30px;opacity:.85;pointer-events:none}

.profrow{display:flex;align-items:center;gap:11px;margin:10px 0;font-size:13px}
.profrow-lbl{width:132px;color:var(--text-dim);font-weight:600;flex:none}
.profrow-tr{flex:1;height:8px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
.profrow-tr i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#9b8cff,#28e0f0);transition:width 1s cubic-bezier(.2,.7,.2,1)}
.profrow-w{width:54px;text-align:right;font-family:var(--mono);font-weight:700;flex:none}
.pheno-box{margin-top:14px;padding:13px 14px;border-radius:13px;background:rgba(155,140,255,.10);border:1px solid rgba(155,140,255,.26);font-weight:800;color:#b9acff}
.pheno-box span{display:block;font-weight:500;font-size:12px;color:var(--text-dim);margin-top:3px}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:18px 0}

.eff-tile{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:13px;padding:13px 15px;margin-bottom:12px;transition:border-color .15s ease,transform .15s ease}
.eff-tile:last-child{margin-bottom:0}
.eff-tile:hover{border-color:#3a4760;transform:translateY(-2px)}
.eff-top{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--text-dim);font-weight:600}
.eff-top b{font-size:var(--fs-xs)}
.muted-trend{color:var(--text-faint)}
.eff-val{font-family:var(--mono);font-size:24px;font-weight:800;margin-top:5px}
.eff-val.muted{color:var(--text-faint)}
.eff-val small{font-size:12px;color:var(--text-dim)}
.eff-bar{height:6px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:9px}
.eff-bar span{display:block;height:100%;border-radius:5px}
.eff-note{font-size:var(--fs-xs);color:var(--text-faint);margin-top:7px;line-height:1.4}

.rec-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line);transition:background .15s ease}
.rec-row:last-child{border-bottom:none}
.rec-row:hover{background:rgba(255,255,255,.03)}
.rec-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:var(--fs-lg);background:rgba(255,255,255,.05);border:1px solid var(--line);flex:none}
.rec-nm{flex:1;min-width:0}
.rec-nm b{font-size:var(--fs-base);font-weight:700;display:block}
.rec-nm small{font-size:11.5px;color:var(--text-dim)}
.rec-tag{font-family:var(--mono);font-size:11.5px;font-weight:700;flex:none}

.dash-foot{text-align:center;color:var(--text-faint);font-size:12px;margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
.dash-foot b{color:var(--watt)}

/* Chips de selección (disciplinas, bicicletas) */
.chip-grid{display:flex;flex-wrap:wrap;gap:8px}
.chip-toggle{padding:8px 14px;border-radius:30px;font-size:13px;font-weight:600;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text-dim);cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
.chip-toggle:hover{border-color:#3a4760;color:var(--text);transform:translateY(-1px)}
.chip-toggle.on{background:rgba(44,184,234,.14);border-color:var(--fitness);color:var(--text)}

/* Readiness */
.rdy-body{display:grid;grid-template-columns:170px 1fr;gap:20px;align-items:center}
.rdy-ring{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.ring-wrap{position:relative;width:176px;height:176px}
.ring-wrap svg{width:176px;height:176px}
.ring-ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-ctr b{font-family:var(--mono);font-size:46px;font-weight:800;line-height:1}
.ring-ctr span{font-size:var(--fs-xs);color:var(--text-dim)}
.rdy-state{font-size:14px;font-weight:800;max-width:180px}
/* Bloque del anillo (sección Preparación) */
.ring-block{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:8px 0 4px;min-height:230px}
.rdy-substate{font-size:11.5px;color:var(--text-dim);max-width:190px}
/* Encabezados de sección (estilo mockup) */
.sec-head{display:flex;align-items:center;gap:11px;margin:26px 2px 13px}
.sec-ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:var(--fs-md);background:rgba(255,255,255,.05);border:1px solid var(--line)}
.sec-head h3{font-size:16px;font-weight:800}
.sec-head span{font-size:var(--fs-sm);color:var(--text-faint)}
/* Señales de recuperación (grid 2×2) */
.sig-sub{font-size:11.5px;color:var(--text-faint)}
.sig-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.sig-tile{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:13px;padding:14px 15px;transition:border-color .15s,transform .15s,background .15s}
.sig-tile:hover{border-color:var(--line-bright,#3a4760);background:rgba(255,255,255,.05);transform:translateY(-2px)}
.sig-top{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-sm);color:var(--text-dim);font-weight:600}
.sig-top b{font-size:11.5px}
.sig-val{font-family:var(--mono);font-size:23px;font-weight:800;margin:6px 0 0}
.sig-bar{height:6px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:9px}
.sig-bar span{display:block;height:100%;border-radius:5px;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.rdy-factors{display:flex;flex-direction:column;gap:11px}
.rdy-f-top{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--text-dim)}
.rdy-f-top b{font-family:var(--mono)}
.rdy-f-top small{font-size:var(--fs-2xs)}
.rdy-f-bar{height:6px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:5px}
.rdy-f-bar span{display:block;height:100%;border-radius:5px}
.perf-note{font-size:11.5px;color:var(--text-faint);line-height:1.5;margin-top:14px;border-top:1px solid var(--line);padding-top:10px}

/* Tipo de ciclista */
.rider-badge{background:rgba(155,140,255,.16);color:#b9acff}
.est-badge{background:rgba(255,206,0,.14);color:var(--watt)}
.rider-body{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
.radar-svg{width:100%;height:auto;max-width:300px;display:block;margin:0 auto}
.arq-list{display:flex;flex-direction:column;gap:9px}
.arq{display:flex;align-items:center;gap:10px}
.arq-lead{background:rgba(155,140,255,.09);border:1px solid rgba(155,140,255,.25);border-radius:11px;padding:6px 10px;margin:-1px 0}
.arq-ico{width:28px;height:28px;display:grid;place-items:center;font-size:var(--fs-md);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:9px;flex:none}
.arq-nm{flex:1;min-width:0;font-size:var(--fs-sm);font-weight:700;line-height:1.15}
.arq-nm small{display:block;font-size:10.5px;font-weight:500;color:var(--text-faint)}
.arq-tr{width:64px;height:7px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden;flex:none}
.arq-tr i{display:block;height:100%;border-radius:5px}
.arq-pct{width:26px;text-align:right;font-family:var(--mono);font-size:13px;flex:none}

/* Curva de potencia + durabilidad */
.pdc-svg{width:100%;height:auto;margin:4px 0}
.pdc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.pdc-cell{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:8px 6px;text-align:center}
.pdc-d{font-size:10.5px;color:var(--text-dim);font-weight:600}
.pdc-w{font-family:var(--mono);font-size:16px;font-weight:800}
.pdc-w small{font-size:var(--fs-2xs);color:var(--text-dim);font-weight:600}
.pdc-wkg{font-size:var(--fs-2xs);color:var(--watt)}
.dur-score{display:flex;align-items:baseline;gap:12px;margin:4px 0 8px}
.dur-score b{font-family:var(--mono);font-size:38px;font-weight:800;line-height:1}
.dur-score span{font-size:12px;color:var(--text-dim);line-height:1.35}
/* ══ V1 premium (2026-07-05): capa viva de los gráficos ══ */
/* Hint de uso + fila de herramientas de los gráficos (patrón del mockup premium) */
.pmc-hint{color:var(--text-faint);font-size:11.5px;margin:-2px 0 8px}
.pmc-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
/* Leyenda de adherencia del riel del Coach */
/* Acceso a «el entreno sobre tus rutas». Vive AQUÍ y no en un <style> de la página: el de Coach.razor
   está dentro de un bloque condicional, así que la regla no se emitía y el enlace salía como texto
   plano. Y es un <a>, que NO hereda las reglas base de <button> — necesita su propio estilo. */
.cw-routes{display:inline-flex;align-items:center;gap:6px;background:rgba(255,206,0,.12);
  border:1px solid rgba(255,206,0,.45);color:var(--watt);border-radius:999px;padding:7px 14px;
  font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;transition:.15s}
.cw-routes:hover{background:var(--watt);color:#0A0A0A;border-color:var(--watt)}
.cw-rail-legend{display:flex;gap:16px;font-size:11.5px;color:var(--text-faint);margin-top:10px;flex-wrap:wrap}
.cw-rail-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
/* Punto de serie en la lectura de la curva (90 d, amarillo — multi-periodo llega en V5) */
.pc-read .pc-dot{color:var(--watt);font-weight:700}
/* Fila de lectura del PMC: HOY por defecto, sigue al crosshair (initPmc) */
.pmc-read{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;font-family:var(--mono);font-size:var(--fs-sm);background:var(--surface-2,#16181F);border:1px solid var(--line,#23262F);border-radius:10px;padding:8px 13px;margin-bottom:10px}
.pmc-read .pr-tag{font-size:9.5px;font-weight:800;letter-spacing:.12em;color:var(--text-faint);min-width:30px}
.pmc-read .pr-item b{font-size:14px}
.pmc-read .pr-date{color:var(--watt);font-weight:700;font-size:11.5px;margin-left:auto} /* fecha bajo el cursor: amarilla y protagonista (mockup) */
.pmc-zoom-chip{background:rgba(255,206,0,.12);border:1px solid rgba(255,206,0,.4);color:var(--watt);border-radius:var(--r-pill);padding:3px 11px;font-size:var(--fs-xs);font-weight:700;cursor:pointer;font-family:Inter,sans-serif}
.pmc-zoom-chip:hover{background:rgba(255,206,0,.2)}
/* Lectura viva + toggle de la curva de potencia */
.pc-read{display:flex;gap:12px;align-items:baseline;font-family:var(--mono);font-size:var(--fs-sm);margin:2px 0 6px;min-height:20px}
.pc-read .pc-lbl{color:var(--watt);font-weight:800;min-width:30px}
.pc-read .pc-val{color:var(--text)}
.pc-read .pc-hint{color:var(--text-faint);font-size:10.5px;margin-left:auto}
.pc-unit{display:flex;background:var(--surface-2,#16181F);border:1px solid var(--line,#23262F);border-radius:9px;overflow:hidden}
.pc-unit button{background:none;border:none;color:var(--text-dim);font-size:var(--fs-xs);font-weight:800;padding:5px 10px;cursor:pointer;min-height:28px}
.pc-unit button.on{background:var(--watt);color:#0A0A0A}
/* Popover de la matriz anual clicable */
.ym-pop{position:absolute;z-index:30;background:#16181F;border:1px solid var(--line-2,#2b2f3a);border-radius:var(--r-md);padding:10px 12px;min-width:190px;max-width:260px;box-shadow:0 10px 30px rgba(0,0,0,.55)}
.ym-pop-date{font-size:var(--fs-xs);font-weight:800;color:var(--watt);letter-spacing:.03em;margin-bottom:6px}
.ym-pop-act{display:flex;justify-content:space-between;gap:10px;color:var(--text);text-decoration:none;font-size:var(--fs-sm);padding:5px 0;border-top:1px solid rgba(255,255,255,.06)}
.ym-pop-act:hover{color:var(--watt)}
.ym-pop-act span{color:var(--text-dim);font-family:var(--mono);font-size:var(--fs-xs);white-space:nowrap}
.ym-pop-more{color:var(--text-faint);font-size:var(--fs-xs);padding-top:5px}

/* ══ EVOLUCIÓN v3 (2026-07-05, mockup s-evo) ══ */
/* Chip amarillo de los títulos (mockup .nuevo): TENDENCIA 7D, MULTI-PERIODO, EVOLUTIVO, CLICABLE… */
.nuevo{font-size:9.5px;font-weight:800;font-style:normal;letter-spacing:.06em;color:#0A0A0A;background:var(--watt);padding:2px 7px;border-radius:var(--r-pill);box-shadow:0 0 12px rgba(255,206,0,.4);animation:nuevoPulse 2.6s infinite;cursor:help;vertical-align:2px;display:inline-block}
@keyframes nuevoPulse{0%,100%{box-shadow:0 0 8px rgba(255,206,0,.3)}50%{box-shadow:0 0 18px rgba(255,206,0,.55)}}
/* Título de tarjeta del mockup (h3 con emoji + chip .nuevo) */
.evo-h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-md);font-weight:800;font-style:italic;margin:0 0 3px}
/* Cabecera del mockup: h1 + seg de rango a la derecha */
.evo-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:2px}
.evo-h1{font-style:italic;font-weight:800;font-size:clamp(24px,4vw,32px);margin:0}
.seg{display:flex;background:var(--surface-2,#16181F);border:1px solid var(--line,#23262F);border-radius:11px;overflow:hidden}
.seg button{background:none;border:none;color:var(--text-dim);font-size:12px;font-weight:700;padding:7px 12px;cursor:pointer;min-height:36px;font-family:inherit;transition:.15s}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--watt);color:#0A0A0A;font-weight:800}
/* Vista premium de rodadas AJENAS (2026-08-02): el free ve el gráfico REAL difuminado con el
   muro encima — mismo criterio del velo del heatmap (valor de verdad detrás, no un placeholder). */
.pv-wrap{position:relative}
.pv-blur{filter:blur(7px);pointer-events:none;user-select:none}
.pv-veil{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:14px;background:rgba(10,10,10,.25);border-radius:12px}

/* Sello ✦PRO del mockup (.pro-lock): base global — antes solo existía el override de .chipx.on */
.pro-lock{font-size:var(--fs-2xs);font-weight:800;color:var(--watt);border:1px solid rgba(255,206,0,.4);background:rgba(255,206,0,.07);padding:2px 8px;border-radius:var(--r-pill);font-style:normal}
/* Chips de herramientas de los gráficos (mockup .chip): «⇄ vs año pasado», «📍 Anotaciones», «🔮 ¿Y si…?» */
.chipx{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:var(--r-pill);font-size:12px;font-weight:700;background:none;border:1px solid var(--line,#23262F);color:var(--text-dim);cursor:pointer;min-height:30px;transition:.15s;font-family:inherit}
.chipx:hover{color:var(--text);border-color:var(--text-faint)}
.chipx.on{color:#0A0A0A;background:var(--watt);border-color:var(--watt)}
.chipx.on .pro-lock{color:#0A0A0A;border-color:rgba(10,10,10,.4)}
/* 🔮 Panel de proyección (mockup .forecast-panel) */
.forecast-panel{background:linear-gradient(135deg,rgba(255,206,0,.05),transparent);border:1px solid rgba(255,206,0,.25);border-radius:var(--r-md);padding:16px 18px;margin-top:14px}
.forecast-panel .f-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.forecast-panel input[type=range]{flex:1;min-width:180px;accent-color:var(--watt)}
.f-verdict{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap}
.f-verdict .fk{flex:1;min-width:140px;background:var(--surface-2,#16181F);border:1px solid var(--line,#23262F);border-radius:var(--r-md);padding:12px 14px}
.f-verdict .fk-lab{font-size:10.5px;letter-spacing:.08em;color:var(--text-faint);font-weight:700;text-transform:uppercase}
.f-verdict .fk-val{font-size:24px;font-weight:800;font-style:italic;margin:2px 0;font-family:var(--mono)}
.f-verdict .fk-meta{font-size:var(--fs-xs);color:var(--text-faint)}
/* 📍 Pins de anotaciones del PMC */
.ann-pin{cursor:pointer}
.ann-pin:hover circle{filter:drop-shadow(0 0 4px rgba(255,206,0,.6))}
/* Lectura triple de la curva multi-periodo */
.pc-read .pcr b{color:var(--text);margin-left:2px}
.pc-read .pcr-dur{color:var(--text-faint);font-size:10.5px;margin-left:auto}
/* Riel del Coach con peso (V1): barra más alta + TSS del día + estado saltada */
.cw-tss{font-family:var(--mono);font-size:9.5px;color:var(--text-faint)}
.cw-load.tall{height:48px;display:flex;align-items:flex-end;justify-content:center}
.cw-load.tall i{width:70%;max-width:34px;border-radius:6px 6px 2px 2px;transition:filter .15s,height .2s}
.cw-day:hover .cw-load.tall i{filter:brightness(1.25)}
.cw-tag.missed{color:var(--form-neg);font-weight:800}
/* Timeline del reajuste del Coach (V1): renglones que aparecen y respiran */
.cb-timeline{display:flex;flex-direction:column;gap:7px;margin:12px 0}
.cb-tl-step{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--text-dim);border-left:2px solid var(--line-2,#2b2f3a);padding:7px 12px;background:var(--surface-2,#16181F);border-radius:0 9px 9px 0;animation:tlIn .4s ease both}
.cb-tl-step.live{border-left-color:var(--watt);color:var(--text)}
.cb-tl-step.done{border-left-color:var(--form);color:var(--text);font-weight:600}
@keyframes tlIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.cb-tl-step{animation:none}}

/* Escala de durabilidad (zonas + marcador), movida de /hoy con la tarjeta (M2 2026-07-05) */
.dur-scale{position:relative;height:9px;border-radius:6px;margin:18px 0 6px;background:linear-gradient(90deg,var(--form-neg) 0%,var(--warn) 28%,var(--form) 62%,#43C98A 100%);opacity:.85}
.dur-mark{position:absolute;top:-3px;width:3px;height:15px;border-radius:2px;background:#fff;box-shadow:0 0 0 2px var(--surface,#121318);transform:translateX(-50%)}
.dur-scale-lbl{display:flex;justify-content:space-between;font-size:var(--fs-2xs);color:var(--text-faint);font-family:var(--mono);letter-spacing:.02em}

/* ---- Interacción: el puntero responde, nada se ve "muerto" ---- */
.card,.kpi{transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.card:hover{border-color:#3a4760;transform:translateY(-2px);box-shadow:0 14px 34px -20px rgba(0,0,0,.8)}
.kpi:hover{transform:translateY(-2px);filter:brightness(1.06)}
.arq{border-radius:11px;padding:6px 8px;cursor:default;transition:background .15s ease,transform .15s ease}
.arq:hover{background:rgba(255,255,255,.05);transform:translateX(2px)}
.arq:hover .arq-tr i{filter:brightness(1.15)}
.pdc-cell{transition:border-color .15s ease,transform .15s ease,background .15s ease}
.pdc-cell:hover{border-color:#3a4760;background:rgba(255,255,255,.05);transform:translateY(-2px)}
.evt-cd div{transition:border-color .15s ease,transform .15s ease}
.evt-cd div:hover{border-color:#3a4760;transform:translateY(-1px)}
.sec-ic{transition:transform .15s ease}
.sec-head:hover .sec-ic{transform:rotate(-8deg) scale(1.05)}
/* radar: resalta al pasar el ratón */
.rider-body .radar-svg{transition:filter .2s ease}
.rider-body:hover .radar-svg{filter:drop-shadow(0 0 10px rgba(155,140,255,.35))}
/* puntero en elementos clicables existentes */
.act-row-click{cursor:pointer}
.form-badge{transition:filter .15s ease}

@media (max-width:980px){
  .hero-row{grid-template-columns:1fr}
  .rdy-body{grid-template-columns:1fr}
  .rider-body{grid-template-columns:1fr}
  .sig-grid{grid-template-columns:1fr}
  .pdc-grid{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .hero-h1{font-size:24px}
}
/* Coach: "Tu plan de mañana" como encabezado integrado del plan (no tarjeta aparte) */
.mn-strip{padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid var(--line);border-left:3px solid var(--gap,var(--line));padding-left:12px}
.mn-cols{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px}
/* Coach: detalle de bloques del entreno, colapsable (resumen visible = el gráfico; detalle al click) */
.step-legend{margin:4px 0 2px}
.step-legend>summary{cursor:pointer;font-size:12px;color:var(--text-dim);list-style:none;padding:5px 0;user-select:none}
.step-legend>summary::-webkit-details-marker{display:none}
.step-legend>summary::before{content:"▸ ";color:var(--watt)}
.step-legend[open]>summary::before{content:"▾ "}
/* Calendario: grid de 7 días que se aprieta con elegancia en móvil */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-cell{border:1px solid var(--line);border-radius:10px;padding:7px;min-height:92px;display:flex;flex-direction:column;gap:5px;overflow:hidden}
.cal-cell.today{background:rgba(255,206,0,.08);border-color:var(--watt)}
.cal-cell.dim{opacity:.4}
.cal-day{font-weight:700;font-size:13px}
.cal-pct{font-size:var(--fs-2xs);font-weight:700}
@media (max-width:640px){
  .cal-grid{gap:3px}
  .cal-cell{padding:4px;min-height:64px;gap:3px;border-radius:7px}
  .cal-day{font-size:var(--fs-xs)}
  .cal-hd{font-size:9px}
}
/* Historial de FTP: línea de tiempo horizontal (la trayectoria, no solo el número) */
.ftp-line{display:flex;align-items:center;gap:10px;overflow-x:auto;padding:6px 2px 4px;scrollbar-width:thin}
.ftp-step{flex:0 0 auto;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:9px 13px;text-align:center;cursor:help;transition:.15s}
.ftp-step:hover{border-color:var(--line-2)}
.ftp-step.now{border-color:rgba(255,206,0,.5);background:linear-gradient(160deg,rgba(255,206,0,.08),var(--surface-2))}
.ftp-step b{display:block;font-family:var(--mono);font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.ftp-step b small{font-size:var(--fs-2xs);color:var(--text-dim);font-weight:600}
.ftp-step .d{display:inline-block;font-family:var(--mono);font-size:var(--fs-2xs);font-weight:700;margin-top:1px}
.ftp-step .w{display:block;font-size:9.5px;color:var(--text-dim);margin-top:2px}
.ftp-step .s{display:block;font-size:8.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;margin-top:1px}
.ftp-arrow{flex:0 0 auto;color:var(--text-faint);font-size:12px}

/* Semáforo de adherencia por día + barras de carga semanal (plan vs real, escala del mes) */
.cal-sem{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 3px rgba(0,0,0,.4)}
.cal-wk{display:flex;align-items:center;gap:12px;margin:2px 2px 12px}
.cal-wkbars{flex:1;display:flex;flex-direction:column;gap:2px;min-width:60px}
.cal-wkbars span{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.05);overflow:hidden}
.cal-wkbars i{display:block;height:100%;border-radius:3px;transition:width .5s ease .1s}
.cal-wkbars .p i{background:rgba(255,206,0,.75)}
.cal-wkbars .r i{background:var(--form)}
@media (max-width:440px){
  .cal-cell{min-height:52px;padding:3px}
  .cal-tss{display:none}
  .cal-pct{display:none}
  .cal-sem{width:6px;height:6px}
}

/* ============================================================
   COACH IA (pantalla de pago) — sello premium + riel de la semana + hero del día
   ============================================================ */
.pro-badge{display:inline-block;vertical-align:middle;margin-left:10px;font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;color:#0A0A0A;background:linear-gradient(135deg,var(--watt),#E0A800);border-radius:var(--r-pill);padding:3px 10px;box-shadow:0 2px 12px rgba(255,206,0,.28);position:relative;top:-3px}
.nav-pro{display:inline-block;font-size:8px;font-weight:800;letter-spacing:.06em;color:#0A0A0A;background:linear-gradient(135deg,var(--watt),#E0A800);border-radius:var(--r-pill);padding:1px 5px;vertical-align:middle;position:relative;top:-1px;margin-left:2px}
/* Panel «Personalizar» (mostrar/ocultar secciones de dashboards) — compartido /hoy y Evolución */
.cust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-top:10px}
.cust-row{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted2,#b9bdc8);cursor:pointer}
.cust-row input{width:16px;height:16px;accent-color:var(--watt);flex:none}
/* ── Personalizar (rediseño 2026-07-08): panel de elección de gráficas + sugerencias proactivas ── */
.pers-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin-left:5px;border-radius:var(--r-pill);background:var(--form);color:#0A0A0A;font-size:var(--fs-2xs);font-weight:800;vertical-align:1px}
.pers-panel{border-color:rgba(255,206,0,.28)}
.pers-grp{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint);margin:14px 0 4px}
/* Panel «Personalizar»: lista de checkboxes DENSA, no una tarjeta por opción (la caja bordeada dejaba
   mucho hueco para un checkbox + una etiqueta corta). Sin borde permanente: un resaltado sutil al hover
   marca que es clicable. El tap-target de 44px se conserva SOLO en móvil (en desktop rige el ratón). */
/* auto-FILL (no auto-fit): las secciones con pocos ítems NO estiran sus columnas a lo ancho — todas
   las secciones alinean a las MISMAS columnas (checklist ordenado), en vez de la rejilla irregular
   donde una fila de 3 se veía ancha y una de 5 estrecha. */
.pers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px 16px}
.pers-row{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text,#e8e8e8);cursor:pointer;padding:6px 8px;border-radius:8px;transition:background .12s}
.pers-row:hover{background:rgba(255,255,255,.05)}
.pers-row.dim{opacity:.55}
.pers-row input{width:17px;height:17px;accent-color:var(--watt);flex:none}
.pers-ic{flex:none;font-size:var(--fs-md)}
.pers-lab{flex:1;min-width:0}
.pers-hasdata{color:var(--form);font-size:var(--fs-xs);font-weight:700;margin-left:4px}
@media (max-width:760px){ .pers-row{min-height:44px} }
.pers-suggest{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-color:rgba(52,211,153,.32);background:linear-gradient(135deg,rgba(52,211,153,.07),transparent)}
.pers-suggest-t{font-size:13px;font-weight:700;color:var(--text,#e8e8e8)}

/* ===== «El coach que se ve trabajar» (Lote A): señales + decisión + proyección + diff ===== */
.cb-brain{margin-top:14px;background:#0d0e12;border:1px solid var(--line);border-radius:13px;padding:13px 14px}
.cb-brain-h{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-bottom:10px}
.cb-sigs{display:flex;gap:8px;flex-wrap:wrap}
.cb-sig{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:6px 10px;font-size:11.5px;color:var(--text-dim)}
.cb-sig b{font-family:var(--mono);font-size:12px;color:var(--text)}
.cb-sig small{font-size:var(--fs-2xs)}
.cb-sig i{width:7px;height:7px;border-radius:50%;flex:none}
.cb-sig.good i{background:var(--form)}.cb-sig.good small{color:var(--form)}
.cb-sig.warn i{background:var(--warn)}.cb-sig.warn small{color:var(--warn)}
.cb-sig.bad i{background:var(--form-neg)}.cb-sig.bad small{color:var(--form-neg)}
.cb-sig.muted i{background:#3a3f4a}.cb-sig.muted small{color:var(--text-faint)}
.cb-dec{margin-top:10px;border-left:3px solid var(--line-2);padding:2px 0 2px 11px;font-size:var(--fs-sm);line-height:1.55;color:#cdd6e2}
/* pasos narrados del reajuste */
.cb-steps{display:flex;align-items:center;gap:11px;background:linear-gradient(135deg,#16150e,#111);border:1px solid rgba(255,206,0,.35);border-radius:13px;padding:13px 16px;margin-bottom:14px;font-size:13px;font-weight:600}
.cb-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--watt);animation:cbSpin .8s linear infinite;flex:none}
@keyframes cbSpin{to{transform:rotate(360deg)}}
/* diff del reajuste */
.cb-diff{background:var(--surface);border:1px solid rgba(255,206,0,.4);border-radius:14px;padding:13px 15px;margin-bottom:14px}
.cb-diff-h{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-base);margin-bottom:6px}
.cb-diff-x{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:13px;padding:2px 6px}
.cb-diff-x:hover{color:#fff}
.cb-diff-row{display:flex;gap:12px;align-items:baseline;padding:6px 0;border-top:1px solid rgba(255,255,255,.05);font-size:var(--fs-sm)}
.cb-diff-row .d{flex:0 0 68px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-dim)}
.cb-diff-row .chg{color:#cdd6e2;line-height:1.5}
.cb-diff-row .chg b{color:#fff}
.cb-diff-row .arr{color:var(--watt);padding:0 3px}
.cb-diff-row .tag{display:inline-block;font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.08em;border-radius:5px;padding:2px 6px;margin-right:6px;vertical-align:1px}
.cb-diff-row .tag.add{background:rgba(127,201,163,.15);color:var(--form)}
.cb-diff-row .tag.del{background:rgba(224,106,106,.15);color:var(--form-neg)}
/* proyección de la semana */
.cb-proj{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#0d0e12;border:1px solid var(--line);border-radius:13px;padding:11px 15px;margin-bottom:14px;font-size:var(--fs-sm);color:var(--text-dim)}
.cb-proj.risk{border-color:rgba(224,106,106,.5);background:linear-gradient(135deg,#161010,#0d0e12)}
.cb-proj-k{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--text-dim)}
.cb-proj-i b{font-family:var(--mono);color:var(--text);font-size:13px}
.cb-proj-i small{font-size:var(--fs-xs)}
.cb-proj-div{width:1px;align-self:stretch;background:var(--line)}
@media (max-width:560px){.cb-proj{gap:9px}.cb-proj-div{display:none}}
/* barra de adherencia dentro de los chips Real vs Plan (escala 0–130%, marca en el 100%) */
.done-chip-bar{position:relative;display:block;width:100%;height:6px;border-radius:var(--r-xs);background:rgba(255,255,255,.07);margin:5px 0 4px;overflow:hidden}
.done-chip-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-xs);transition:width .5s ease .1s}
.done-chip-bar em{position:absolute;top:-1px;bottom:-1px;width:2px;background:rgba(255,255,255,.45)}

.cw-rail{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:16px}
.cw-day{position:relative;background:var(--surface,#121318);border:1px solid var(--line);border-radius:14px;padding:9px 6px 12px;cursor:pointer;text-align:center;transition:.16s;overflow:hidden;color:inherit;font-family:inherit}
.cw-day:hover{border-color:var(--line-2,#2b2f3a);transform:translateY(-2px)}
.cw-tag{display:block;height:13px;line-height:13px;text-align:center;font-size:8.5px;font-weight:800;letter-spacing:.12em}
.cw-tag.today{color:var(--watt)}
.cw-tag.done{color:var(--form);font-size:var(--fs-xs);letter-spacing:0}
.cw-dow{display:block;font-size:var(--fs-2xs);color:var(--muted,var(--text-dim));text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-top:3px}
.cw-dnum{display:block;font-family:var(--mono);font-size:16px;font-weight:700;margin-top:2px}
.cw-load{height:30px;display:flex;align-items:flex-end;justify-content:center;margin-top:7px}
.cw-load i{width:8px;border-radius:3px 3px 0 0;display:block;min-height:4px}
.cw-day.rest .cw-load i{background:var(--line-2,#2b2f3a)!important;height:5px!important}
.cw-day.done{opacity:.6}
.cw-day.future{opacity:.84}
.cw-day.active{border-color:var(--watt);background:linear-gradient(160deg,rgba(255,206,0,.10),var(--surface,#121318));box-shadow:0 0 0 1px var(--watt) inset,0 10px 30px rgba(255,206,0,.06)}
.cw-day.active .cw-dow{color:var(--watt)}

.cw-hero{position:relative;background:linear-gradient(150deg,#16181F,#0e0f14 72%);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px;overflow:hidden;margin-bottom:14px}
.cw-hero::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--acc,var(--watt))}
.cw-eyebrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted,var(--text-dim))}
.cw-pin{color:var(--watt);font-weight:700}
.cw-title{font-weight:800;font-style:italic;font-size:27px;line-height:1.06;margin:8px 0 0;letter-spacing:-.01em}
.cw-imp{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:6px 13px;border-radius:var(--r-pill);border:1px solid var(--line-2,#2b2f3a);background:#0d0e12}
.cw-imp .e{font-size:17px}
.cw-imp .l{font-weight:800;font-style:italic}
.cw-imp .c{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted,var(--text-dim));border-left:1px solid var(--line-2,#2b2f3a);padding-left:8px}
.cw-kstats{display:flex;gap:26px;margin:18px 0 2px;flex-wrap:wrap}
.cw-kstat .v{font-weight:800;font-style:italic;font-size:25px}
.cw-kstat .v small{font-size:13px;color:var(--muted2,#b9bdc8);font-weight:700}
.cw-kstat .k{color:var(--muted,var(--text-dim));font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;margin-top:1px}
.cw-blocks-h{display:flex;justify-content:space-between;align-items:center;color:var(--muted,var(--text-dim));font-size:11.5px;margin:16px 0 7px}
.cw-blocks{display:flex;align-items:flex-end;gap:3px;height:84px;background:#0d0e12;border:1px solid var(--line);border-radius:var(--r-md);padding:10px}
.cw-blocks i{border-radius:3px 3px 0 0;min-width:3px;transition:.15s}
.cw-blocks i:hover{filter:brightness(1.2)}
.cw-cta{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.cw-rest{display:flex;align-items:center;gap:16px;padding:6px 0}
.cw-rest-ic{font-size:40px}
@media (max-width:560px){
  .cw-rail{gap:5px}
  .cw-day{padding:9px 3px 10px;border-radius:11px}
  .cw-dnum{font-size:14px}
  .cw-load{height:24px}
  .cw-title{font-size:var(--fs-xl)}
  .cw-kstats{gap:18px}
  .cw-hero{padding:18px 15px}
}

/* Móvil web (~600px y ~400px): los dashboards reflujan a 1 columna, los SVG no se desbordan
   y la densidad/tipografía se adapta. Compartido por Evolución, Calendario y Actividades. */
@media (max-width:600px){
  .kpi-grid{grid-template-columns:1fr 1fr;gap:10px}
  .mn-cols{flex-direction:column;gap:10px}
  .page-head{flex-direction:column;align-items:flex-start;gap:10px}
  .page-head>div[style*="text-align:right"]{text-align:left!important;width:100%}
  .hero-h1{font-size:19px}
  .hero-chips{gap:6px}
  .aero-top{flex-direction:column;align-items:stretch}
  .aero-svg{min-width:100%}
  .aero-readouts{flex-direction:column}
  .radar-svg{max-width:240px}
  .two-col[style*="1fr 1fr"]{grid-template-columns:1fr!important}
}
@media (max-width:400px){
  .kpi-grid{grid-template-columns:1fr}
  .kpi-spark{width:60px;opacity:.6}
  .pdc-grid{grid-template-columns:1fr 1fr}
  .hero-chips{width:100%}
  .hero-chips .hchip{flex:1 1 auto;justify-content:center}
}
/* Pantallas muy estrechas (iPhone SE / gama de entrada ~375px): densidad mínima sin romper nada. */
@media (max-width:380px){
  .page-title{font-size:20px}
  .card{padding:14px}
  .cw-rail{gap:3px}
  .cw-day{padding:7px 2px 8px;border-radius:9px}
  .cw-dow{font-size:9px;letter-spacing:.04em}
  .cw-dnum{font-size:13px}
  .cw-tag{font-size:8px;letter-spacing:.06em}
  .cal-grid{gap:2px}
  .achips .achip:nth-child(3){display:none} /* Actividades: 2 chips caben, 3 desbordan */
}

/* ============================================================
   SISTEMA VISUAL "INSTRUMENTO" (v2) — compartido por todas las
   pantallas. Lenguaje: precisión + contención (cabina/terminal),
   negro de marca + amarillo con cuentagotas + paleta sobria.
   Clases namespaced .ds-* para adoptar incrementalmente.
   ============================================================ */
.ds-num{font-family:var(--mono);font-feature-settings:"tnum" 1;letter-spacing:-.01em}

/* Panel/tarjeta de instrumento: grafito, hairline, sombra suave */
.ds-card{position:relative;background:linear-gradient(180deg,var(--surface),#0e0f13);
  border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 12px 34px rgba(0,0,0,.4)}
.ds-card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ds-card-t{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.ds-tag{font-family:var(--mono);font-size:var(--fs-2xs);font-weight:600;color:var(--text-faint);letter-spacing:.05em}

/* Tile KPI: número grande tabular + delta + sparkline */
.ds-kpi{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--surface),#0e0f13);
  border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px}
.ds-kpi .lbl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);font-weight:600}
.ds-kpi .v{font-family:var(--mono);font-feature-settings:"tnum" 1;font-weight:700;font-size:29px;margin-top:7px;letter-spacing:-.02em}
.ds-kpi .v small{font-family:var(--font);font-size:12px;color:var(--text-dim);font-weight:600;margin-left:3px}
.ds-kpi .d{font-family:var(--mono);font-size:var(--fs-xs);font-weight:600;margin-top:4px}
.ds-kpi .d .ref{color:var(--text-faint);font-weight:500}
.ds-up{color:var(--form)}.ds-dn{color:var(--form-neg)}

/* leyenda con valor actual */
.ds-legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:8px}
.ds-lg{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-dim)}
.ds-lg i{width:13px;height:2.5px;border-radius:2px;flex:none}
.ds-lg b{font-family:var(--mono);color:var(--text);font-weight:700;font-size:var(--fs-sm)}

/* nota técnica / fuente (señal de confianza) */
.ds-note{color:var(--text-faint);font-size:10.5px;line-height:1.55;margin-top:12px;font-family:var(--mono);letter-spacing:.02em}
.ds-src{color:var(--text-faint);font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.03em}

/* chips de rango (reusa estética sobria) */
.ds-range{display:flex;gap:7px;flex-wrap:wrap}
.ds-range button{font-family:var(--mono);font-size:var(--fs-xs);font-weight:600;padding:6px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line);color:var(--text-dim);background:var(--surface);letter-spacing:.03em;cursor:pointer;transition:.15s}
.ds-range button:hover{border-color:var(--line-2);color:var(--text)}
.ds-range button.on{background:rgba(255,206,0,.10);color:var(--watt);border-color:rgba(255,206,0,.42)}

/* ===== Eficiencia aeróbica (Evolución) ===== */
.aero-top{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap;margin:4px 0 6px}
.aero-hero{flex:0 0 auto}
.aero-ef{font-family:var(--mono);font-feature-settings:"tnum" 1;font-weight:700;font-size:38px;letter-spacing:-.02em;line-height:1}
.aero-ef small{display:block;font-family:var(--font);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);font-weight:600;margin-top:3px}
.aero-delta{font-family:var(--mono);font-weight:700;font-size:var(--fs-md);margin-top:8px}
.aero-delta.up,.aero-v .up{color:var(--form)}
.aero-delta.dn,.aero-v .dn{color:var(--form-neg)}
.aero-sub{font-size:11.5px;color:var(--text-faint);font-family:var(--mono);margin-top:2px}
.aero-svg{flex:1;min-width:280px;height:auto}
.aero-readouts{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.aero-ro{flex:1;min-width:180px}
.aero-k{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);font-weight:600}
.aero-v{font-family:var(--mono);font-feature-settings:"tnum" 1;font-weight:700;font-size:17px;margin-top:5px}
.aero-v small{font-family:var(--font);font-size:var(--fs-xs);color:var(--text-dim);font-weight:600}
.aero-v .up,.aero-v .dn{font-size:13px}
.aero-s{font-size:11.5px;color:var(--text-faint);margin-top:2px}
.aero-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;color:var(--text-dim)}
.aero-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--text-faint);vertical-align:middle;margin-right:6px}
.aero-line{display:inline-block;width:16px;height:2.5px;border-radius:2px;background:var(--fitness);vertical-align:middle;margin-right:6px}

/* ===== Feedback de la sesión (RPE / sensación / nota) ===== */
.fb-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.fb-lbl{font-size:12px;color:var(--text-dim);font-weight:600;min-width:180px}
.fb-rpe{display:flex;gap:5px;flex-wrap:wrap}
.fb-chip{width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--text-dim);font-family:var(--mono);font-weight:700;font-size:13px;cursor:pointer;transition:.12s}
.fb-chip:hover{border-color:var(--line-2);color:var(--text)}
.fb-chip.on{background:var(--watt);color:#0A0A0A;border-color:var(--watt)}
.fb-feel{display:flex;gap:6px}
.fb-face{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);background:var(--surface);font-size:var(--fs-lg);cursor:pointer;transition:.12s;filter:grayscale(.5);opacity:.7}
.fb-face:hover{border-color:var(--line-2);opacity:1}
.fb-face.on{border-color:var(--watt);background:rgba(255,206,0,.10);filter:none;opacity:1}
.fb-notes{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:10px 12px;font-family:var(--font);font-size:var(--fs-base);resize:vertical;margin-top:4px}
.fb-notes:focus{outline:none;border-color:var(--watt-dim)}
.fb-edit{background:transparent;border:1px solid var(--line);color:var(--text-dim);font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:7px;cursor:pointer;transition:.12s}
.fb-edit:hover{border-color:var(--watt);color:var(--watt)}
.fb-sum{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.fb-pill{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line);font-size:14px;font-weight:600}
.fb-pill b{font-family:var(--mono);font-weight:700}
.fb-pill small{color:var(--text-dim)}
.fb-saved{font-size:12px;color:var(--form);font-weight:600}

/* ===== Cartografía real bajo rutas (pedido del dueño: «no se ven los mapas») ===== */
/* Teselas satelitales (Esri): atenuadas un punto para que la ruta dorada mande. */
.tiles-dark,.tiles-sat{filter:brightness(.88) saturate(1.05) contrast(1.02)}
/* Modo oscuro con lift: el CARTO dark_all puro se veía plano/negro; subimos brillo y saturación
   para un gris azulado más premium sin dejar de ser oscuro. */
/* Mapa único CLARO (dueño, 1-ago: el oscuro «se comía el detalle»): Voyager al natural. */
.tiles-mapa{filter:brightness(.96) saturate(1.06)}
/* Conmutador de modo de vista (🛰 Satélite · 🗺 Mapa · 🌙 Oscuro) presente en todos los mapas. */
/* Tesela de fondo de un mini-mapa (posicionada por el servidor, alineada por Mercator). */
.map-tile{position:absolute;z-index:0;pointer-events:none;max-width:none}
/* Atribución OSM (obligatoria) discreta sobre fondo oscuro. */
.heat-map .leaflet-control-attribution{background:rgba(10,10,10,.6);color:#737A87;font-size:9.5px}
.heat-map .leaflet-control-attribution a{color:#9aa0aa}
.map-credit{font-size:10.5px;color:var(--text-faint);margin-top:6px}

/* ===== Zonas del modo visitante (distribución %, sin umbrales) ===== */
.vz-lbl{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);font-weight:700;margin-bottom:6px}
.vz-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:#0d0e11;border:1px solid var(--line)}
.vz-bar span{display:block;height:100%}
.vz-leg{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px;font-size:11.5px;color:var(--text-dim)}
.vz-leg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:4px;vertical-align:-1px}

/* ===== Estado de entrenamiento: aguja sobre el eje desentrenando → sobrecarga ===== */
.ts-top{display:flex;flex-direction:column;gap:3px;margin-bottom:4px}
.ts-label{font-size:var(--fs-lg);font-weight:800;font-style:italic;letter-spacing:-.01em}
.ts-why{font-size:var(--fs-sm);color:var(--text-dim);line-height:1.5}
.ts-axis{position:relative;height:34px;margin:14px 0 6px}
.ts-track{position:absolute;left:0;right:0;top:13px;height:8px;border-radius:var(--r-pill);
          background:linear-gradient(90deg,#5B6472 0%,#2CB8EA 30%,#34D399 55%,#FFCE00 78%,#F2555F 100%)}
.ts-pin{position:absolute;top:5px;width:3px;height:24px;background:#fff;border-radius:2px;
        box-shadow:0 0 0 3px rgba(10,10,10,.85)}
.ts-labels{display:flex;justify-content:space-between;font-size:9.5px;color:var(--text-faint);
           text-transform:uppercase;letter-spacing:.05em;font-weight:700}

/* ===== Foco de carga: tres barras con la marca del reparto recomendado ===== */
.lf-row{display:grid;grid-template-columns:118px 1fr 62px;gap:10px;align-items:center;padding:5px 0}
.lf-n{font-size:var(--fs-sm);color:var(--text-dim)}
.lf-bar{height:11px;background:#1b1d23;border-radius:var(--r-sm);position:relative}
.lf-bar i{display:block;height:100%;border-radius:var(--r-sm) 4px 4px var(--r-sm)}
.lf-tgt{position:absolute;top:-3px;bottom:-3px;width:2px;background:rgba(255,255,255,.55);border-radius:1px}
.lf-p{font-size:var(--fs-sm);text-align:right;color:var(--text-dim)}
@media (max-width:560px){
  .lf-row{grid-template-columns:96px 1fr 48px;gap:8px}
  .ts-labels span:nth-child(2),.ts-labels span:nth-child(4){display:none}
}

/* ═══ CHIP EXPLICATIVO DE MÉTRICA (componente MetricChip) ═══════════════════════════════════════
   Un «?» discreto que abre una PANTALLA EMERGENTE. Es modal y no un desplegable inline porque el
   panel que crecía dentro de la tarjeta deformaba su grid y empujaba a las vecinas (reporte del
   dueño, 28-jul): con `position:fixed` la ayuda no ocupa espacio en el layout y no puede mover
   nada. Vive en app.css y NO en un .razor.css porque la CSS isolation del proyecto web no se
   aplica (App.razor nunca enlaza el bundle .styles.css). */
.mhelp-q{
  display:inline-flex;align-items:center;gap:6px;vertical-align:middle;
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  font:inherit;font-size:var(--fs-xs);color:var(--text-faint);
  text-transform:none;letter-spacing:normal;transition:color .15s
}
.mhelp-q:hover{color:var(--watt)}
.mhelp-q:focus-visible{outline:2px solid var(--watt);outline-offset:3px;border-radius:var(--r-pill)}
.mhelp-q .q{
  display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;flex:0 0 19px;border-radius:50%;
  border:1px solid var(--line-2);font-size:11px;font-weight:800;line-height:1
}
.mhelp-q:hover .q{border-color:var(--watt)}
.mhelp-q .lbl{font-weight:600}

/* ── La pantalla emergente ── */
.mhelp-ov{
  position:fixed;inset:0;z-index:1200;   /* sobre los controles de Leaflet (1000) */
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(6,7,10,.72);backdrop-filter:blur(5px);
  animation:mcFade .14s ease-out
}
.mhelp-panel{
  /* Se aísla del contexto: el chip se ancla dentro de etiquetas que GRITAN (.td-lbl lleva
     text-transform:uppercase) y sin esto la explicación salía entera en mayúsculas. */
  text-transform:none;letter-spacing:normal;text-align:left;
  width:min(520px,100%);max-height:min(78vh,640px);display:flex;flex-direction:column;
  /* `overflow:hidden` es el cinturón: sin él, lo que desborde sobresale por fuera del radio
     y se ve cortado a medias contra la página (bug reportado el 28-jul). */
  overflow:hidden;
  background:var(--surface);border:1px solid var(--line-2);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);
  animation:mcRise .18s cubic-bezier(.16,.84,.44,1);outline:none
}
@keyframes mcFade{from{opacity:0}to{opacity:1}}
@keyframes mcRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .mhelp-ov,.mhelp-panel{animation:none}
}
.mhelp-head{
  flex:0 0 auto;   /* la cabecera nunca se encoge: el que cede es el scroll */
  display:flex;align-items:center;gap:12px;padding:16px 18px 12px;
  border-bottom:1px solid var(--line)
}
.mhelp-t{flex:1;font-weight:800;font-style:italic;font-size:18px;color:var(--text);line-height:1.2}
.mhelp-x{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--text-dim);
  font-size:13px;line-height:1;transition:.15s
}
.mhelp-x:hover{border-color:var(--watt);color:var(--watt)}
.mhelp-x:focus-visible{outline:2px solid var(--watt);outline-offset:2px}
/* El scroll vive DENTRO del panel: una explicación larga no estira la pantalla.
   ⚠ `min-height:0` NO es opcional: en un contenedor flex-column, un hijo con overflow no se encoge
   por debajo de su contenido si no se lo dices, así que el texto largo desbordaba el panel en vez
   de scrollear — se veía cortado por abajo (reporte del dueño con «Resistencia a la fatiga»). */
.mhelp-scroll{
  flex:1 1 auto;min-height:0;
  padding:14px 18px 18px;overflow-y:auto;-webkit-overflow-scrolling:touch
}

.mc-sec{margin-bottom:13px}
.mc-sec .k,.mc-rel .k{
  display:block;text-transform:uppercase;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.07em;
  color:var(--text-faint);margin-bottom:3px
}
.mc-sec p{margin:0;font-size:var(--fs-md);line-height:1.55;color:var(--text-dim)}

/* La lectura personal: lo único del panel que habla de TI, así que se destaca. */
.mc-you{
  margin:13px 0;padding:10px 12px;background:rgba(255,206,0,.07);
  border-left:2px solid var(--watt);border-radius:var(--r-sm);
  font-size:var(--fs-sm);line-height:1.45;color:var(--text);font-weight:600
}

.mc-rel{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.mc-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
.mc-chip{
  font:inherit;font-size:var(--fs-xs);font-weight:700;
  padding:6px 12px;border-radius:var(--r-pill);
  background:var(--surface-3);border:1px solid var(--line-2);color:var(--text-dim)
}
button.mc-chip{cursor:pointer;transition:.15s}
button.mc-chip:hover{border-color:var(--watt);color:var(--watt)}
button.mc-chip:focus-visible{outline:2px solid var(--watt);outline-offset:2px}
.mc-chip.static{opacity:.85}

/* Ayuda contextual del llamador (por qué falta el dato, cómo activarlo). Tono menor que la
   lectura personal: informa, no es el titular. */
.mc-nota{
  margin-top:12px;padding:9px 11px;background:var(--surface-3);
  border-radius:var(--r-sm);font-size:var(--fs-sm);line-height:1.45;color:var(--text-dim)
}

/* Móvil: hoja inferior, el patrón nativo — y los targets a 44 px (regla §6). */
@media (max-width:760px){
  .mhelp-ov{align-items:flex-end;padding:0}
  .mhelp-panel{
    width:100%;max-height:86vh;border-radius:18px 18px 0 0;border-bottom:0;
    animation:mcSheet .2s cubic-bezier(.16,.84,.44,1)
  }
  @keyframes mcSheet{from{transform:translateY(100%)}to{transform:none}}
  @media (prefers-reduced-motion:reduce){.mhelp-panel{animation:none}}
  .mhelp-q{min-height:44px}
  .mhelp-x{width:40px;height:40px}
  button.mc-chip{min-height:44px;display:inline-flex;align-items:center}
}

/* Fila de chips explicativos cuando una tarjeta enseña VARIAS métricas (PMC, estado de forma,
   motor de corredor, W′/CP): en línea y con aire, para que no parezcan una lista de acciones. */
.evo-chips{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:flex-start;margin-top:10px}

/* ═══ DETALLE DE UNA MÉTRICA (componente MetricDetail) ══════════════════════════════════════════
   La pantalla que se abre al tocar una tarjeta: sustituye al dashboard en vez de taparlo, para que
   la serie de 42 días y las comparativas tengan sitio de verdad. */
.mdet{animation:mdetIn .2s cubic-bezier(.16,.84,.44,1)}
@keyframes mdetIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mdet{animation:none}}

.mdet-back{background:none;border:0;cursor:pointer;color:var(--text-dim);font-weight:700;
  font-size:var(--fs-sm);padding:6px 2px;margin-bottom:10px}
.mdet-back:hover{color:var(--watt)}
.mdet-back:focus-visible{outline:2px solid var(--watt);outline-offset:3px;border-radius:var(--r-sm)}

.mdet-hero{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 26px;
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.mdet-hero .k{display:block;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:3px}
.mdet-big b{font-size:50px;font-weight:800;font-style:italic;letter-spacing:-.03em;line-height:1}
.mdet-verd{flex:1;min-width:250px;max-width:56ch;margin:0;color:var(--text-dim);font-size:var(--fs-md)}
.mdet-verd b{color:var(--text)}

.mdet-grid{display:grid;grid-template-columns:1.55fr .95fr;gap:16px;align-items:start}
@media (max-width:900px){.mdet-grid{grid-template-columns:1fr}}
.mdet-h3{font-size:15.5px;font-style:italic;font-weight:800;margin:0 0 3px}
.mdet-sub{color:var(--text-faint);font-size:var(--fs-xs);margin:0 0 13px}

.mdet-cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.mdet-i{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.mdet-i .k{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-faint)}
.mdet-i .v{font-size:21px;font-weight:800;margin-top:3px;letter-spacing:-.01em}
.mdet-i .d{font-size:var(--fs-xs);font-weight:700;margin-top:1px}

.mdet-rel{display:flex;flex-direction:column;gap:8px}
.mdet-r{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 12px;font:inherit;color:inherit;transition:.15s}
button.mdet-r{cursor:pointer}
button.mdet-r:hover{border-color:var(--watt)}
button.mdet-r:focus-visible{outline:2px solid var(--watt);outline-offset:2px}
.mdet-r .n{flex:1;min-width:0;font-weight:700;font-size:var(--fs-sm)}
.mdet-r .go{color:var(--text-faint)}
button.mdet-r:hover .go{color:var(--watt)}
.mdet-r.static{opacity:.75}

/* Lo que el filtro de plausibilidad tiró: se dice, no se esconde. */
.mdet-honest{margin-top:12px;padding:10px 12px;background:rgba(217,164,65,.09);
  border-left:2px solid var(--warn);border-radius:var(--r-sm);
  font-size:var(--fs-sm);line-height:1.45;color:var(--text-dim)}
.mdet-honest b{color:var(--text)}

/* La tarjeta que lleva a alguna parte se comporta como tal. */
/* KPI que abre su detalle (Evolución). Mismo lenguaje que las tarjetas de salud de /hoy: lo
   interactivo tiene que parecer interactivo, sin cambiar la composición del mockup. */
.kpi.kpi-go{cursor:pointer;transition:border-color .16s,transform .16s,box-shadow .16s}
.kpi.kpi-go:hover{border-color:var(--watt);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.4)}
.kpi.kpi-go:focus-visible{outline:2px solid var(--watt);outline-offset:3px}
/* El chevron va en ::before A PROPÓSITO: el ::after de .kpi ya es el riel de color de la izquierda
   y reusarlo lo habría borrado (la clase de colisión que ya mordió con .cmp-row y .mchip). */
.kpi.kpi-go::before{content:"›";position:absolute;right:10px;top:8px;color:var(--mut);font-size:16px;line-height:1;z-index:1}
.td-hc.hc-go{cursor:pointer;transition:border-color .16s,transform .16s,box-shadow .16s}
.td-hc.hc-go:hover{border-color:var(--watt);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.4)}
.td-hc.hc-go:focus-visible{outline:2px solid var(--watt);outline-offset:3px}

/* Móvil: el «volver» del detalle también cumple el mínimo tocable (§6). */
@media (max-width:760px){
  .mdet-back{min-height:44px;display:inline-flex;align-items:center;padding-left:0}
  .mdet-big b{font-size:42px}
}

/* ── 📷 Visor de foto compartido + comentarios (PhotoViewer.razor, 2026-08-02) ─────────────────
   Extraído del <style> local de ActivityDetail al compartirse con el feed de Comunidad; vive aquí
   porque la CSS isolation del proyecto web no se aplica (hallazgo §4). Prefijo pvw- verificado sin
   colisión en ambos app.css. */
.pvw-ov{position:fixed;inset:0;z-index:1300;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px}
.pvw{display:flex;gap:0;max-width:min(94vw,1180px);max-height:88vh;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.6)}
.pvw>img{max-width:min(62vw,820px);max-height:88vh;object-fit:contain;background:#000;display:block}
.pvw-cmts{width:320px;display:flex;flex-direction:column;min-height:0}
.pvw-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.pvw-x{background:none;border:none;color:var(--text-dim);font-size:var(--fs-lg);cursor:pointer;line-height:1;padding:2px 6px}
.pvw-x:hover{color:var(--text)}
.pvw-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.pvw-row{display:flex;gap:7px;align-items:baseline;font-size:var(--fs-sm);line-height:1.45}
.pvw-row>b{color:var(--watt);flex:0 0 auto;font-weight:800}
.pvw-row>span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.pvw-row>button{flex:0 0 auto;background:none;border:0;color:var(--text-faint);cursor:pointer;font-size:11px;padding:2px 5px}
.pvw-row>button:hover{color:var(--form-neg)}
.pvw-input{display:flex;gap:8px;padding:11px 14px;border-top:1px solid var(--line)}
.pvw-input input{flex:1 1 auto;min-width:0;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;color:var(--text);font-family:inherit;font-size:var(--fs-sm);padding:8px 14px}
.pvw-input button{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:0;background:var(--watt);color:#0A0A0A;font-weight:800;cursor:pointer}
.pvw-input button:disabled{opacity:.4;cursor:default}
@media (max-width:760px){
  .pvw{flex-direction:column;max-height:92vh}
  .pvw>img{max-width:94vw;max-height:46vh}
  .pvw-cmts{width:auto;flex:1 1 auto;min-height:0}
  .pvw-input button{width:44px;height:44px} /* tap target móvil */
}

/* ═══ WIZARD DEL PERFIL (ProfileWizard/ProfileStepper) ═══
   Vocabulario propio `pw-*` a propósito: los controles del wizard (tarjetas de deporte,
   interruptores con descripción, repetidores) no existían en el sistema y meterlos en `.field`
   habría cambiado el aspecto de todos los formularios ya validados. Lo que SÍ reutiliza —.card,
   .field, .btn-watt, .seg, .prof-savebar— se usa tal cual. */
.pw-steps{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.pw-step{display:flex;align-items:center;gap:8px}
.pw-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:var(--fs-sm);background:var(--surface-3);color:var(--text-dim)}
.pw-step.on .pw-dot,.pw-step.done .pw-dot{background:var(--watt);color:#06090d}
.pw-lbl{font-size:var(--fs-sm);color:var(--text-dim)}
.pw-step.on .pw-lbl{color:var(--text);font-weight:600}
/* Conector entre puntos del stepper. Se llamaba «pw-bar» y chocaba con la BOTONERA del wizard
   (misma clase, más abajo en el archivo): la barra de acciones heredaba width:26px;height:2px y
   salía aplastada. 5.ª vez de este patrón en el repo — nombre propio y comentario. */
.pw-conn{width:26px;height:2px;background:var(--surface-3);margin:0 2px}

.pw-mini{max-width:560px;margin:0 auto 12px}
.pw-mini-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.pw-mini-now{font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.pw-mini-num{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-faint)}
.pw-track{height:4px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.pw-fill{height:100%;background:var(--watt);transition:width .28s ease}

/* ── Marco de dos columnas del mockup: el recorrido a la izquierda, el paso a la derecha ──
   El carril no es decoración: enseña de un vistazo cuánto falta y deja saltar a lo pendiente.
   El marco va CENTRADO — sin esto el wizard queda pegado a la izquierda con media pantalla
   vacía, que es como se veía antes de este pase. */
.pw-shell{display:grid;grid-template-columns:236px minmax(0,1fr);gap:26px;
  max-width:1080px;margin:0 auto;align-items:start}
.pw-main{min-width:0}

.pw-rail{position:sticky;top:78px;border-right:1px solid var(--line);padding-right:18px}
.pw-rail-h{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:12px}
.pw-rail-list{display:flex;flex-direction:column;gap:2px}
.pw-rail-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 10px;border-radius:var(--r-md);background:none;border:1px solid transparent;
  color:var(--text-dim);font-size:var(--fs-sm);cursor:pointer}
.pw-rail-item:hover{background:var(--surface-2);color:var(--text)}
.pw-rail-item.on{background:var(--surface-2);border-color:rgba(255,206,0,.45);color:var(--text);font-weight:600}
.pw-rail-n{width:24px;height:24px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-size:var(--fs-2xs);font-weight:700;
  background:var(--surface-3);color:var(--text-faint)}
.pw-rail-item.on .pw-rail-n{background:var(--watt);color:#06090d}
.pw-rail-item.done .pw-rail-n{background:var(--form);color:#06090d}
.pw-rail-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pw-rail-prog{margin-top:18px}
.pw-rail-plabel{display:flex;justify-content:space-between;font-size:var(--fs-2xs);
  color:var(--text-faint);margin-bottom:6px}
.pw-rail-track{height:4px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.pw-rail-fill{height:100%;background:var(--watt);transition:width .28s ease}

/* La nota del gateo: sin ella, ver campos aparecer solos se lee como un fallo. */
.pw-bar-hint{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pw-gate{font-size:var(--fs-2xs);color:var(--text-faint)}
.pw-gate b{color:var(--watt);font-weight:700}

/* En pantallas estrechas el carril no cabe: manda el stepper horizontal, que es lo que ya
   servía en el teléfono. Uno u otro, nunca los dos. ProfileStepper pinta «pw-steps» con ≤4
   pasos y «pw-mini» con más — hay que esconder los DOS o el perfil completo (9 pasos) seguiría
   mostrando su barra junto al carril. */
.pw-shell .pw-steps,.pw-shell .pw-mini{display:none}
@media (max-width:900px){
  .pw-shell{grid-template-columns:1fr;gap:0}
  .pw-rail{display:none}
  .pw-shell .pw-steps{display:flex}
  .pw-shell .pw-mini{display:block}
}

.pw-head{text-align:center;margin:16px 0 18px}
.pw-eyebrow{font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--watt)}
.pw-title{font-size:clamp(1.35rem,3vw,1.9rem);font-weight:800;margin:6px 0 4px}
.pw-sub{color:var(--text-dim);max-width:620px;margin:0 auto;font-size:var(--fs-md)}
.pw-card{display:flex;flex-direction:column;gap:16px}
.pw-err{color:var(--form-neg);margin:10px 2px 0}
.pw-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pw-actions{display:flex;align-items:center;gap:12px}
.pw-back,.pw-skip{color:var(--text-dim);cursor:pointer;font-size:var(--fs-sm)}
.pw-back:hover,.pw-skip:hover{color:var(--text)}
.pw-req{color:var(--watt)}
.pw-help{margin-top:5px}
.pw-f{margin:0}
/* Un campo «revelado» es el que aparece al contestar otro. La entrada suave dice que salió por lo
   que acabas de responder, no que estuviera escondido. */
.pw-f.rev,.pw-info.rev,.pw-der.rev{animation:pw-in .22s ease}
@keyframes pw-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pw-f.rev,.pw-info.rev,.pw-der.rev{animation:none}}
/* Y su MARCA permanente: la animación dura un cuarto de segundo, así que quien mira la pantalla
   dos segundos después ya no sabe qué apareció por qué. El filo es lo que la nota del pie promete
   («los campos con borde amarillo…») — sin él, esa frase señalaría algo invisible. */
.pw-f.rev,.pw-tg.rev{border-left:2px solid rgba(255,206,0,.55);padding-left:12px}

.pw-inp{display:flex;align-items:center;gap:8px}
.pw-inp input{flex:1 1 auto;min-width:0}
.pw-unit{font-family:var(--mono);font-size:var(--fs-sm);color:var(--text-faint);flex:0 0 auto}

.pw-info{font-size:var(--fs-sm);color:var(--text-dim);background:var(--surface-2);border-left:2px solid var(--line);
  border-radius:var(--r-sm);padding:9px 12px}
.pw-info.ok{border-left-color:var(--form);color:var(--text)}
.pw-info.warn{border-left-color:var(--warn);color:var(--text)}

.pw-chips{display:flex;flex-wrap:wrap;gap:8px}
.pw-chip{cursor:pointer;user-select:none;padding:8px 14px;border-radius:var(--r-pill);font-size:var(--fs-sm);
  font-weight:600;border:1px solid var(--line);color:var(--text-dim);background:transparent}
.pw-chip.on{border-color:var(--watt);background:rgba(255,206,0,.15);color:var(--watt)}
.pw-seg{width:fit-content;max-width:100%;flex-wrap:wrap}

.pw-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.pw-cd{cursor:pointer;user-select:none;border:1px solid var(--line);border-radius:var(--r-md);padding:14px;
  background:var(--surface-2);transition:border-color .15s,background .15s}
.pw-cd:hover{border-color:var(--text-dim)}
.pw-cd.on{border-color:var(--watt);background:rgba(255,206,0,.1)}
.pw-cd-ic{font-size:22px;line-height:1;margin-bottom:6px}
.pw-cd-t{font-weight:700;font-size:var(--fs-md)}
.pw-cd-d{font-size:var(--fs-xs);color:var(--text-dim);margin-top:3px}

.pw-tg{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;user-select:none;
  border:1px solid var(--line);border-radius:var(--r-md);padding:13px 14px;background:var(--surface-2)}
.pw-tg.on{border-color:var(--watt)}
.pw-tg-t{font-weight:600;font-size:var(--fs-md)}
.pw-tg-d{font-size:var(--fs-xs);color:var(--text-dim);margin-top:3px}
.pw-sw{flex:0 0 auto;width:42px;height:24px;border-radius:var(--r-pill);background:var(--surface-3);position:relative;
  transition:background .15s}
.pw-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--text-dim);transition:transform .15s,background .15s}
.pw-tg.on .pw-sw{background:rgba(255,206,0,.3)}
.pw-tg.on .pw-sw::after{transform:translateX(18px);background:var(--watt)}

.pw-sl{width:100%;accent-color:var(--watt)}
.pw-slv{font-family:var(--mono);color:var(--watt);font-weight:700}

.pw-row{border:1px solid var(--line);border-radius:var(--r-md);padding:12px;background:var(--surface-2);margin-bottom:10px}
.pw-row-h{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-sm);font-weight:600;
  color:var(--text-dim);margin-bottom:10px}
.pw-row-x{cursor:pointer;color:var(--text-faint);font-size:var(--fs-md)}
.pw-row-x:hover{color:var(--form-neg)}
.pw-row-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pw-add{display:inline-block;cursor:pointer;color:var(--watt);font-size:var(--fs-sm);font-weight:600}

.pw-der{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px}
.pw-der-r{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:var(--fs-sm);color:var(--text-dim)}
.pw-der-r b{font-family:var(--mono);color:var(--text)}

/* Lo que falta, con nombre y enlace. Un «3 campo(s)» es un número muerto: dice que hay deuda y no
   dice cuál ni lleva a saldarla. Agrupado por paso porque arreglar suele implicar varios campos del
   mismo sitio, y entrar/salir por cada uno sería peor que la lista. */
.pw-pend{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.pw-pend-h{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:2px}
.pw-pend-i{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;
  color:inherit;font:inherit;transition:border-color .15s,transform .15s}
.pw-pend-i:hover:not(:disabled){border-color:var(--watt);transform:translateX(2px)}
.pw-pend-i:disabled{opacity:.6;cursor:default}
.pw-pend-s{font-weight:700;font-size:var(--fs-sm);flex:0 0 auto}
.pw-pend-f{font-size:var(--fs-sm);color:var(--text-dim);flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-pend-go{color:var(--watt);flex:0 0 auto}

@media (max-width:600px){
  .pw-cards{grid-template-columns:1fr}
  .pw-bar{flex-wrap:wrap}
  .pw-actions{flex:1 1 100%;justify-content:flex-end}
  /* Tap targets ≥44px en móvil (regla §6); el escritorio conserva su densidad. */
  .pw-chip{min-height:44px;display:inline-flex;align-items:center}
  .pw-seg button{min-height:44px}
}

/* (La puerta de una línea al asistente —.prof-wiz/.pwz-*— la sustituyó el mapa de secciones .pmap-*
   el 2026-08-07; sus 5 reglas quedaron sin un solo consumidor y se retiraron.) */

/* ── MAPA DEL PERFIL ─────────────────────────────────────────────────────────
   Las secciones del esquema como filas con estado. Es la superficie principal de /profile:
   el atleta ve de un vistazo qué le falta y entra al asistente por la sección que toca.
   Comparte lenguaje con el carril del asistente (mismo orden, mismos nombres). */
.pmap{margin-bottom:14px}
.pmap-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.pmap-t{font-weight:700;font-size:var(--fs-md)}
.pmap-pct{font-family:var(--mono);font-size:var(--fs-lg);color:var(--watt)}
.pmap-sub{font-size:var(--fs-sm);color:var(--text-dim);margin-bottom:12px}
.pmap-bar{height:6px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;margin-bottom:14px}
.pmap-bar>i{display:block;height:100%;background:var(--watt);border-radius:var(--r-pill);transition:width .3s}
.pmap-rows{display:flex;flex-direction:column;gap:2px}
.pmap-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 10px;
  background:none;border:0;border-radius:var(--r-md);color:inherit;cursor:pointer;
  text-decoration:none;transition:background .15s}
.pmap-row:hover{background:rgba(255,255,255,.05)}
.pmap-ico{flex:0 0 26px;font-size:var(--fs-md);text-align:center}
.pmap-txt{flex:1 1 auto;min-width:0}
/* BLOQUE los dos, no inline: como spans en línea el nombre y los pendientes salían pegados
   («Datos básicosFecha de nacimiento…») y la elipsis no recortaba, así que la fila más larga
   se montaba encima de su chip de estado. */
.pmap-nav{display:block;font-weight:600;font-size:var(--fs-md)}
.pmap-pend{display:block;font-size:var(--fs-sm);color:var(--text-dim);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmap-st{flex:0 0 auto;font-size:var(--fs-xs);padding:3px 9px;border-radius:var(--r-pill);font-weight:700}
.pmap-st.ok{color:var(--form);background:rgba(52,211,153,.12)}
.pmap-st.pend{color:var(--warn);background:rgba(217,164,65,.14)}
.pmap-go{flex:0 0 auto;font-size:var(--fs-lg);color:var(--text-faint)}
.pmap-row:hover .pmap-go{color:var(--watt)}
.pmap-foot{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  font-size:var(--fs-sm);color:var(--text-dim)}
@media(max-width:760px){
  /* Tap target de 44px y sin la línea de pendientes, que a este ancho se corta sin aportar. */
  .pmap-row{padding:13px 8px;min-height:44px}
  .pmap-pend{display:none}
}

/* Ancho del asistente. Eran 820px SIN centrar, pensados para una sola columna: con el carril del
   mockup el marco se estrangulaba y la mitad derecha de la pantalla quedaba muerta. */
.pa-wrap{max-width:1080px;margin:0 auto}
.pa-foot{text-align:center;margin-top:14px;font-size:var(--fs-sm);color:var(--text-dim)}
.pa-foot b{font-family:var(--mono);color:var(--watt)}

/* Detalle sin recorrido (gimnasio, yoga…): sin mapa, las cifras ocupan el ancho completo
   en vez de dejar media pantalla vacía. */
.ad-hero-nomap{grid-template-columns:1fr !important}