/* ═══════════════════════════════════════════════════════════
   YouPlanFit · Design System V2 — Grupo D: plan / rutina / ejercicios
   ═══════════════════════════════════════════════════════════
   Requiere design-v2-tokens.css cargado antes. Escopado a #rutina y a los
   selectores .anotar__* del cuaderno de cargas (#anotarCaja, que ya
   comparte el chasis .sesion migrado en el Grupo A — ver TRAINING_V2_MAP.md
   para la evidencia de esa decisión).

   REGLA DURA #1: cero cambios de HTML, cero cambios en renderRutina/
   renderPrograma/renderSemanario/registro.js. Todo lo de abajo reestiliza
   el DOM real que ya pintan esas funciones.

   REGLA DURA #2: nunca declarar `display` sobre `.panel`, `.tab` ni
   `.hidden` — el print de styles.css depende de la cascada exacta entre
   esas tres reglas (ver bloque @media print al final de este archivo).

   REGLA DURA #3: cero cambios de estructura/orden/cantidad de `.ejc`
   dentro de cada `.panel` — registro.js empareja carga↔ejercicio por
   índice de aparición en el DOM, no por id.

   REGLA DURA #4: #rutina es la ÚNICA sección visible al imprimir. Este
   archivo TERMINA con su propio @media print que neutraliza colores V2 a
   tinta sobre papel — sin eso el PDF sale con texto claro sobre fondo
   blanco, ilegible.
   ═══════════════════════════════════════════════════════════ */

#rutina{
  position:relative;padding:70px 0;overflow:hidden;
  background:
    radial-gradient(circle at 15% 0%,rgba(19,185,231,.07),transparent 32%),
    linear-gradient(180deg,var(--v2-bg),var(--v2-bg2) 65%,var(--v2-bg));
  color:var(--v2-text);
}
#rutina .shead .tag{
  display:inline-block;color:#81dff8;font-size:.68rem;letter-spacing:.2em;
  font-weight:700;text-transform:uppercase;margin:0 0 14px;
}
#rutina .shead h2{
  font-family:var(--v2-display);color:var(--v2-text);
  letter-spacing:-.02em;line-height:1.05;font-size:clamp(1.9rem,4vw,2.8rem);
  margin:0 0 14px;
}
#rutina .shead p{color:var(--v2-muted)}

/* ── 1. Reglas del plan ── */
#rutina .rule{
  background:linear-gradient(180deg,rgba(18,39,52,.93),rgba(8,23,32,.95));
  border:1px solid rgba(90,184,222,.24);border-left:4px solid var(--v2-cyan);
  border-radius:14px;
}
#rutina .rule--edad{border-left-color:var(--v2-amber);background:linear-gradient(180deg,rgba(247,184,68,.1),rgba(8,23,32,.95))}
#rutina .rule b{color:var(--v2-muted)}
#rutina .rule span{color:var(--v2-text)}
#rutina .rule--ancha span{color:var(--v2-muted)}
#rutina .avi{background:rgba(10,25,33,.6);border:1px solid var(--v2-line);color:var(--v2-muted)}
#rutina .avi__ico{color:var(--v2-cyan2)}
#rutina .avi--menor{background:rgba(19,185,231,.1);border-color:rgba(19,185,231,.35)}
#rutina .avi--menor .avi__ico{color:var(--v2-cyan2)}
#rutina .avi__tit{color:var(--v2-text)}
#rutina .avi--completa{background:rgba(10,25,33,.6)}

/* ── 2. Semanario ── */
#rutina .semanario__dias{
  border:1px solid var(--v2-line);background:rgba(10,25,33,.6);
  box-shadow:var(--v2-sombra-sm);border-radius:18px;
}
#rutina .dia{border-left-color:var(--v2-line)}
#rutina .dia:first-child{border-left:0}
#rutina .dia--entreno{color:var(--v2-text)}
#rutina .dia--entreno .dia__n{color:var(--v2-muted)}
#rutina .dia--entreno .dia__ej{color:var(--v2-muted)}
#rutina .dia--entreno:hover{background:rgba(19,185,231,.08)}
#rutina .dia--libre{background:rgba(255,255,255,.03);color:var(--v2-muted)}
#rutina .dia--libre .dia__n{color:#6f8996}
#rutina .dia--libre .dia__tit{color:var(--v2-muted)}
#rutina .dia--on.dia--entreno{background:linear-gradient(135deg,var(--v2-blue),var(--v2-cyan));color:#fff;border-left-color:transparent}
#rutina .dia--on.dia--entreno .dia__n{color:#fff}
#rutina .dia--on.dia--entreno .dia__ej{color:rgba(255,255,255,.82)}
#rutina .dia--on.dia--entreno:hover{filter:brightness(1.06)}
#rutina .dia__hoy{background:rgba(19,185,231,.15);color:var(--v2-cyan2)}
#rutina .dia--on.dia--esHoy .dia__hoy{background:rgba(255,255,255,.2);color:#fff}
#rutina .semanario__arranque,
#rutina .semanario__pie{color:var(--v2-muted)}
#rutina .semanario__arranque b,
#rutina .semanario__pie b{color:var(--v2-text)}
#rutina .cal__caja{background:rgba(10,25,33,.6);border-color:var(--v2-line)}
#rutina .cal__tit{color:var(--v2-text)}
#rutina .cal__hora{background:#0a1921;border-color:var(--v2-line);color:var(--v2-text)}
#rutina .cal__hora:hover{border-color:var(--v2-cyan)}
#rutina .cal__hora small{color:var(--v2-muted)}

/* ── 3. Programa de 12 semanas (fuera del PDF: la parte más segura) ── */
#rutina .card.plan{
  background:linear-gradient(180deg,rgba(18,39,52,.93),rgba(8,23,32,.95));
  border:1px solid rgba(90,184,222,.24);border-radius:20px;
  box-shadow:var(--v2-sombra-sm),inset 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(18px);
}
#rutina #planTitulo i{color:var(--v2-cyan2)}
#rutina .plan__sello{color:var(--v2-cyan2)}
#rutina .plan__nota,
#rutina .note{color:var(--v2-muted)}
#rutina .bloque{background:rgba(10,25,33,.6);border-color:var(--v2-line)}
#rutina .bloque--cerrado{background:transparent;border-color:var(--v2-line)}
#rutina .bloque__n{color:var(--v2-cyan2)}
#rutina .bloque__tit{color:var(--v2-text);font-family:var(--v2-display)}
#rutina .bloque__rango{color:var(--v2-muted)}
#rutina .bloque__promesa{color:var(--v2-text)}
#rutina .bloque__detalle{color:var(--v2-muted);border-bottom-color:var(--v2-line)}
#rutina .semana__n{background:var(--v2-panel-solid);color:var(--v2-text);border:1px solid var(--v2-line)}
#rutina .semana--cerrada .semana__n{background:transparent;color:var(--v2-muted);border-style:dashed}
#rutina .semana__tit{color:var(--v2-text)}
#rutina .semana--cerrada .semana__tit{color:var(--v2-muted)}
#rutina .semana--hoy .semana__n{background:linear-gradient(135deg,var(--v2-blue),var(--v2-cyan));color:#fff;border:0}
#rutina .semana--hoy .semana__tit{color:var(--v2-text)}
#rutina .semana__txt{color:var(--v2-muted)}
#rutina .semana__txt--velo{color:var(--v2-cyan2)}

/* ── 4. Semana en curso ── */
#rutina .hoy{background:linear-gradient(135deg,rgba(13,147,176,.18),rgba(19,185,231,.12));color:var(--v2-text);border:1px solid rgba(90,184,222,.24)}
#rutina .hoy__n{background:var(--v2-cyan2);color:var(--v2-bg)}
#rutina .hoy__txt{color:rgba(245,248,250,.82)}
#rutina .hoy__sig{color:var(--v2-cyan2)}

/* ── 5. Venta PRO pegada al programa ── */
#rutina .mejora{background:linear-gradient(135deg,rgba(13,147,176,.22),rgba(19,185,231,.14));color:var(--v2-text);border:1px solid rgba(90,184,222,.3)}
#rutina .mejora__txt span{color:rgba(245,248,250,.78)}
#rutina .mejora__btn{
  background:linear-gradient(135deg,var(--v2-blue),var(--v2-cyan));
  border-color:transparent;color:#fff;
}

/* ── 6. Pestañas y paneles de día (sin tocar `display`) ── */
#rutina .tab{
  background:rgba(10,25,33,.6);border:1px solid var(--v2-line);color:var(--v2-muted);
}
#rutina .tab:hover{border-color:var(--v2-cyan);color:var(--v2-cyan2)}
#rutina .tab.on{
  background:linear-gradient(135deg,var(--v2-blue),var(--v2-cyan));
  border-color:transparent;color:#fff;
}
#rutina .tab--cerrada{border-style:dashed;color:var(--v2-muted)}
#rutina .panel{
  background:linear-gradient(180deg,rgba(18,39,52,.93),rgba(8,23,32,.95));
  border:1px solid rgba(90,184,222,.24);border-radius:20px;
  box-shadow:var(--v2-sombra-sm),inset 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(18px);
}
#rutina .panel__head{border-bottom-color:var(--v2-line)}
#rutina .panel__head span{color:var(--v2-muted)}

/* Días bloqueados: mismo mecanismo (velo difuminado + tarjeta), solo V2 */
#rutina .cerrado__barra{background:rgba(255,255,255,.08)}
#rutina .muro{background:linear-gradient(180deg,rgba(8,23,32,.4),rgba(8,23,32,.85) 42%)}
#rutina .muro__eyebrow{color:var(--v2-cyan2)}
#rutina .muro__tit{color:var(--v2-text)}
#rutina .muro__txt{color:var(--v2-muted)}
#rutina .muro__pie{color:var(--v2-muted)}
#rutina .btn--fantasma{background:transparent;border-color:var(--v2-line);color:var(--v2-text)}
#rutina .btn--fantasma:hover{background:rgba(19,185,231,.08);border-color:var(--v2-cyan)}
#rutina .muro .btn:not(.btn--fantasma){
  background:linear-gradient(135deg,var(--v2-blue),var(--v2-cyan));border:0;color:#fff;
}

/* ── 7. Tarjetas de ejercicio — mismo mecanismo de --g, solo remapeado ── */
#rutina .ejc{
  border:1px solid var(--v2-line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--g) 14%,#0d1c27),#0a1921 62%);
}
#rutina .ejc:hover{box-shadow:0 8px 22px rgba(0,0,0,.35);border-color:var(--g)}
#rutina .ejc[data-grupo="pecho"],
#rutina .ejc[data-grupo="hombros"]     { --g:#13b9e7 }
#rutina .ejc[data-grupo="espalda"],
#rutina .ejc[data-grupo="biceps"]      { --g:#1f6cff }
#rutina .ejc[data-grupo="triceps"]     { --g:#9d72ff }
#rutina .ejc[data-grupo="cuadriceps"],
#rutina .ejc[data-grupo="femoral"]     { --g:#ff5f86 }
#rutina .ejc[data-grupo="pantorrilla"] { --g:#f7b844 }
#rutina .ejc[data-grupo="core"]        { --g:#3ad37a }
#rutina .ejc[data-grupo="potencia"]    { --g:#4cd6ff }
#rutina .ejc[data-grupo="movilidad"]   { --g:#3ad37a }
#rutina .ejc[data-grupo="cardio"]      { --g:#9db2bd }
#rutina .ejc__n{color:#fff}
#rutina .ejc__nombre{color:var(--v2-text)}
#rutina .ejc__meta{color:var(--v2-cyan2)}
#rutina .ejc__meta i{color:var(--v2-muted)}
#rutina .ejc__desc{border-left-color:var(--v2-line);color:var(--v2-muted)}
#rutina .ejc__grupo{background:color-mix(in srgb,var(--g) 18%,#0a1921);color:var(--g)}

/* ── 8. Cuaderno inline (columna de la tabla, dentro de .ejc) ── */
#rutina .ej-anotar{
  border:1px solid var(--v2-line);background:#0a1921;color:var(--v2-text);
}
#rutina .ej-anotar:hover{border-color:var(--v2-cyan);background:rgba(19,185,231,.08)}
#rutina .ej-anotar--hecho{border-color:var(--v2-cyan);background:rgba(19,185,231,.12);color:var(--v2-cyan2)}
#rutina .ej-anotar--sube{border-color:var(--v2-green);background:rgba(58,211,122,.1);color:var(--v2-green)}
#rutina .ej-anotar--sugerido{color:var(--v2-muted)}
#rutina .ej-anotar--sugerido:hover{color:var(--v2-text)}
#rutina .ej-registro__prev{color:var(--v2-muted)}
#rutina .ej-registro__na{color:var(--v2-line)}
#rutina .ej-registro__pro{color:var(--v2-cyan2)}

/* ── 9. #anotarCaja — chasis .sesion compartido (Grupo A), solo contenido propio ── */
#anotarCaja .anotar__ultimo{color:var(--v2-muted)}
#anotarCaja .anotar__n{color:var(--v2-muted)}
#anotarCaja .anotar__campo span{color:var(--v2-muted)}
#anotarCaja .anotar__campo input{
  background:#0a1921;border:1px solid var(--v2-line);border-radius:12px;
  color:var(--v2-text);font:inherit;
}
#anotarCaja .anotar__campo input:focus{
  outline:none;border-color:var(--v2-cyan);box-shadow:0 0 0 3px rgba(19,185,231,.18);
}

/* ── Responsive ── */
@media (max-width:900px){
  #rutina .plan__grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  #rutina{padding:50px 0}
}

/* ── Motion: presentacional, respeta reduced-motion (ya cubierto por la
   regla global de styles.css, no se duplica aquí). ── */

/* ═══════════════════════════════════════════════════════════
   IMPRESIÓN — REGLA DURA #4
   #rutina es la única sección visible al imprimir. Neutraliza todo el
   color/fondo V2 a tinta sobre papel, EXCLUYENDO .pdf-cab/.pdf-agua/
   .pdf-pie (que ya tienen sus propios colores de marca para papel,
   definidos en styles.css y que deben prevalecer). No se declara
   `display` sobre nada aquí — solo color/fondo/sombra.
   ═══════════════════════════════════════════════════════════ */
@media print{
  #rutina,
  #rutina *:not(.pdf-cab):not(.pdf-cab *):not(.pdf-pie):not(.pdf-pie *):not(.pdf-agua){
    background:transparent !important;
    background-image:none !important;
    color:#000 !important;
    border-color:#bbb !important;
    box-shadow:none !important;
    text-shadow:none !important;
    backdrop-filter:none !important;
  }
  #rutina .ejc[data-grupo]{ --g:#000 }
}