/* Cuerpo libre · paleta "grafito": el marco es neutro para que los colores de las flechas signifiquen algo. Cada fuerza tiene su
   color (sin rojo, que parecería un error) y nunca depende solo de él: lleva siempre su letra. Contrastes verificados (AA, 4,5:1 o
   más) en claro y oscuro: la letra de cada fuerza sobre el tablero y sobre la tarjeta, y el texto del botón elegido sobre su color. */
:root {
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --pad: #FAFBFC;
  --text: #1C2027;
  --muted: #555E6B;
  --border: #DADFE6;
  --accent: #3B4350;        /* detalles y bordes de foco */
  --accent-fill: #3B4350;   /* relleno de botones: con texto blanco da 10:1 */
  --accent-ink: #FFFFFF;
  --accent-text: #3B4350;
  --warm: #E8A33D;
  --warm-ink: #3A2504;
  --hl: #DCE3EC;            /* relleno del cuerpo pedido */
  --rope: #6B7480;
  --ramp: #EEF1F5;
  --tab: #E4E8EE;
  --error: #B93A30;
  --ok: #1F7A4D;
  /* fuerzas */
  --f-p: #475569;   /* peso: pizarra */
  --f-n: #1D4ED8;   /* normal: azul */
  --f-f: #7C3AED;   /* F: violeta */
  --f-t: #0E7490;   /* tensión (y T₁): cian */
  --f-t2: #4F46E5;  /* T₂: índigo */
  --f-fr: #9A5B06;  /* rozamiento: ámbar oscuro */
  --f-ink: #FFFFFF; /* texto sobre el color de una fuerza */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121418;
    --surface: #1C1F25;
    --pad: #171A1F;
    --text: #E8ECF1;
    --muted: #A9B2BE;
    --border: #343A44;
    --accent: #B8C4D6;
    --accent-fill: #B8C4D6;
    --accent-ink: #121418;
    --accent-text: #C9D3E2;
    --warm: #F2B960;
    --warm-ink: #2A1B04;
    --hl: #3A4352;
    --rope: #9AA3AF;
    --ramp: #232830;
    --tab: #2A3039;
    --error: #F07A6F;
    --ok: #6FD6A0;
    --f-p: #CBD5E1;
    --f-n: #93B4FF;
    --f-f: #C4A5FA;
    --f-t: #5ED3EA;
    --f-t2: #A5A8F8;
    --f-fr: #F2B960;
    --f-ink: #121418;
    color-scheme: dark;
  }
}
.f-P { --fc: var(--f-p); }
.f-N { --fc: var(--f-n); }
.f-F { --fc: var(--f-f); }
.f-T, .f-T1 { --fc: var(--f-t); }
.f-T2 { --fc: var(--f-t2); }
.f-Fr { --fc: var(--f-fr); }

.muted { color: var(--muted); font-size: 0.9rem; }
.top { display: flex; align-items: center; gap: 12px; padding: 8px 0 12px; }
.logo { border-radius: 10px; flex: none; }
h1 { font-size: 1.5rem; line-height: 1.2; color: var(--accent-text); }
.tagline { color: var(--muted); font-size: 0.95rem; }
.intro { color: var(--muted); margin-bottom: 14px; }
h2 { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
[hidden] { display: none !important; }
.card { margin-bottom: 14px; }

/* Modos */
.modos { display: flex; gap: 6px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 14px; }
.modos button { flex: 1; min-height: 44px; border: 0; border-radius: 10px; background: transparent; font-weight: 600; color: var(--muted); }
.modos button[aria-selected="true"] { background: var(--accent-fill); color: var(--accent-ink); }

/* Campos */
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo label, .campo-l { font-size: 0.875rem; font-weight: 700; color: var(--muted); }
.campo select {
  width: 100%; min-height: 48px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 1rem;
}
.fila-tema { display: flex; flex-direction: column; gap: 10px; }
.aciertos { font-weight: 600; font-variant-numeric: tabular-nums; }
.campos-ver { display: flex; flex-direction: column; gap: 12px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones .chip { min-height: 44px; padding: 0 14px; font-weight: 600; }

/* Enunciado y dibujo de la situación */
.ejercicio { display: flex; flex-direction: column; gap: 8px; }
.enunciado { line-height: 1.45; }
.pedido { font-weight: 700; font-size: 1.0625rem; }
.fz-fig { width: 100%; height: auto; max-height: 30vh; max-height: 30dvh; display: block; color: var(--text); }
.fz-blk { fill: var(--surface); stroke: var(--text); stroke-width: 1.6; }
.fz-blk.hl { fill: var(--hl); stroke: var(--accent); stroke-width: 3; }
.fz-l { font: 600 13px system-ui, -apple-system, sans-serif; fill: var(--text); }
.fz-l.c { text-anchor: middle; }
.fz-l.s { font-size: 12px; fill: var(--muted); }
.fz-l.F { fill: var(--f-f); }
.fz-rope { stroke: var(--rope); stroke-width: 2; }
.fz-leg { stroke: var(--text); stroke-width: 3; }
.fz-tab { fill: var(--tab); stroke: var(--text); }
.fz-floor { stroke: var(--text); stroke-width: 2; }
.fz-ramp { fill: var(--ramp); stroke: var(--text); stroke-width: 1.6; }
.fz-pul { fill: var(--surface); stroke: var(--text); stroke-width: 2; }
.fz-dot { fill: var(--text); }
.fz-f line { stroke: currentColor; stroke-width: 2.4; }
.fz-f polygon { fill: currentColor; }
.fz-f.F { color: var(--f-f); }
.fz-arc { fill: none; stroke: var(--text); }
.fz-dash { stroke: var(--muted); stroke-dasharray: 4 3; }
/* velocidad o aceleración: punteada y gris, para no confundirla con una fuerza */
.fz-mov { color: var(--muted); }
.fz-mov line { stroke: currentColor; stroke-width: 2; stroke-dasharray: 5 4; }
.fz-mov polygon { fill: currentColor; }

/* Tablero */
.tablero { display: flex; flex-direction: column; gap: 10px; }
.tb-fuerzas { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-f { min-height: 44px; padding: 0 14px; font-weight: 700; border: 2px solid var(--fc); color: var(--fc); background: var(--surface); }
.tb-f:hover:not([disabled]) { border-color: var(--fc); background: color-mix(in srgb, var(--fc) 8%, var(--surface)); }
.tb-f.puesta { border-style: solid; box-shadow: inset 0 -3px 0 var(--fc); }
.tb-f::after { content: '↗'; margin-left: 6px; font-weight: 400; visibility: hidden; } /* el lugar queda reservado: así los botones no se reacomodan al poner una fuerza */
.tb-f.puesta::after { visibility: visible; }
.tb-f[aria-pressed="true"] { background: var(--fc); color: var(--f-ink); }
.tb-f.bien { outline: 3px solid var(--ok); outline-offset: 1px; }
.tb-f.mal { outline: 3px dashed var(--error); outline-offset: 1px; }
.tb-f[disabled] { cursor: default; }
.tb-pad {
  width: 100%; max-width: 420px; margin: 0 auto; border: 1px solid var(--border); border-radius: 12px; background: var(--pad);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: crosshair;
}
.tb-pad.activo { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.tb-pad.ver { cursor: pointer; touch-action: manipulation; }
.tb-pad svg { display: block; width: 100%; height: auto; }
.tb-pad text { pointer-events: none; }
.tb-v { color: var(--fc); cursor: pointer; }
.tb-v .tb-l { fill: currentColor; font-size: 15px; font-weight: 700; }
.tb-v.sel .fz-f line { stroke-width: 4.2; }
.tb-v.mal line { stroke-dasharray: 5 3; }
.tb-halo { stroke: currentColor; stroke-opacity: 0.22; stroke-width: 13; stroke-linecap: round; fill: none; }
.tb-ins { cursor: pointer; }
.tb-ins circle { fill: var(--text); stroke: var(--surface); stroke-width: 1.5; }
.tb-ins text { fill: var(--surface); font-size: 13px; font-weight: 700; text-anchor: middle; }
.tb-ins.bien circle { fill: var(--ok); }
.tb-ins.mal circle { fill: var(--error); }
.tb-acc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.tb-pista { flex: 1 1 14rem; color: var(--muted); font-size: 0.9rem; line-height: 1.4; min-width: 0; min-height: 4.2em; } /* alto fijo: al cambiar la pista, el tablero no se mueve */

/* Práctica */
.acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.estado { min-height: 1.5rem; margin-bottom: 4px; line-height: 1.4; }
.estado.ok { color: var(--ok); font-weight: 600; }
.estado.mal { color: var(--error); font-weight: 600; }
.margen { margin-bottom: 14px; }

/* ¿Por qué? */
.idea { line-height: 1.45; margin-bottom: 12px; }
.razones { display: flex; flex-direction: column; gap: 8px; }
.razon { border: 1px solid var(--border); border-left: 5px solid var(--fc); border-radius: 10px; }
.r-b { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 12px; }
button.r-b { width: 100%; min-height: 44px; text-align: left; background: transparent; border: 0; border-radius: 9px; color: inherit; }
.r-n { font-weight: 700; color: var(--fc); }
.r-e { font-size: 0.8125rem; color: var(--muted); text-align: right; }
.r-t { grid-column: 1 / -1; font-size: 0.9375rem; line-height: 1.4; }
.razon.no { border-left-style: dashed; }
.razon.no .r-n { color: var(--muted); }
.razon.sel { border-color: var(--fc); box-shadow: 0 0 0 2px var(--fc); }

.foot { margin: 32px 0 16px; display: flex; flex-direction: column; gap: 6px; }