/* Piezas de la interfaz (F3). Cada pieza existe una sola vez y se reutiliza en todas las pantallas; todas están en la
   guía viva (/pruebas/componentes). Solo usa variables de tokens.css (lo comprueba tests/InterfazTest.php).
   Móvil primero: todo lo que se toca mide al menos --toque y responde al tocar (se hunde un poco). */

/* ---------- Botones (T009) ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--toque);
  padding: var(--esp-2) var(--esp-5);
  border: var(--borde) solid var(--linea-fuerte);
  border-radius: var(--radio-pildora);
  background: var(--superficie-2);
  color: var(--texto);
  font-weight: 700;
  font-size: var(--texto-m);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: transform var(--duracion) var(--curva), background var(--duracion) var(--curva), border-color var(--duracion) var(--curva), box-shadow var(--duracion) var(--curva), filter var(--duracion) var(--curva);
}
.boton:active { transform: scale(0.96); }
.boton:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; }
@media (hover: hover) { .boton:hover { background: var(--superficie-3); } }
/* Principal: el degradado de la marca con su brillo. Uno por pantalla. */
.boton--principal { background: var(--degradado-marca); border-color: transparent; color: var(--sobre-acento); box-shadow: var(--brillo); }
@media (hover: hover) { .boton--principal:hover { background: var(--degradado-marca); filter: brightness(1.06); } }
.boton--fantasma { background: transparent; border-color: transparent; color: var(--texto-suave); }
@media (hover: hover) { .boton--fantasma:hover { background: var(--superficie-2); color: var(--texto); } }
.boton--borde { background: transparent; border-color: var(--acento-borde); color: var(--naranja); }
.boton--peligro { background: transparent; border-color: var(--error); color: var(--error); }
.boton--ancho { width: 100%; }
.boton--grande { min-height: 56px; font-size: var(--texto-l); }
.boton--s { min-height: 36px; padding: var(--esp-1) var(--esp-4); font-size: var(--texto-s); }
.boton--icono { width: var(--toque); padding: 0; font-size: var(--texto-l); }
.boton--icono.boton--s { width: 36px; }
.boton:disabled,
.boton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; filter: none; transform: none; }
.botonera { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }

/* ---------- Chips (T009) ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  min-height: 28px;
  padding: 3px var(--esp-3);
  border: var(--borde) solid var(--linea-fuerte);
  border-radius: var(--radio-pildora);
  background: var(--superficie-2);
  color: var(--texto);
  font-family: var(--fuente-datos);
  font-size: var(--texto-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--espaciado-chips);
  white-space: nowrap;
}
.chip--marca { border-color: var(--acento-borde); background: var(--acento-suave); color: var(--naranja-claro); }
.chip--record { border-color: transparent; background: var(--degradado-fuego); color: var(--sobre-velo); }
.chip--ok { border-color: var(--ok); color: var(--ok); background: transparent; }
button.chip { min-height: 36px; cursor: pointer; transition: transform var(--duracion) var(--curva); }
button.chip:active { transform: scale(0.95); }
button.chip[aria-pressed="true"] { background: var(--degradado-marca); border-color: transparent; color: var(--sobre-acento); }
.chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

/* ---------- Títulos de sección: rótulo monoespaciado con línea ---------- */
.seccion-titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin: 0 0 var(--esp-3);
  font-family: var(--fuente-datos);
  font-size: var(--texto-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--espaciado-etiquetas);
  color: var(--naranja);
}
.seccion-titulo::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--linea-fuerte), transparent); }

/* ---------- Tarjetas (T009) ---------- */
.tarjeta {
  display: grid;
  gap: var(--esp-1);
  padding: var(--esp-4);
  border: var(--borde) solid var(--linea);
  border-radius: var(--radio-xl);
  background: var(--superficie);
  color: var(--texto);
  text-decoration: none;
  box-shadow: var(--sombra-s);
}
/* Tarjeta que se toca (un ejercicio, un grupo): responde como en una app */
a.tarjeta,
button.tarjeta { cursor: pointer; text-align: left; font: inherit; transition: transform var(--duracion) var(--curva), border-color var(--duracion) var(--curva); }
a.tarjeta:active,
button.tarjeta:active { transform: scale(0.97); }
@media (hover: hover) { a.tarjeta:hover, button.tarjeta:hover { border-color: var(--acento-borde); } }
.tarjeta--destacada { background: var(--degradado-halo), var(--degradado-superficie); border-color: var(--acento-borde); box-shadow: var(--sombra), var(--brillo); }
.tarjeta-rotulo { font-family: var(--fuente-datos); font-size: var(--texto-xs); letter-spacing: var(--espaciado-etiquetas); text-transform: uppercase; color: var(--naranja); }
.tarjeta-titulo { font-family: var(--fuente-titulos); font-size: var(--texto-l); font-weight: 600; }
.tarjeta-dato { color: var(--texto-suave); font-size: var(--texto-s); }

/* ---------- Avisos (T009) ---------- */
.aviso {
  --tono: var(--info);
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
  padding: var(--esp-3) var(--esp-4);
  border: var(--borde) solid color-mix(in srgb, var(--tono) 45%, transparent);
  border-left-width: 4px;
  border-radius: var(--radio-l);
  background: color-mix(in srgb, var(--tono) 10%, var(--superficie));
  color: var(--texto);
}
.aviso::before { content: "i"; flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  background: var(--tono); color: var(--fondo); font-family: var(--fuente-datos); font-size: var(--texto-xs); font-weight: 600; margin-top: 1px; }
.aviso--ok { --tono: var(--ok); }
.aviso--ok::before { content: "✓"; }
.aviso--alerta { --tono: var(--aviso); }
.aviso--alerta::before { content: "!"; }
.aviso--error { --tono: var(--error); }
.aviso--error::before { content: "×"; }
.aviso-texto { flex: 1; min-width: 0; }
.aviso-cerrar { all: unset; cursor: pointer; color: var(--texto-suave); padding: 0 var(--esp-2); min-height: 24px; }
.aviso-cerrar:focus-visible,
.aviso-accion:focus-visible { outline: 2px solid var(--naranja); }
.aviso-accion { all: unset; cursor: pointer; color: var(--naranja); font-weight: 700; white-space: nowrap; padding: 0 var(--esp-1); }

/* Avisos flotantes: arriba de la barra inferior en el móvil, abajo a la derecha en el PC */
.avisos {
  position: fixed;
  left: var(--esp-4);
  right: var(--esp-4);
  bottom: calc(var(--alto-barra-movil) + var(--esp-3) + env(safe-area-inset-bottom));
  z-index: var(--capa-avisos);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  pointer-events: none;
}
@media (min-width: 701px) { .avisos { left: auto; bottom: var(--esp-4); width: 380px; } }
.avisos .aviso { pointer-events: auto; box-shadow: var(--sombra-l); animation: aviso-entra var(--duracion) var(--curva); }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Campos (T010) ---------- */
.campo { display: grid; gap: var(--esp-1); }
.campo-etiqueta { font-size: var(--texto-s); font-weight: 600; color: var(--texto-suave); }
.campo-ayuda { font-size: var(--texto-s); color: var(--texto-suave); }
.campo-error { font-size: var(--texto-s); color: var(--error); }
.control {
  width: 100%;
  min-height: var(--toque);
  padding: var(--esp-2) var(--esp-4);
  border: var(--borde) solid var(--linea-fuerte);
  border-radius: var(--radio-l);
  background: var(--superficie-2);
  color: var(--texto);
  font-size: var(--texto-control);
  transition: border-color var(--duracion) var(--curva), box-shadow var(--duracion) var(--curva);
}
.control::placeholder { color: var(--texto-suave); }
.control:focus { outline: none; border-color: var(--naranja); box-shadow: 0 0 0 3px var(--acento-suave); }
.control[aria-invalid="true"] { border-color: var(--error); }
textarea.control { min-height: 96px; resize: vertical; line-height: var(--interlineado); }
select.control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-suave) 50%), linear-gradient(135deg, var(--texto-suave) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: var(--esp-7); }
/* Campo con unidad al final («kg», «s») */
.control-unidad { position: relative; display: flex; align-items: center; }
.control-unidad .control { padding-right: var(--esp-7); }
.control-unidad-texto { position: absolute; right: var(--esp-4); color: var(--texto-suave); font-size: var(--texto-s); pointer-events: none; }
/* Interruptor (sí / no) */
.interruptor { display: inline-flex; align-items: center; gap: var(--esp-3); min-height: var(--toque); cursor: pointer; }
.interruptor input { appearance: none; position: relative; width: 48px; height: 28px; margin: 0; border-radius: var(--radio-pildora); background: var(--superficie-3); border: var(--borde) solid var(--linea-fuerte); cursor: pointer; transition: background var(--duracion) var(--curva); }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--texto); transition: transform var(--duracion) var(--curva); }
.interruptor input:checked { background: var(--degradado-marca); border-color: transparent; }
.interruptor input:checked::after { transform: translateX(20px); background: var(--sobre-acento); }
.interruptor input:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }

/* ---------- Número grande con −1 / +1 (T010) ---------- */
.numero { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--esp-3); }
.numero-boton { width: 56px; height: 56px; border-radius: 50%; font-size: var(--texto-xl); font-weight: 600; }
.numero-valor {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: var(--degradado-numero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  caret-color: var(--naranja);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-numero);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.numero-valor:focus { outline: none; }
.numero-valor::-webkit-outer-spin-button,
.numero-valor::-webkit-inner-spin-button { appearance: none; margin: 0; }
.numero-valor { appearance: textfield; -moz-appearance: textfield; }
.numero-unidad { grid-column: 1 / -1; text-align: center; margin-top: calc(var(--esp-2) * -1); color: var(--texto-suave); font-size: var(--texto-s); }
/* El número salta un poco al cambiar */
.numero-valor.salta { animation: numero-salta 0.28s var(--curva-rebote); }
@keyframes numero-salta { 40% { transform: scale(1.12); } }

/* ---------- Deslizador de repeticiones (T011) ---------- */
/* Toda la franja responde al dedo (no solo la bolita); el gesto horizontal no mueve la página. */
.deslizador { position: relative; width: 100%; box-sizing: border-box; padding: var(--esp-7) var(--esp-4) var(--esp-7); touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; border-radius: var(--radio-l); }
.deslizador:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }
.deslizador-pista { position: relative; display: block; height: 10px; border-radius: var(--radio-pildora); background: var(--superficie-3); }
.deslizador-relleno { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--degradado-marca); }
.deslizador-bolita {
  position: absolute;
  top: 50%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--naranja-claro);
  border: 3px solid var(--fondo);
  box-shadow: 0 0 0 2px var(--naranja), var(--brillo);
  transform: translate(-50%, -50%);
  transition: transform var(--duracion) var(--curva-rebote);
}
/* Al arrastrar, la bolita crece y enseña el número encima del dedo */
.deslizador-bolita-numero {
  position: absolute;
  bottom: calc(100% + var(--esp-3));
  left: 50%;
  min-width: 40px;
  padding: var(--esp-1) var(--esp-2);
  border-radius: var(--radio);
  background: var(--degradado-marca);
  color: var(--sobre-acento);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-l);
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity var(--duracion) var(--curva), transform var(--duracion) var(--curva);
  pointer-events: none;
}
.deslizador--arrastrando .deslizador-bolita { transform: translate(-50%, -50%) scale(1.25); }
.deslizador--arrastrando .deslizador-bolita-numero { opacity: 1; transform: translate(-50%, 0); }
/* Marca de la última vez: una raya clara con su texto arriba */
.deslizador-marca { position: absolute; top: -10px; bottom: -10px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--texto); opacity: 0.85; }
.deslizador-marca-texto { position: absolute; bottom: calc(100% + var(--esp-1)); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: var(--texto-xs); font-family: var(--fuente-datos); letter-spacing: var(--espaciado-chips); text-transform: uppercase; color: var(--texto-suave); }
.deslizador--arrastrando .deslizador-marca-texto { opacity: 0; }
/* Números de referencia bajo la pista (cada 5 o cada 10) */
.deslizador-marcas { position: absolute; inset: 0; }
.deslizador-paso { position: absolute; top: calc(100% + var(--esp-4)); transform: translateX(-50%); font-family: var(--fuente-datos); font-size: var(--texto-xs); color: var(--texto-suave); }
/* Comparado con la última vez: al superarla, la pista se enciende con el degradado fuego */
.deslizador[data-comparacion="supera"] .deslizador-relleno { background: var(--degradado-fuego); }
.deslizador[data-comparacion="supera"] .deslizador-bolita { background: var(--oro); box-shadow: 0 0 0 2px var(--coral), var(--brillo); }

/* ---------- Hoja que sube desde abajo y diálogo de confirmar (T012) ---------- */
html.con-hoja,
html.con-hoja body { overflow: hidden; } /* la página de detrás no se mueve */
.hoja-fondo {
  position: fixed;
  inset: 0;
  z-index: var(--capa-hoja);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--velo);
  opacity: 0;
  transition: opacity var(--duracion-pantalla) var(--curva);
}
.hoja-fondo.abierta { opacity: 1; }
.hoja {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  border: var(--borde) solid var(--linea-fuerte);
  border-bottom: 0;
  border-radius: var(--radio-2xl) var(--radio-2xl) 0 0;
  background: var(--degradado-halo), var(--superficie);
  box-shadow: var(--sombra-l);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%);
  transition: transform var(--duracion-pantalla) var(--curva);
  outline: none;
}
.hoja-fondo.abierta .hoja { transform: translateY(0); }
.hoja--arrastrando { transition: none; }
/* Asa y cabecera: zona para arrastrar la hoja (sin scroll del navegador, para que el gesto llegue entero) */
.hoja-asa { flex: none; display: flex; justify-content: center; padding: var(--esp-2) 0 var(--esp-1); touch-action: none; cursor: grab; }
.hoja-asa::before { content: ""; width: 44px; height: 5px; border-radius: var(--radio-pildora); background: var(--linea-fuerte); }
.hoja-cabecera { flex: none; display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-2) var(--esp-3) var(--esp-2) var(--esp-5); cursor: grab; touch-action: none; }
.hoja-titulo { flex: 1; min-width: 0; font-family: var(--fuente-titulos); font-size: var(--texto-l); }
.hoja-cuerpo { flex: 1; min-height: 0; display: grid; align-content: start; gap: var(--esp-3); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--esp-5) var(--esp-5); }
.hoja-pie { flex: none; padding: var(--esp-3) var(--esp-5) var(--esp-4); border-top: var(--borde) solid var(--linea); }
.hoja-botones { display: grid; gap: var(--esp-2); }
.hoja--pequena .hoja-cuerpo { padding-bottom: var(--esp-2); }
/* A pantalla completa en el móvil (el panel de series); en el PC, una hoja alta */
.hoja--completa { height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top); }
@media (min-width: 701px) { .hoja--completa { height: 92dvh; max-height: 92dvh; border: var(--borde) solid var(--linea-fuerte); border-bottom: 0; border-radius: var(--radio-2xl) var(--radio-2xl) 0 0; padding-top: 0; } }

/* ---------- Avatar (F6): la foto o uno de los 5 avatares de la marca ---------- */
.avatar { display: inline-grid; flex: none; width: var(--tam-avatar); height: var(--tam-avatar); border-radius: 50%; overflow: hidden; background: var(--superficie-2); box-shadow: 0 0 0 2px var(--fondo), 0 0 0 3px var(--acento-borde); }
.avatar svg,
.avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* ---------- Imagen de grupo, músculo o ejercicio (F8-F9) ---------- */
.imagen-ejercicio { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radio-l); background: var(--superficie-2); }
.imagen-ejercicio img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sin foto: el mapa del cuerpo con sus músculos (F9), centrado sobre un halo cálido */
.imagen-cuerpo { display: grid; place-items: center; padding: 6%; background: var(--degradado-halo), var(--superficie-2); }
.imagen-cuerpo .cuerpo { width: 100%; height: 100%; }
.imagen-cuerpo .cuerpo-rotulo { display: none; }
/* Con pose (F12): el maniquí en su postura, sobre el mismo halo */
.imagen-pose { display: grid; place-items: center; padding: 3%; background: var(--degradado-halo), var(--superficie-2); }
.imagen-pose .maniqui { width: 100%; height: 100%; }
.imagen-grupo { background: var(--degradado-suelo), var(--superficie-2); }

/* ---------- Desplegable para filtrar (T122) ---------- */
.desplegable { position: relative; display: inline-block; }
.desplegable-boton { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: 40px; padding: 0 var(--esp-3) 0 var(--esp-4); border: var(--borde) solid var(--linea-fuerte); border-radius: var(--radio-pildora); background: var(--superficie-2); color: var(--texto); font-weight: 700; font-size: var(--texto-s); cursor: pointer; transition: transform var(--duracion) var(--curva), border-color var(--duracion) var(--curva); }
.desplegable-boton:active { transform: scale(0.96); }
.desplegable-boton:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }
.desplegable-boton--activo { border-color: var(--acento-borde); background: var(--acento-suave); }
.desplegable-texto { display: inline-flex; align-items: center; gap: var(--esp-2); }
.desplegable-flecha { color: var(--naranja); font-size: var(--texto-xs); transition: transform var(--duracion) var(--curva); }
.desplegable-boton[aria-expanded="true"] .desplegable-flecha { transform: rotate(180deg); }
.desplegable-punto { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
.desplegable-lista { position: absolute; top: calc(100% + var(--esp-1)); left: 0; z-index: var(--capa-menu); min-width: 180px; margin: 0; padding: var(--esp-1); list-style: none; border: var(--borde) solid var(--linea-fuerte); border-radius: var(--radio-l); background: var(--superficie); box-shadow: var(--sombra-l); animation: desplegable-entra var(--duracion) var(--curva); }
.desplegable-lista li { display: flex; align-items: center; gap: var(--esp-2); min-height: var(--toque); padding: 0 var(--esp-3); border-radius: var(--radio); cursor: pointer; font-size: var(--texto-m); }
.desplegable-lista li:hover,
.desplegable-lista li:focus { background: var(--superficie-2); outline: none; }
.desplegable-lista li[aria-selected="true"] { color: var(--naranja); font-weight: 700; }
@keyframes desplegable-entra { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Dificultad: medidor de la ficha y puntos del desplegable (T122, T124) ---------- */
[data-nivel="facil"] { --nivel: var(--nivel-facil); }
[data-nivel="moderado"] { --nivel: var(--nivel-moderado); }
[data-nivel="dificil"] { --nivel: var(--nivel-dificil); }
[data-nivel="elite"] { --nivel: var(--nivel-elite); }
.medidor-nivel { display: inline-flex; align-items: center; gap: var(--esp-2); font-weight: 700; }
.medidor-nivel-rayas { display: inline-flex; gap: 3px; }
.medidor-nivel-rayas span { width: 16px; height: 6px; border-radius: 3px; background: var(--superficie-3); }
.medidor-nivel-rayas span.lleno { background: var(--nivel); box-shadow: 0 0 6px var(--nivel); }

/* ---------- Buscador (T125) ---------- */
.buscador { position: relative; display: flex; align-items: center; }
.buscador-lupa { position: absolute; left: var(--esp-4); display: grid; color: var(--texto-suave); pointer-events: none; }
.buscador-entrada { width: 100%; min-height: 48px; padding: 0 var(--esp-7) 0 calc(var(--esp-4) + 28px); border: var(--borde) solid var(--linea-fuerte); border-radius: var(--radio-pildora); background: var(--superficie-2); color: var(--texto); font-size: var(--texto-control); transition: border-color var(--duracion) var(--curva), box-shadow var(--duracion) var(--curva); }
.buscador-entrada::placeholder { color: var(--texto-suave); }
.buscador-entrada::-webkit-search-cancel-button { appearance: none; }
.buscador-entrada:focus { outline: none; border-color: var(--naranja); box-shadow: 0 0 0 3px var(--acento-suave); }
.buscador:focus-within .buscador-lupa { color: var(--naranja); }
.buscador-borrar { position: absolute; right: var(--esp-1); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--texto-suave); cursor: pointer; }
.buscador-borrar:active { background: var(--superficie-3); }

/* ---------- Mapa del cuerpo (F9) ---------- */
.cuerpo { display: block; width: 100%; height: auto; }
.cuerpo-silueta { fill: var(--superficie-3); }
.cuerpo-musculo { fill: var(--superficie-2); stroke: var(--fondo); stroke-width: 1.2; stroke-linejoin: round; transition: fill-opacity var(--duracion) var(--curva); }
.cuerpo-musculo--activo { filter: drop-shadow(0 0 4px var(--acento-borde)); }
.cuerpo-rotulo { fill: var(--texto-suave); font-family: var(--fuente-datos); font-size: 11px; letter-spacing: var(--espaciado-etiquetas); text-transform: uppercase; }

/* ---------- Maniquí de las ilustraciones (F10, prototipo) ---------- */
.maniqui { display: block; width: 100%; height: 100%; }
.maniqui-silueta { fill: var(--maniqui-piel); } /* sin contorno: las piezas se funden en una sola figura */
.maniqui-palma { fill: var(--maniqui-palma); }
.maniqui-musculo { fill: var(--maniqui-musculo); stroke: var(--fondo); stroke-width: 1.1; stroke-linejoin: round; }
/* Borde de piel por dentro de cada pieza: los músculos quedan dentro de la silueta, como en el mapa del cuerpo */
.maniqui-borde { fill: none; stroke: var(--maniqui-piel); stroke-width: 5; }
.maniqui-musculo--activo { filter: drop-shadow(0 0 3px var(--acento-borde)); }
.maniqui-detalle { fill: none; stroke: var(--fondo); stroke-width: 1.1; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.maniqui-lejos { filter: brightness(0.62); }
.acc-metal { fill: var(--texto-suave); }
.acc-oscuro { fill: var(--superficie-3); }
.acc-disco { fill: var(--linea-fuerte); stroke: var(--fondo); stroke-width: 2; }
.acc-disco-centro { fill: none; stroke: var(--superficie-3); stroke-width: 3; }
.acc-soporte { fill: var(--superficie-3); stroke: var(--fondo); stroke-width: 1; }
.acc-acolchado { fill: var(--superficie-2); stroke: var(--linea-fuerte); stroke-width: 1.5; }
.acc-suelo { fill: var(--linea); }
.acc-cable { fill: none; stroke: var(--texto-suave); stroke-width: 2.5; stroke-linecap: round; }
.acc-anilla { fill: none; stroke: var(--texto-suave); stroke-width: 5; }