/* ============================================================
   Despiece · Ariel Martínez — ar-reactor.web.app
   Monocromo blanco sobre negro, tipografía condensada, aire de plano técnico.
   Los tokens se duplican a propósito: cada proyecto de esta carpeta es autocontenido
   y no comparte el styles.css de la raíz.
   ============================================================ */

:root {
  --bg: #000;
  --fg: #fff;
  --text: rgba(255, 255, 255, 0.68);
  --text-dim: rgba(255, 255, 255, 0.55);
  --text-faint: rgba(255, 255, 255, 0.4);
  --line: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.28);
  --panel: rgba(0, 0, 0, 0.72);

  --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

/* El atributo `hidden` vive en la hoja del NAVEGADOR, así que cualquier regla de autor que fije
   `display` (acá .carga y .sin-webgl usan grid) le gana y el elemento sigue visible aunque esté
   marcado como oculto. Se restituye una vez, para todos. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.app { position: relative; width: 100%; height: 100dvh; }

#escena {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;      /* el canvas se queda el gesto; la página nunca scrollea al arrastrar */
  cursor: grab;
}
#escena:active { cursor: grabbing; }

#anotaciones {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: var(--fg);
}

/* ---------------------------------------------------------- anotaciones SVG */

.cota__linea, .cota__testigo {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.cota__testigo { stroke: rgba(255, 255, 255, 0.22); stroke-dasharray: 3 3; }
.cota__texto {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  fill: #fff;
  paint-order: stroke fill;
  stroke: #000;
  stroke-width: 4px;
  stroke-linejoin: round;
}

.llamada__guia {
  fill: none;
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.llamada__punto { fill: #fff; }
.llamada__globo { fill: #000; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; }
.llamada__num {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: #fff;
}
.llamada__texto {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  fill: rgba(255, 255, 255, 0.82);
  paint-order: stroke fill;
  stroke: #000;
  stroke-width: 3.5px;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------------- HUD */

.hud {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  gap: 18px;
  padding: 18px clamp(14px, 3vw, 30px);
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud--top { top: 0; align-items: flex-start; justify-content: space-between; }
.hud--bottom { bottom: 0; flex-direction: column; align-items: center; gap: 8px; }

.volver {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-top: 4px;
  white-space: nowrap;
}
.volver:hover { color: var(--fg); }

.titulo { text-align: center; flex: 1; min-width: 0; }
.titulo__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.titulo__h1 {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
}
.titulo__sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-dim);
}

.vistas { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line); }

/* --------------------------------------------------------------- controles */

.chip {
  appearance: none;
  border: 0;
  background: var(--bg);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  white-space: nowrap;
}
.chip:hover { background: rgba(255, 255, 255, 0.08); color: var(--fg); }
.chip[aria-pressed='true'] { background: var(--fg); color: #000; }

.barra {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  max-width: min(100%, 1180px);
}

.grupo { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line); }

.icono {
  appearance: none;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background 140ms ease;
}
.icono:hover { background: rgba(255, 255, 255, 0.1); }
.icono svg { width: 17px; height: 17px; fill: currentColor; }
.icono .ic-pause { display: none; }
.icono[aria-pressed='true'] .ic-play { display: none; }
.icono[aria-pressed='true'] .ic-pause { display: block; }

.slider { display: flex; align-items: center; gap: 10px; }
.slider__label, .slider__valor {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.slider__valor { min-width: 42px; text-align: right; color: var(--text-dim); }

input[type='range'] {
  appearance: none;
  -webkit-appearance: none;
  width: clamp(96px, 16vw, 190px);
  height: 22px;
  background: transparent;
  cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track { height: 1px; background: var(--line-strong); }
input[type='range']::-moz-range-track { height: 1px; background: var(--line-strong); }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px; height: 11px;
  margin-top: -5px;
  background: var(--fg);
  border: 0;
  border-radius: 0;
  transform: rotate(45deg);
}
input[type='range']::-moz-range-thumb {
  width: 11px; height: 11px;
  background: var(--fg);
  border: 0;
  border-radius: 0;
}
input[type='range']:disabled { opacity: 0.32; cursor: not-allowed; }

.pista {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  text-align: center;
}
.pista kbd {
  font-family: inherit;
  border: 1px solid var(--line);
  padding: 1px 4px;
  color: var(--text-dim);
}

/* ------------------------------------------------------------------ paneles */

.panel {
  position: absolute;
  width: clamp(230px, 22vw, 292px);
  max-height: calc(100dvh - 250px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.panel--bom { left: clamp(14px, 3vw, 30px); top: 122px; }
.panel--pasos { right: clamp(14px, 3vw, 30px); top: 122px; }

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-soft);
}
.panel__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.panel__toggle {
  appearance: none;
  border: 0;
  background: none;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 2px 0;
}
.panel__toggle:hover { color: var(--fg); }
.panel__body { overflow-y: auto; overscroll-behavior: contain; }

.bom__grupo {
  padding: 9px 13px 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--line-soft);
  position: sticky;
  top: 0;
  background: rgba(0, 0, 0, 0.92);
}
.bom__lista { list-style: none; margin: 0; padding: 0; }

.bom__item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  align-items: baseline;
  width: 100%;
  padding: 7px 13px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 120ms ease;
}
.bom__item:hover, .bom__item:focus-visible { background: rgba(255, 255, 255, 0.09); color: var(--fg); }
.bom__item[aria-current='true'] { background: var(--fg); color: #000; }
.bom__item[aria-current='true'] .bom__pos,
.bom__item[aria-current='true'] .bom__cant { color: rgba(0, 0, 0, 0.62); }

.bom__pos, .bom__cant {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-faint);
}
.bom__nombre { min-width: 0; }
.bom__nota {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-faint);
  margin-top: 1px;
}
.bom__item[aria-current='true'] .bom__nota { color: rgba(0, 0, 0, 0.6); }

.paso {
  display: block;
  width: 100%;
  padding: 10px 13px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.paso:hover { background: rgba(255, 255, 255, 0.09); }
.paso[aria-current='true'] { background: rgba(255, 255, 255, 0.14); color: var(--fg); }
.paso__n {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  display: block;
}
.paso__txt {
  display: block;
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 3px;
  line-height: 1.45;
}

/* -------------------------------------------------------- ficha de la pieza */

.ficha {
  position: absolute;
  left: 50%;
  bottom: 132px;
  transform: translateX(-50%);
  max-width: min(92vw, 520px);
  padding: 11px 15px;
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.ficha__nombre {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ficha__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 2px;
}
.ficha__nota { font-size: 12.5px; color: var(--text-dim); margin-top: 5px; }

/* -------------------------------------------------------- carga y fallbacks */

.carga {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  background: #000;
  z-index: 20;
  transition: opacity 420ms ease;
}
.carga.se-va { opacity: 0; pointer-events: none; }
.carga__barra { display: block; width: 190px; height: 1px; background: var(--line); overflow: hidden; }
.carga__barra i { display: block; height: 100%; width: 34%; background: var(--fg); animation: barrer 1.15s ease-in-out infinite; }
@keyframes barrer { 0% { transform: translateX(-100%); } 100% { transform: translateX(390%); } }
.carga__texto {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.sin-webgl, .noscript {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  padding: 30px;
  text-align: center;
  background: #000;
  z-index: 25;
}
.noscript { position: fixed; }
.sin-webgl h2, .noscript h2 {
  font-family: var(--font-display);
  font-size: 34px;
  text-transform: uppercase;
  margin: 0;
}
.sin-webgl p, .noscript p { color: var(--text-dim); max-width: 44ch; margin: 0 auto; }
.noscript a { border-bottom: 1px solid var(--line-strong); }

/* Adaptive controls: the model owns the remaining space. */
.chip, .panel__toggle, .icono { min-height: 44px; min-width: 44px; }
.chip { font-size: 11px; letter-spacing: .04em; padding: 10px 12px; }
.icono { width: 44px; flex-basis: 44px; }
input[type='range'] { height: 44px; }
input[type='range']::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -10px; }
input[type='range']::-moz-range-thumb { width: 20px; height: 20px; }
.bom__item, .paso { min-height: 44px; }
.bom__nota, .paso__txt { font-size: 12px; color: var(--text); }
.drawer { position: absolute; right: 16px; top: 110px; width: 300px; max-height: calc(100dvh - 220px); display: flex; flex-direction: column; background: #080808; border: 1px solid var(--line-strong); }
.drawer__tabs { display: flex; flex-shrink: 0; }
.drawer__tabs .chip { flex: 1; }
.drawer__tabs [aria-expanded='true'] { color: #000; background: #fff; }
.drawer .panel { position: static; width: 100%; min-height: 0; max-height: none; border: 0; background: none; backdrop-filter: none; overflow-y: auto; }
.drawer .panel__body { flex: 1; min-height: 80px; }
.drawer .panel__head { flex-shrink: 0; }
.panel__toggle { display: none; }
#panel-vista { padding: 14px; gap: 12px; flex-shrink: 1; }
#panel-vista .grupo { flex-wrap: wrap; }
.ficha { position: static; transform: none; width: 100%; max-width: none; background: #151515; flex-shrink: 0; }
.hud--bottom { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.hud--top { padding-top: max(12px, env(safe-area-inset-top)); }
.barra { backdrop-filter: none; background: #080808; }
.pista { max-width: 70ch; }
@media (max-width: 900px) {
  .titulo__sub, .pista { display: none; }
  .hud--top { flex-wrap: wrap; gap: 8px; padding: 12px; }
  .titulo { order: 3; flex-basis: 100%; text-align: left; }
  .titulo__h1 { font-size: 21px; }
  .drawer { top: auto; bottom: 100px; left: 12px; right: 12px; width: auto; max-height: 36dvh; }
  .hud--bottom { padding: 8px 12px max(8px, env(safe-area-inset-bottom)); }
  .barra { width: 100%; gap: 6px; padding: 6px; flex-wrap: nowrap; }
  .slider { flex: 1; min-width: 0; gap: 6px; }
  .slider input { width: 100%; min-width: 50px; }
  .slider__label { display: none; }
  #btn-reset { width: 88px; white-space: normal; font-size: 10px; }
  .slider__valor { min-width: 34px; }
}
@media (orientation: landscape) and (min-width: 620px) and (max-width: 900px) {
  .drawer { top: 105px; bottom: 12px; left: auto; width: 280px; max-height: none; }
  .hud--bottom { right: 300px; }
  .hud--top { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .carga__barra i { animation: none; width: 100%; }
  * { transition-duration: 1ms !important; }
}

#calidad { min-height: 44px; background: #151515; color: #fff; border: 1px solid var(--line-strong); font: inherit; padding: 8px; }
#panel-cfd { padding: 14px; gap: 12px; }
#panel-cfd select { min-height: 40px; width: 100%; background: #151515; color: #fff; border: 1px solid var(--line-strong); font: inherit; padding: 8px; }
#cfd-controles { display: grid; gap: 10px; font-size: 12px; }
#cfd-controles[hidden] { display: none; }
#cfd-controles > label { color: var(--text-dim); margin-bottom: -6px; }
#cfd-controles .grupo .chip { flex: 1; }
.cfd__estado { color: #9ee7ff; font: 10px var(--font-mono); text-transform: uppercase; text-align: right; }
.cfd__intro { margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.cfd__capas { display: grid; gap: 2px; margin: 0; padding: 8px 10px; border: 1px solid var(--line); }
.cfd__capas legend { padding: 0 4px; color: var(--text-dim); }
.cfd__capas label { display: flex; align-items: center; gap: 8px; min-height: 30px; cursor: pointer; }
.cfd__capas input { accent-color: #9ee7ff; width: 16px; height: 16px; }
.cfd__capas input:disabled + * , .cfd__capas label:has(input:disabled) { opacity: .45; cursor: default; }
.cfd__rango { display: grid; gap: 2px; color: var(--text-dim); }
.cfd__rango span { display: flex; justify-content: space-between; }
.cfd__rango input[type='range'] { width: 100%; }
.cfd__resultados { border-top: 1px solid var(--line-strong); padding-top: 4px; }
.cfd__caso { margin: 10px 0 6px; font: 600 13px var(--font-body); color: var(--fg); }
.cfd__badge { font: 9px var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: #ffcf7a; border: 1px solid #ffcf7a66; padding: 1px 5px; vertical-align: 2px; }
.cfd__metricas { margin: 0; display: grid; gap: 7px; font-size: 12px; }
.cfd__metrica { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; }
.cfd__metrica dt { color: var(--text-dim); }
.cfd__metrica dd { margin: 0; font: 12px var(--font-mono); color: var(--fg); text-align: right; font-variant-numeric: tabular-nums; }
.cfd__metrica small { grid-column: 1 / -1; color: var(--text-faint); font-size: 10.5px; line-height: 1.4; }
.cfd__ref { display: block; font-size: 10px; }
.cfd__ref--ok { color: #7de3a2; }
.cfd__ref--fuera { color: #ffcf7a; }
.cfd__metodo summary { cursor: pointer; color: var(--text-dim); min-height: 30px; }
.cfd__metodo p, .cfd__metodo li { color: var(--text-dim); line-height: 1.45; }
.cfd__metodo ul { padding-left: 16px; margin: 0; display: grid; gap: 4px; }
/* Escala de color del CFD: ocupa el lugar de la clave de recorridos mientras el flujo está a la vista. */
.cfd-key { display: grid; gap: 3px; margin-top: 9px; width: min(300px, 100%); font: 11px/1.3 var(--font-mono); color: var(--text); }
.cfd-key[hidden] { display: none; }
.cfd-key__barra { display: block; height: 10px; border: 1px solid var(--line); }
.cfd-key__extremos { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.cfd-key small { color: var(--text-faint); font-size: 10px; }

.busqueda { display: grid; gap: 4px; padding: 10px 13px; font-size: 12px; flex-shrink: 0; }
.busqueda input { width: 100%; min-height: 44px; padding: 8px; background: #151515; color: #fff; border: 1px solid var(--line-strong); font: inherit; }
.pasos-nav { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px; flex-shrink: 0; }
.pasos-nav output { font-size: 12px; text-align: center; }
.chip:disabled { opacity: .4; cursor: default; }
.enlace-pieza { display: block; text-decoration: underline; padding-top: 8px; font-size: 13px; }
.solo-texto { position: absolute; top: 100px; left: 12px; font-size: 11px; z-index: 2; text-decoration: underline; }
.modo-texto { overflow: auto; }
.modo-texto .sin-webgl { position: static; padding: 130px 20px 20px; background: none; }
.modo-texto .sin-webgl h2 { font-size: 24px; }
.modo-texto .drawer { position: static; width: min(100% - 24px, 760px); max-height: none; margin: 0 auto 30px; }
.modo-texto .drawer .panel__body { overflow: visible; }
.modo-texto .hud--bottom, .modo-texto [data-panel='vista'], .modo-texto .solo-texto { display: none; }
#busqueda-estado { padding: 0 13px; }
#presentacion-auto { min-height: 44px; max-width: 100%; background: #151515; color: #fff; font: inherit; }
.presentacion-ayuda { font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.hud, .drawer { transition: opacity .35s ease; }
.app[data-cinematic='playing'] .hud--top, .app[data-cinematic='playing'] .drawer { opacity: .22; transition-duration: 2s; }
/* Feed identity belongs to the process diagram, never to inferred CFD data. */
.flow-key { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 9px; font: 11px/1.4 monospace; }
.flow-key__a { color: #22b8ff; }
.flow-key__b { color: #ff9d2e; }
.flow-key__out { color: #7de3a2; }
.flow-key[hidden] { display: none; }
.flow-key small { flex-basis: 100%; color: #a6a6a6; font-size: 10px; max-width: 360px; }