/* ==========================================================================
   CALCULADORAS DE COCKPIT Y DE PIES/CALAS
   Adaptación al sistema de diseño de Emancipation Cycling (con soporte de
   modo claro/oscuro) de dos calculadoras de referencia de ajuste biomecánico.
   Comparten un único wrapper .fit-calc y la misma paleta de seis acentos
   (cyan, amber, purple, emerald, rose, indigo) que la calculadora de rodilla
   (css/knee-calc.css), cada uno con variante -dim (fondo suave) y -mid
   (borde / círculo de icono) además de la variable base (texto/ícono vivo).
   ========================================================================== */

.fit-calc {
  --bg: var(--bg-body);
  --surface: var(--bg-surface);
  --surface-2: var(--bg-body);
  --border: var(--border-color);
  --border-soft: var(--border-color);
  --text: var(--text-main);
  --text-dim: var(--text-muted);
  --text-faint: #94a3b8;

  --cyan: #0e7490;    --cyan-dim: #e0f2f6;    --cyan-mid: #b7e3ec;
  --amber: #a16207;   --amber-dim: #fdf1e0;   --amber-mid: #f5dba8;
  --purple: #6d28d9;  --purple-dim: #f1ecfc;  --purple-mid: #dccbf7;
  --emerald: #15803d; --emerald-dim: #e3f6ec; --emerald-mid: #b9e8cf;
  --rose: #be123c;    --rose-dim: #fbe7ec;    --rose-mid: #f3bfcd;
  --indigo: #4338ca;  --indigo-dim: #e9eafb;  --indigo-mid: #c7cbf5;

  background: var(--bg);
  color: var(--text);
  font-family: var(--font-main);
  padding: 1.75rem 1rem 3.5rem;
}

[data-theme="dark"] .fit-calc {
  --text-faint: #71717a;

  --cyan: #38d6e0;    --cyan-dim: #0f2233;    --cyan-mid: #164a5f;
  --amber: #f2b544;   --amber-dim: #3a2c10;   --amber-mid: #4a3a12;
  --purple: #ab8bf7;  --purple-dim: #1c1533;  --purple-mid: #3a2b66;
  --emerald: #39d59d; --emerald-dim: #0f3327; --emerald-mid: #14503a;
  --rose: #f2758d;    --rose-dim: #3a1a24;    --rose-mid: #4a2230;
  --indigo: #8b93f7;  --indigo-dim: #211f45;  --indigo-mid: #2f2c66;
}

.fit-calc * {box-sizing:border-box;}
.fit-calc body {
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-main);
    padding-inline:16px;
    padding-block:28px 60px;
  }
.fit-calc h1, .fit-calc h2, .fit-calc h3, .fit-calc h4 {font-family:var(--font-main);text-wrap:balance;margin:0;}
.fit-calc p {margin:0;}
.fit-calc .num {font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

.fit-calc .page {max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:22px;}

/* ---------- Encabezado ---------- */
.fit-calc .head {text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center;}
.fit-calc .eyebrow {
    display:inline-flex;align-items:center;gap:6px;
    font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--cyan);background:var(--cyan-dim);border:1px solid var(--cyan-mid);
    padding:5px 12px;border-radius:var(--radius-full);
  }
.fit-calc .head h1 {font-size:clamp(26px,4vw,34px);font-weight:700;color:var(--text);letter-spacing:-0.01em;}
.fit-calc .head .sub {color:var(--text-dim);font-size:14px;max-width:60ch;}
.fit-calc .head .sub b {color:var(--text);font-weight:600;}
.fit-calc .head .crumbs {font-size:11.5px;color:var(--text-faint);margin-top:2px;}
.fit-calc .head .crumbs b {color:var(--text-dim);font-weight:600;}
.fit-calc .head .crumbs a {color:var(--cyan);text-decoration:none;}
.fit-calc .head .crumbs a:hover {text-decoration:underline;}

/* ---------- Selector de disciplina ---------- */
.fit-calc .disc-bar {
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:14px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
    box-shadow:var(--card-shadow);
  }
.fit-calc .disc-bar .lab {font-size:12px;font-weight:600;color:var(--text);}
.fit-calc .disc-note {flex-basis:100%;font-size:11.5px;line-height:1.6;color:var(--text-dim);}
.fit-calc .disc-note b {color:var(--cyan);}

/* ---------- Panel de parámetros ---------- */
.fit-calc .panel {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:18px;
    box-shadow:var(--card-shadow);
  }
.fit-calc .panel-head {
    display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
    font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    color:var(--text-faint);margin-bottom:12px;
  }
.fit-calc .live-badge {
    display:inline-flex;align-items:center;gap:5px;
    color:var(--emerald);background:var(--emerald-dim);border:1px solid var(--emerald-mid);
    padding:3px 9px;border-radius:var(--radius-sm);font-size:10px;
  }
.fit-calc .live-badge::before {content:"";width:6px;height:6px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 3px rgba(57,213,157,.18);}

.fit-calc .group-label {
    font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:var(--text-faint);margin:16px 0 8px;display:flex;align-items:center;gap:9px;
  }
.fit-calc .group-label:first-child {margin-top:0;}
.fit-calc .group-label::after {content:"";flex:1;height:1px;background:var(--border-soft);}

.fit-calc .control-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(122px,1fr));
    gap:10px;
  }
.fit-calc .control {
    background:var(--surface-2);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-md);
    padding:10px 12px;
    display:flex;flex-direction:column;gap:4px;
    transition:border-color .15s;
  }
.fit-calc .control:focus-within {border-color:var(--ctl-color,var(--cyan));}
.fit-calc .control label {font-size:10.5px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;}
.fit-calc .control .sub-val {font-family:var(--font-mono);font-size:9.5px;color:var(--ctl-color,var(--text-faint));}
.fit-calc .control-row {display:flex;align-items:baseline;gap:4px;}
.fit-calc .control input, .fit-calc .control select {
    width:100%;background:transparent;border:0;outline:0;
    font-family:var(--font-mono);font-weight:700;font-size:16px;color:var(--ctl-color,var(--text));
    padding:0;
  }
.fit-calc .control select {cursor:pointer;appearance:none;}
.fit-calc .control select option {background:var(--surface-2);color:var(--text);}
.fit-calc .control .unit {font-size:10.5px;color:var(--text-faint);font-weight:600;white-space:nowrap;}
.fit-calc .angle-hint {margin-top:12px;font-size:11.5px;color:var(--text-faint);line-height:1.5;}
.fit-calc .angle-hint b {color:var(--text-dim);}

/* ---------- Layout ---------- */
.fit-calc .layout {display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:20px;align-items:start;}
@media (max-width:820px){ .fit-calc .layout {grid-template-columns:1fr;} }

.fit-calc .card-title {
    display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
    border-bottom:1px solid var(--border-soft);padding-bottom:12px;margin-bottom:14px;
  }
.fit-calc .card-title h2 {font-size:16px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;}
.fit-calc .badge {font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.05em;padding:3px 9px;border-radius:var(--radius-full);white-space:nowrap;}
.fit-calc .badge-emerald {background:var(--emerald-dim);color:var(--emerald);border:1px solid var(--emerald-mid);}
.fit-calc .badge-amber {background:var(--amber-dim);color:var(--amber);border:1px solid var(--amber-mid);}
.fit-calc .badge-blue {background:var(--indigo-dim);color:var(--indigo);border:1px solid var(--indigo-mid);}
.fit-calc .badge-rose {background:var(--rose-dim);color:var(--rose);border:1px solid var(--rose-mid);}

/* ---------- Columna de métricas ---------- */
.fit-calc .angle-tile {
    background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);
    padding:12px 13px;position:relative;overflow:hidden;margin-bottom:10px;
    border-left:3px solid var(--tile,var(--cyan));
  }
.fit-calc .angle-tile:last-of-type {margin-bottom:0;}
.fit-calc .angle-tile .glow {position:absolute;right:-16px;bottom:-16px;width:66px;height:66px;border-radius:50%;filter:blur(18px);opacity:.25;background:var(--tile);}
.fit-calc .angle-tile .top {display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.fit-calc .angle-tile .name {font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);}
.fit-calc .angle-tile .val {font-family:var(--font-mono);font-size:24px;font-weight:700;line-height:1.1;color:var(--tile);}
.fit-calc .angle-tile .win {font-family:var(--font-mono);font-size:10.5px;color:var(--text-faint);}
.fit-calc .angle-tile .bar {height:5px;border-radius:99px;background:var(--border-soft);margin-top:8px;position:relative;overflow:hidden;}
.fit-calc .angle-tile .bar .zone {position:absolute;top:0;bottom:0;background:var(--tile);opacity:.28;}
.fit-calc .angle-tile .bar .pin {position:absolute;top:-3px;width:3px;height:11px;border-radius:2px;background:var(--tile);box-shadow:0 0 0 2px var(--surface-2);}
.fit-calc .angle-tile .say {font-size:11px;color:var(--text-dim);margin-top:7px;line-height:1.45;}

.fit-calc .breakdown {background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:13px 14px;font-size:12.5px;margin-top:14px;}
.fit-calc .breakdown-row {display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border-soft);gap:10px;}
.fit-calc .breakdown-row:last-child {border-bottom:0;padding-bottom:0;}
.fit-calc .breakdown-row span:first-child {color:var(--text-dim);}
.fit-calc .breakdown-row span:last-child {font-family:var(--font-mono);font-weight:700;text-align:right;}

.fit-calc .status-box {border-radius:var(--radius-md);padding:13px 14px;margin-top:14px;border:1px solid;}
.fit-calc .status-title {display:flex;align-items:center;gap:8px;font-weight:700;font-size:12.5px;margin-bottom:5px;}
.fit-calc .status-title svg {width:15px;height:15px;flex-shrink:0;}
.fit-calc .status-text {font-size:11.5px;line-height:1.55;}

/* ---------- Columna del informe ---------- */
.fit-calc .report {
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:20px clamp(16px,3vw,30px);display:flex;flex-direction:column;gap:26px;
    box-shadow:var(--card-shadow);
  }
.fit-calc section h3 {font-size:17px;font-weight:700;color:var(--text);display:flex;align-items:baseline;gap:8px;}
.fit-calc section h3 span.idx {font-family:var(--font-mono);font-weight:700;}
.fit-calc section > p.lead {font-size:13.5px;line-height:1.65;color:var(--text-dim);margin-top:10px;}
.fit-calc section > p.lead b {font-weight:700;}
.fit-calc section > p.body {font-size:12.5px;line-height:1.65;color:var(--text-dim);margin-top:12px;}
.fit-calc section > p.body b {color:var(--text);font-weight:600;}

.fit-calc .two-col {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
@media (max-width:600px){ .fit-calc .two-col {grid-template-columns:1fr;} }
.fit-calc .info-box {border-radius:var(--radius-md);padding:13px 14px;font-size:12px;line-height:1.55;border:1px solid;}
.fit-calc .info-box h4 {font-size:12px;font-weight:700;margin-bottom:5px;}

.fit-calc .bench-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;}
@media (max-width:600px){ .fit-calc .bench-grid {grid-template-columns:1fr;} }
.fit-calc .bench-card {background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:11px 13px;}
.fit-calc .bench-card .k {font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:4px;}
.fit-calc .bench-card .v {font-family:var(--font-mono);font-size:16px;font-weight:700;}
.fit-calc .bench-card .d {font-size:10.5px;color:var(--text-faint);margin-top:3px;line-height:1.45;}

/* ---------- Simulador cinemático ---------- */
.fit-calc .rig-grid {display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:14px;align-items:start;margin-top:18px;}
@media (max-width:880px){ .fit-calc .rig-grid {grid-template-columns:1fr;} }
.fit-calc .rig-stage {background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:14px;}
.fit-calc #planta {width:100%;height:auto;display:block;aspect-ratio:9/5;}
.fit-calc #lateral {width:100%;height:auto;display:block;aspect-ratio:5/7;}
.fit-calc #rot {width:100%;height:auto;display:block;aspect-ratio:5/4;}
.fit-calc #frontal {width:100%;height:auto;display:block;aspect-ratio:5/7;}
.fit-calc #rig {width:100%;height:auto;display:block;aspect-ratio:5/8;}
.fit-calc #front {width:100%;height:auto;display:block;aspect-ratio:7/6;}

.fit-calc .rig-controls {margin-top:12px;border-top:1px solid var(--border-soft);padding-top:12px;display:flex;flex-direction:column;gap:9px;}
.fit-calc .rig-controls .lab {display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--text-dim);}
.fit-calc .rig-controls .lab b {font-family:var(--font-mono);font-size:14px;color:var(--sl-color,var(--amber));font-weight:700;}
.fit-calc .rig-controls .lab .delta {font-family:var(--font-mono);font-size:11px;color:var(--text-faint);}
.fit-calc .rig-controls input[type=range] {width:100%;accent-color:var(--sl-color,var(--amber));cursor:pointer;}
.fit-calc .rig-actions {display:flex;flex-wrap:wrap;gap:6px;}
.fit-calc .btn {border:1px solid var(--border-soft);background:var(--surface);border-radius:var(--radius-sm);padding:6px 12px;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--text-dim);font-family:var(--font-main);transition:var(--transition-smooth);}
.fit-calc .btn:hover {border-color:var(--amber);color:var(--text);}
.fit-calc .rig-side {display:flex;flex-direction:column;gap:10px;}
.fit-calc .rig-side .bench-grid {grid-template-columns:repeat(2,1fr);margin-top:0;}

.fit-calc .toggle-row {display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.fit-calc .tog {
    border:1px solid var(--border-soft);background:transparent;border-radius:var(--radius-full);
    padding:4px 11px;font-size:11px;cursor:pointer;color:var(--text-faint);font-family:var(--font-main);font-weight:600;
    display:inline-flex;align-items:center;gap:6px;
  }
.fit-calc .tog::before {content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.4;}
.fit-calc .tog[aria-pressed="true"] {color:var(--tc);border-color:var(--tc);}
.fit-calc .tog[aria-pressed="true"]::before {opacity:1;}

/* ---------- Segmentos / modo ---------- */
.fit-calc .mode-bar {margin-top:16px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:13px 14px;}
.fit-calc .mode-head {display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;}
.fit-calc .mode-head .lab {font-size:12px;font-weight:600;color:var(--text);}
.fit-calc .seg {display:inline-flex;flex-wrap:wrap;gap:5px;}
.fit-calc .seg button {
    border:1px solid var(--border-soft);background:transparent;border-radius:var(--radius-full);
    padding:5px 13px;font-size:11.5px;cursor:pointer;color:var(--text-dim);font-family:var(--font-main);
  }
.fit-calc .seg button:hover {border-color:var(--purple);color:var(--text);}
.fit-calc .seg button[aria-pressed="true"] {background:var(--purple);border-color:var(--purple);color:var(--surface);font-weight:700;}
.fit-calc .seg.seg-cyan button[aria-pressed="true"] {background:var(--cyan);border-color:var(--cyan);color:var(--surface);}
.fit-calc .seg.seg-cyan button:hover {border-color:var(--cyan);}
.fit-calc .mode-note {margin-top:9px;font-size:11.5px;line-height:1.6;color:var(--text-dim);}
.fit-calc .mode-note b {color:var(--purple);}
.fit-calc .mode-note em {color:var(--text-faint);font-style:normal;}

.fit-calc .callout-box {display:flex;align-items:flex-start;gap:12px;border-radius:var(--radius-md);padding:13px 14px;border:1px solid;font-size:12.5px;}
.fit-calc .callout-icon {flex-shrink:0;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;margin-top:1px;}
.fit-calc .callout-box h4 {font-weight:700;font-size:13px;margin-bottom:3px;}
.fit-calc .callout-box p {color:var(--text-dim);line-height:1.55;}
.fit-calc .rec-stack {display:flex;flex-direction:column;gap:10px;margin-top:14px;}

/* ---------- Guía de medición ---------- */
.fit-calc .measure-grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;align-items:start;margin-top:14px;}
@media (max-width:760px){ .fit-calc .measure-grid {grid-template-columns:1fr;} }
.fit-calc .measure-figure {background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:12px;}
.fit-calc .measure-figure svg {width:100%;height:auto;display:block;}
.fit-calc .steps {list-style:none;counter-reset:paso;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.fit-calc .steps li {counter-increment:paso;display:grid;grid-template-columns:26px 1fr;gap:11px;font-size:12.5px;line-height:1.55;color:var(--text-dim);}
.fit-calc .steps li::before {
    content:counter(paso);justify-self:start;align-self:start;
    width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
    background:var(--amber-dim);color:var(--amber);border:1px solid var(--amber-mid);
    font-family:var(--font-mono);font-size:12px;font-weight:700;
  }
.fit-calc .steps li b {color:var(--text);font-weight:700;}
.fit-calc .wrong-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;}
@media (max-width:640px){ .fit-calc .wrong-grid {grid-template-columns:1fr;} }
.fit-calc .wrong-card {background:var(--rose-dim);border:1px solid var(--rose-mid);border-radius:var(--radius-md);padding:10px 12px 12px;}
.fit-calc .wrong-card svg {width:100%;max-width:190px;height:auto;display:block;margin:0 auto 6px;}
.fit-calc .wrong-card h5 {margin:0 0 3px;font-size:12px;font-weight:700;color:var(--rose);display:flex;align-items:center;gap:6px;}
.fit-calc .wrong-card p {font-size:11.5px;line-height:1.5;color:var(--text-dim);}
.fit-calc .measure-note {margin-top:14px;font-size:12px;line-height:1.6;color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border-soft);border-left:3px solid var(--cyan);border-radius:var(--radius-sm);padding:11px 13px;}
.fit-calc .measure-note b {color:var(--cyan);font-family:var(--font-mono);font-weight:700;}

.fit-calc .svg-legend {display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px;font-size:11px;color:var(--text-dim);}
.fit-calc .svg-legend span {display:inline-flex;align-items:center;gap:5px;}
.fit-calc .svg-legend span::before {content:"";width:8px;height:8px;border-radius:50%;background:var(--d);flex-shrink:0;}

.fit-calc .leg-caption {font-size:11px;color:var(--text-faint);margin-top:12px;line-height:1.55;}
.fit-calc .leg-caption b {color:var(--text-dim);font-family:var(--font-mono);font-weight:700;}

/* ---------- Tabla de evidencia ---------- */
.fit-calc .ev-table {width:100%;border-collapse:collapse;margin-top:14px;font-size:12px;}
.fit-calc .ev-table th, .fit-calc .ev-table td {text-align:left;padding:9px 10px;border-bottom:1px solid var(--border-soft);vertical-align:top;line-height:1.5;}
.fit-calc .ev-table th {font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);}
.fit-calc .ev-table td:first-child {color:var(--text);font-weight:600;white-space:nowrap;}
.fit-calc .ev-table td.rng {font-family:var(--font-mono);font-weight:700;white-space:nowrap;}
.fit-calc .ev-table td:last-child {color:var(--text-dim);}
.fit-calc .tbl-wrap {overflow-x:auto;}

.fit-calc .src {margin-top:16px;font-size:11px;line-height:1.7;color:var(--text-faint);border-top:1px solid var(--border-soft);padding-top:12px;}
.fit-calc .src b {color:var(--text-dim);}
.fit-calc .src a {color:var(--cyan);text-decoration:none;}
.fit-calc .src a:hover {text-decoration:underline;}