/* Laboratorio de Dinámica · paleta "verde musgo". Contrastes verificados (AA) en claro y oscuro.
   Las barras de fuerza nunca dependen solo del color: cada una lleva su rótulo y su valor escritos. */
:root {
  --bg: #F6F9F2;
  --surface: #FFFFFF;
  --text: #1D2A17;
  --muted: #4F6045;
  --border: #D9E3CF;
  --accent: #4C8B2B;        /* detalles y bordes de foco */
  --accent-fill: #3D7421;   /* relleno de botones: con texto blanco da 5,8:1 */
  --accent-ink: #FFFFFF;
  --accent-text: #35661C;   /* acento como texto */
  --fa: #1F6F9A;            /* barra del lado A */
  --fb: #7A3FD0;            /* barra del lado B y flecha de F */
  --fb-text: #6B30C0;       /* violeta como texto: letras F del dibujo */
  --fr: #9A6410;            /* barra del rozamiento */
  --ramp: #EEF3E8;
  --tab: #E4ECDB;
  --rope: #5E6F53;
  --error: #C8453B;
  --ok: #1F7A4D;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11190D;
    --surface: #1B2615;
    --text: #EAF4E2;
    --muted: #B5C9A8;
    --border: #34462B;
    --accent: #8FD36A;
    --accent-fill: #8FD36A;
    --accent-ink: #11190D;
    --accent-text: #A5E083;
    --fa: #7CC0EA;
    --fb: #C3A2F2;
    --fb-text: #C3A2F2;
    --fr: #F2B960;
    --ramp: #243320;
    --tab: #2B3B25;
    --rope: #9DB08F;
    --error: #F07A6F;
    --ok: #6FD6A0;
    color-scheme: dark;
  }
}

.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.375rem; 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; }

/* Selectores */
.campos { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 520px) { .campos { grid-template-columns: 1fr 1fr; } }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo label { 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;
}

/* Figura: queda fija arriba mientras se desplaza la pantalla */
.escena { position: sticky; top: 0; z-index: 5; padding: 8px 12px 10px; box-shadow: 0 6px 12px -8px rgb(0 0 0 / 0.35); }
.fig-wrap { position: relative; }
.fig { min-height: 120px; }
.fz-fig { width: 100%; height: auto; max-height: 36vh; max-height: 36dvh; display: block; color: var(--text); }
.pausa {
  position: absolute; top: 0; right: 0; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--border);
  background: var(--surface); color: var(--accent-text); display: flex; align-items: center; justify-content: center;
}
.pausa:hover { border-color: var(--accent); }
.pausa svg { width: 18px; height: 18px; fill: currentColor; }
.escena .estado { font-size: 0.95rem; line-height: 1.35; margin-top: 4px; }

.estado { min-height: 1.5rem; }
.estado.mal { color: var(--error); font-weight: 600; }

/* Dibujo del sistema */
.fz-blk { fill: var(--surface); stroke: var(--text); stroke-width: 1.6; }
.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(--fb-text); }
.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(--fb); }
.fz-arc { fill: none; stroke: var(--text); }
.fz-dash { stroke: var(--muted); stroke-dasharray: 4 3; }

/* Controles */
.controles { display: flex; flex-direction: column; gap: 6px; }
.ctl { display: flex; flex-direction: column; gap: 0; }
.ctl label { font-size: 0.9375rem; padding-top: 4px; }
.ctl label b { color: var(--accent-text); font-variant-numeric: tabular-nums; }
.ctl input[type="range"] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--accent-fill); }

/* Resultados */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 10px; }
.stat { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat span { font-size: 0.8125rem; color: var(--muted); }
.stat b { font-size: 1.375rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat b.rango { font-size: 1.0625rem; }
.stat.estrella { border-color: var(--accent); }
#nota-t { margin-top: 10px; }

/* ¿Por qué? */
.barra { display: grid; grid-template-columns: 1fr 5.5rem; gap: 4px 10px; align-items: center; margin: 10px 0; font-size: 0.9375rem; }
.barra .b-l { grid-column: 1 / -1; }
.barra b { text-align: right; font-variant-numeric: tabular-nums; }
.b-t { height: 12px; background: var(--border); border-radius: 6px; overflow: hidden; display: block; }
.b-t i { display: block; height: 100%; border-radius: 6px; }
.barra.a i { background: var(--fa); }
.barra.b i { background: var(--fb); }
.barra.fr i { background: var(--fr); }
.porque-texto { margin-top: 12px; line-height: 1.45; }
#porque-nota { margin-top: 8px; }

.foot { margin: 32px 0 16px; display: flex; flex-direction: column; gap: 6px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }