/* PALANCA · laboratorio de biomecánica
   -----------------------------------
   Identidad propia, separada de Coach Ale: papel cuadriculado, azul de
   plano técnico y las secciones numeradas como las figuras de una lámina.
   La idea es que se lea como un apunte de clase y no como una app. */

:root{
  --bg:#e9eff7; --rejilla:rgba(15,98,214,.075);
  --card:#ffffff; --card2:#f2f6fc;
  --line:#d6e0ef; --line2:#bccbe2;
  --tx:#0b1b33; --tx2:#44536b; --tx3:#8695aa;
  --accent:#0f62d6; --accent2:#e2ecfd;
  --sombra:0 1px 2px rgba(11,27,51,.05), 0 10px 28px rgba(11,27,51,.07);
  --r:14px;
  /* Un color por articulación, y el tercero para cuando la carga cruza al
     otro lado y el torque pasa a pedir flexores. */
  --q0:#0f62d6; --c:#b45309; --f:#7c3aed;
  --marca:#e0452a; --cuerpo:#2b3647;
}
:root[data-theme="dark"]{
  --bg:#070b12; --rejilla:rgba(120,170,255,.07);
  --card:#0e141d; --card2:#141c28;
  --line:#1e2838; --line2:#2b3a50;
  --tx:#e9eef6; --tx2:#9fb0c6; --tx3:#6a7b92;
  --accent:#5aa2ff; --accent2:#10233f;
  --sombra:0 0 0 1px rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.5);
  --q0:#5aa2ff; --c:#fbbf24; --f:#c084fc;
  --marca:#ff6b52; --cuerpo:#aab8cc;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  font-size:15px;line-height:1.5;padding-bottom:48px;
  -webkit-font-smoothing:antialiased;
  /* El papel cuadriculado: dos juegos de líneas, uno fino y otro más
     marcado cada cinco, como el milimetrado de verdad. */
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--rejilla) 1px, transparent 1px),
    linear-gradient(90deg, var(--rejilla) 1px, transparent 1px);
  background-size:22px 22px;
  background-attachment:fixed;
}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;
  -webkit-user-select:none;user-select:none}
input,select{font:inherit;color:inherit}
.hidden{display:none !important}
.wrap{max-width:840px;margin:0 auto;padding:0 16px}

/* ---------- cabecera ---------- */
header{position:sticky;top:0;z-index:40;padding-top:env(safe-area-inset-top);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;gap:12px;padding:11px 0}
.marca{display:flex;align-items:center;gap:9px;min-width:0}
.marca svg{width:28px;height:28px;flex:none}
.marca .wm{min-width:0}
.marca .wm b{display:block;font-size:16px;font-weight:800;letter-spacing:.13em;line-height:1}
.marca .wm span{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx3);font-weight:700;margin-top:3px}
.hbar .sp{flex:1}
.iconbtn{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--card);font-size:15px;flex:none}

.volver{display:inline-block;font-size:12.5px;font-weight:700;color:var(--accent);
  padding:12px 0;text-decoration:none}

h1{font-size:22px;margin:2px 0 6px;letter-spacing:-.01em}
.lead{font-size:14.5px;color:var(--tx2);margin:0 0 18px}
.lead b{color:var(--tx)}

/* ---------- la lámina ---------- */
.fig{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;box-shadow:var(--sombra);margin-bottom:12px}
.fig > h2{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:800;
  color:var(--tx3);margin:0 0 3px;display:flex;gap:7px;align-items:baseline}
.fig > h2 i{font-style:normal;color:var(--accent);font-variant-numeric:tabular-nums}
.fig > .sub{font-size:12.5px;color:var(--tx3);margin:0 0 12px;line-height:1.5}
.fig > .sub:last-child{margin-bottom:0}

/* ---------- medidas ---------- */
.medidas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.medidas label{display:block;font-size:11px;font-weight:700;color:var(--tx2);
  margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em}
.medidas input{width:100%;padding:10px 12px;border-radius:11px;background:var(--card2);
  border:1px solid var(--line);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.derivadas{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.derivadas span{font-size:11px;font-weight:600;padding:5px 9px;border-radius:7px;
  background:var(--card2);border:1px solid var(--line);color:var(--tx3)}
.derivadas b{color:var(--tx);font-variant-numeric:tabular-nums}
.aviso{margin-top:12px;border-radius:11px;padding:11px 12px;font-size:12.5px;line-height:1.5;
  background:#f59e0b14;border:1px solid #f59e0b55;color:var(--tx2)}
.aviso b{color:var(--tx)}

/* ---------- lista ---------- */
/* El buscador y los grupos se quedan pegados bajo la cabecera: con
   noventa y nueve filas, perderlos al tercer scroll obliga a subir del
   todo para cambiar de músculo. --hh lo mide app.js, que la cabecera
   cambia de alto según el teléfono. */
.filtros{position:sticky;top:var(--hh,56px);z-index:30;background:var(--card);
  margin:0 -14px;padding:2px 14px 0;border-bottom:1px solid var(--line)}
.buscar{width:100%;padding:11px 13px;border-radius:11px;background:var(--card2);
  border:1px solid var(--line);font-size:15px;margin-bottom:9px}
.chipsg{display:flex;gap:6px;margin-bottom:9px;overflow-x:auto;scrollbar-width:none;
  padding-bottom:1px}
.chipsg::-webkit-scrollbar{display:none}
.chipg{flex:none}
.chipg{font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:8px;
  border:1px solid var(--line);background:var(--card2);color:var(--tx2)}
.chipg.on{border-color:var(--accent);background:var(--accent2);color:var(--accent)}
.gtit{font-size:9.5px;text-transform:uppercase;letter-spacing:.11em;font-weight:800;
  color:var(--tx3);margin:16px 0 0;padding-bottom:5px;border-bottom:1px solid var(--line)}
.gtit:first-child{margin-top:0}
.fila{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:10px 2px;border-bottom:1px solid var(--line);background:none}
.fila .nm{flex:1;min-width:0}
.fila .nm b{display:block;font-size:14px;font-weight:700;line-height:1.25}
/* El subtítulo en una sola línea: tres renglones por fila rompían el
   ritmo de la lista y costaba barrerla con la vista. */
.fila .nm span{display:block;font-size:11px;color:var(--tx3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.fila .chispa{flex:none;width:48px;height:22px;display:block;color:var(--tx)}
.fila .tq{font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--tx2)}
.fila .tq i{font-style:normal;font-size:9.5px;font-weight:700;color:var(--tx3);margin-left:2px}
.fila .tq.no{font-size:10.5px;font-weight:700;color:var(--tx3);letter-spacing:.04em;
  text-transform:uppercase}

/* ---------- ficha ---------- */
/* Las dos lecturas, una por articulación y del color de su curva. Son a
   la vez la leyenda del gráfico, por eso no hay una leyenda aparte. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.duo.sola{grid-template-columns:1fr}
.grande{background:var(--card2);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;min-width:0}
.grande u{display:block;width:20px;height:3px;border-radius:2px;margin-bottom:7px;
  text-decoration:none}
.grande span{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;
  font-weight:800;color:var(--tx3)}
.grande b{font-size:33px;font-weight:800;line-height:1.05;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.duo.sola .grande b{font-size:40px}
.grande i{font-style:normal;font-size:13px;font-weight:700;color:var(--tx3);margin-left:4px}
.grande em{display:block;font-style:normal;font-size:11.5px;color:var(--tx2);margin-top:3px;
  line-height:1.35}
.grande.a u{background:var(--q0)} .grande.a b{color:var(--q0)}
.grande.b u{background:var(--c)}  .grande.b b{color:var(--c)}
.grande.a.flex u{background:var(--f)} .grande.a.flex b{color:var(--f)}

.grafico, .dibujo{width:100%;display:block;color:var(--tx)}
.dibujo{max-height:300px}
.leyenda{display:flex;gap:14px;font-size:11px;font-weight:700;margin-top:6px;flex-wrap:wrap;
  color:var(--tx2)}
.leyenda i{font-style:normal;display:inline-flex;align-items:center;gap:5px}
.leyenda u{text-decoration:none;width:14px;height:3px;border-radius:2px;display:inline-block}

.ctrl{margin-top:14px}
.ctrl label{display:block;font-size:11px;font-weight:700;color:var(--tx2);margin-bottom:5px;
  text-transform:uppercase;letter-spacing:.05em}
.ctrl label b{color:var(--tx);font-variant-numeric:tabular-nums;text-transform:none;
  letter-spacing:0;font-size:12.5px}
/* El recorrido va pegado debajo del dibujo. Antes vivía al final de la
   sección: movías la barra con el dibujo ya fuera de la pantalla, o sea
   el control principal no enseñaba lo que controla. */
.recorrido{display:flex;align-items:center;gap:11px;margin-top:6px}
.recorrido input[type=range]{flex:1;min-width:0;margin:0}
.recorrido .punto{flex:none;min-width:46px;text-align:right;font-size:13px;font-weight:700;
  color:var(--tx3);font-variant-numeric:tabular-nums}
.recorrido .punto b{font-size:17px;font-weight:800;color:var(--tx)}
.play{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent2);border:1px solid var(--line);color:var(--accent);
  font-size:12px;line-height:1;padding-left:2px}
.play.on{background:var(--accent);color:#fff;border-color:var(--accent);padding-left:0}
input[type=range]{width:100%;margin:0;height:26px;accent-color:var(--accent)}

/* El conmutador de plano es un control segmentado de verdad: los chips
   de la lista sirven para filtrar, que es otra cosa. */
.seg{display:inline-flex;gap:3px;padding:3px;border-radius:11px;background:var(--card2);
  border:1px solid var(--line);margin-bottom:10px}
.seg button{font-size:12.5px;font-weight:700;padding:7px 15px;border-radius:8px;
  color:var(--tx3);white-space:nowrap}
.seg button.on{background:var(--accent);color:#fff}

/* Un campo con su unidad dentro, para que el número no quede solo en
   mitad de una caja del ancho de la pantalla. */
.campo label{display:block;font-size:11px;font-weight:700;color:var(--tx2);margin-bottom:5px;
  text-transform:uppercase;letter-spacing:.05em}
.conUnidad{display:flex;align-items:center;gap:7px;max-width:190px;padding:0 12px;
  background:var(--card2);border:1px solid var(--line);border-radius:11px}
.conUnidad input{flex:1;min-width:0;background:none;border:none;padding:11px 0;
  font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.conUnidad input:focus{outline:none}
.conUnidad i{font-style:normal;font-size:12px;font-weight:700;color:var(--tx3)}
/* Los controles del montaje, cada uno con lo que hace. */
/* Las articulaciones: una fila de botones y la ficha de la elegida. */
.planos{display:flex;gap:6px;margin-bottom:10px}
.artbar{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.artchip{font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:8px;
  border:1px solid var(--line);background:var(--card2);color:var(--tx2)}
.artchip.on{border-color:var(--marca);background:color-mix(in srgb,var(--marca) 16%,transparent);
  color:var(--marca)}
.artficha{margin-top:9px;background:var(--card2);border:1px solid var(--line);
  border-radius:12px;padding:11px 12px}
.artficha h3{margin:0;font-size:14px}
.artficha p{margin:1px 0 0;font-size:11.5px;color:var(--tx3)}
.artdatos{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));
  gap:10px;margin-top:10px}
.artdatos > div{min-width:0}
/* El alto mínimo alinea los números cuando una etiqueta ocupa dos líneas
   y la de al lado solo una. */
.artdatos span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.07em;
  font-weight:800;color:var(--tx3);line-height:1.3;min-height:2.3em}
.artdatos b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--tx)}
.plano{margin:10px 0 0;font-size:11px;line-height:1.45;color:var(--tx3)}
.plano b{color:var(--tx2)}
/* La lámina sigue el movimiento, y cada músculo por su cuenta: el muslo
   se enciende con el torque de rodilla y el glúteo con el de cadera, que
   no llegan a su máximo en el mismo punto del recorrido. Antes latían
   todos a la vez con un solo número y eso no decía nada. */
.lamina [data-grupo="pierna"] {--i:var(--i-pierna, 1)}
.lamina [data-grupo="gluteo"] {--i:var(--i-gluteo, 1)}
.lamina [data-grupo="pecho"]  {--i:var(--i-pecho, 1)}
.lamina [data-grupo="hombros"]{--i:var(--i-hombros, 1)}
.lamina [data-grupo="biceps"] {--i:var(--i-biceps, 1)}
.lamina [data-grupo="triceps"]{--i:var(--i-triceps, 1)}
.lamina [data-grupo="espalda"]{--i:var(--i-espalda, 1)}
.lamina [data-grupo="core"]   {--i:var(--i-core, 1)}
/* El suelo no baja de .28: con torque cero —el codo al empezar un curl—
   el músculo que trabaja quedaba con la misma opacidad que uno apagado y
   parecía que no entraba en el ejercicio, cuando lo que pasa es que en
   ese punto no tiene nada que aguantar. */
/* La banda del músculo sobre el hueso que se mueve: se enciende con el
   torque de su articulación, igual que su músculo en la lámina. El suelo
   es alto a propósito —el músculo está ahí aunque en ese punto no tenga
   nada que aguantar—, pero lo bastante bajo para que se note cuándo
   entra de verdad. */
.dibujo [data-musculo]{opacity:calc(.30 + .70*var(--m, 1));
  transition:opacity .06s linear}
.dibujo [data-musculo="rodilla"]{--m:var(--m-rodilla, 1)}
.dibujo [data-musculo="cadera"] {--m:var(--m-cadera, 1)}
.dibujo [data-musculo="tobillo"]{--m:var(--m-tobillo, 1)}
.dibujo [data-musculo="codo"]   {--m:var(--m-codo, 1)}
.dibujo [data-musculo="hombro"] {--m:var(--m-hombro, 1)}
.dibujo [data-musculo="pivote"] {--m:var(--m-pivote, 1)}

.lamina [data-on]{
  fill-opacity:calc(.28 + .62*var(--i, 1)) !important;
  stroke-opacity:calc(.45 + .50*var(--i, 1)) !important;
  transition:fill-opacity .06s linear, stroke-opacity .06s linear}
.ctrl.ajuste{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.ayuda{margin:6px 0 0;font-size:11px;line-height:1.45;color:var(--tx3)}
.extremos{display:flex;justify-content:space-between;gap:10px;font-size:10px;
  color:var(--tx3);margin-top:4px;padding-left:51px;text-transform:uppercase;
  letter-spacing:.07em;font-weight:700}
/* En una pantalla muy estrecha los tres rótulos se tocan y se leen como
   uno solo; el del medio es el prescindible, el ángulo ya está arriba. */
@media (max-width:370px){ .extremos span:nth-child(2){display:none} }

.nota{margin-top:12px;background:var(--accent2);border:1px solid var(--line);
  border-radius:11px;padding:11px 12px;font-size:13px;line-height:1.55;color:var(--tx2)}
.nota b{color:var(--tx)}
.porque{margin-top:10px;background:var(--card2);border:1px solid var(--line);
  border-radius:11px;padding:12px;font-size:13px;line-height:1.55;color:var(--tx2)}
.porque b{display:block;color:var(--tx);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:5px}

/* Más baja que antes: ahora comparte pantalla con la figura que se mueve
   y las dos tienen que verse de una sola mirada. */
.cuerpo{width:100%;height:auto;max-height:188px;display:block;margin:0 auto}
.listas li{font-size:13px;color:var(--tx2);line-height:1.55;margin-bottom:7px}
.listas b{color:var(--tx)}
.btn{display:block;width:100%;text-align:center;padding:12px;border-radius:11px;
  background:var(--accent);color:#fff;font-weight:700;font-size:14.5px;text-decoration:none}
.btn.ghost{background:var(--card2);color:var(--tx2);border:1px solid var(--line)}

/* El par de lecturas se queda en dos columnas hasta en el móvil: son el
   mismo dato dos veces y se comparan de un vistazo. */
@media (max-width:520px){
  .medidas{grid-template-columns:1fr}
  .grande b{font-size:29px}
  .grande em{font-size:11px}
}

/* En pantalla ancha la ficha se abre en dos: a la izquierda lo que se
   mira —la curva y el dibujo—, a la derecha lo que se toca y se lee. */
@media (min-width:940px){
  body.ancho .wrap{max-width:1100px}
  #vista-ficha .dosc{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;align-items:start}
  .dibujo{max-height:380px}
}