/* ============================================================
   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);
  /* Sobre #080808 dan 6,6:1 y 4,9:1: los dos pasan WCAG AA aun en los rótulos de 9-10 px. */
  --text-dim: rgba(255, 255, 255, 0.6);
  --text-faint: rgba(255, 255, 255, 0.5);
  --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: 7px 0;               /* 24 px de alto como mínimo para tocarlo (WCAG 2.5.8) */
  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; }

/* Piezas de la conversión RHD → LHD: mismo ámbar que su resaltado en 3D. */
.bom__conv {
  display: inline-block; margin-left: 6px; padding: 1px 5px; border: 1px solid #ffb020;
  color: #ffb020; font: 500 10px/1.4 'JetBrains Mono', monospace; letter-spacing: 0.04em;
  text-transform: uppercase; vertical-align: middle;
}
.bom__item[aria-current='true'] .bom__conv { color: #6b4500; border-color: #6b4500; }

/* --------------------------------------------------------- Taller y Mañana */
.drawer__tabs .chip { padding: 10px 2px; min-width: 0; }
/* Las fichas se leen: el cajón se ensancha mientras Taller o Mañana están abiertos. */
.drawer:has(#panel-taller:not([hidden])), .drawer:has(#panel-chequeo:not([hidden])), .drawer:has(#panel-diagnostico:not([hidden])) { width: 380px; }
.taller { padding: 0 13px 14px; font-size: 13px; line-height: 1.45; }
.taller__intro, .chequeo__intro { color: var(--text-dim); font-size: 12px; margin: 10px 0; }
.chequeo__intro { padding: 0 13px; flex-shrink: 0; }
.taller__cab { padding: 10px 0 8px; border-bottom: 1px solid var(--line); }
.taller__sistema { margin: 0; font: 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.taller__titulo { margin: 2px 0 4px; font: 600 19px/1.15 var(--font-display); letter-spacing: .01em; }
.taller__piezas { margin: 0; font-size: 11.5px; color: var(--text-faint); }
.taller__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 10px 0; }
.taller__tab { min-height: 36px; padding: 6px 8px; background: none; color: var(--text); border: 1px solid var(--line); font: 500 11px var(--font-body); cursor: pointer; }
.taller__tab:hover { color: var(--fg); background: rgba(255, 255, 255, .06); }
.taller__tab[aria-selected='true'] { background: var(--fg); color: #000; border-color: var(--fg); }
.taller__h { margin: 14px 0 6px; font: 600 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.taller__lista { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text); }
.taller__tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.taller__tabla th, .taller__tabla td { padding: 6px 4px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; font-weight: 400; }
.taller__tabla th { color: var(--text); }
.taller__tabla td { color: var(--fg); }
.taller__tabla thead th { font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
.taller__tabla small { display: block; color: var(--text-faint); font-size: 11px; }
.taller__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.taller__plan td { font-size: 11.5px; }
.taller__funcion, .taller__intervalo { color: var(--fg); margin: 0 0 8px; }
.taller__severo { color: #ffcf7a; font-size: 12px; margin: 6px 0; }
.taller__conv { color: #ffcf7a; border-left: 2px solid #ffb020; padding-left: 10px; margin: 0; }
.taller__vacio { color: var(--text-dim); }
.taller__fuentes { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.taller__pie { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.taller__pie .chip, .taller > .chip { flex: 1; }
.taller__item { display: block; width: 100%; min-height: 44px; padding: 10px 13px; background: none; border: 0; border-bottom: 1px solid var(--line-soft); color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.taller__item:hover, .taller__item:focus-visible { background: rgba(255, 255, 255, 0.09); color: var(--fg); }
.taller__ver { background: none; border: 0; padding: 4px 0; color: var(--fg); font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.fuente { display: inline-block; padding: 0 4px; border: 1px solid var(--line-strong); font: 10px/1.6 var(--font-mono); color: var(--text-dim); white-space: nowrap; }
.fuente--taller { border-style: dashed; color: #ffcf7a; border-color: #ffcf7a77; }
/* Las páginas del manual abren el manual en HTML en esa página (pestaña nueva). */
a.fuente--enlace { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
a.fuente--enlace:hover, a.fuente--enlace:focus-visible { background: var(--fg); color: var(--bg); }
.taller__manual { display: inline-flex; align-items: center; min-height: 32px; margin: 8px 8px 0 0; padding: 0 10px; border: 1px solid var(--line-strong);
  background: none; color: var(--fg); font: 500 11px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.taller__manual:hover, .taller__manual:focus-visible { background: var(--fg); color: var(--bg); }
a.chip { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.falla { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.falla__sintoma { margin: 0 0 4px; color: var(--fg); font-weight: 500; }
.falla dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: 12px; }
.falla dt { color: var(--text-faint); }
.falla dd { margin: 0; color: var(--text); }
.ruidos { list-style: none; padding: 0; gap: 8px; }
.ruido { padding: 8px 10px; border-left: 3px solid var(--line-strong); background: rgba(255, 255, 255, .03); }
.ruido p { margin: 0; }
.ruido__que { color: var(--fg); font-weight: 500; }
.ruido__cuando { font-size: 12px; color: var(--text); }
.ruido__accion { font-size: 11px; color: var(--text-dim); margin-top: 2px !important; }
.ruido__urg { float: right; font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; padding: 0 5px; border: 1px solid currentColor; }
.ruido--baja { border-left-color: #7de3a2; } .ruido--baja .ruido__urg { color: #7de3a2; }
.ruido--media { border-left-color: #ffcf7a; } .ruido--media .ruido__urg { color: #ffcf7a; }
.ruido--alta { border-left-color: #ff9d2e; } .ruido--alta .ruido__urg { color: #ff9d2e; }
.ruido--detener { border-left-color: #ff5a4f; } .ruido--detener .ruido__urg { color: #ff5a4f; }
.ficha__taller { margin-top: 8px; width: 100%; }
.chequeo__progreso { font: 12px var(--font-mono); color: var(--text-dim); }
#chequeo-lista { padding: 0 13px 8px; }
.chequeo__item { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.chequeo__check { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; }
.chequeo__check input { width: 24px; height: 24px; margin: 0; accent-color: #7de3a2; flex-shrink: 0; }
.chequeo__titulo { font-weight: 500; color: var(--fg); }
.chequeo__check:has(input:checked) .chequeo__titulo { color: var(--text-dim); text-decoration: line-through; }
.chequeo__detalle { margin: 2px 0 0 34px; font-size: 12px; color: var(--text); line-height: 1.45; }
.chequeo__item .taller__ver { margin-left: 34px; font-size: 12px; }
.chequeo__pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 13px 12px; flex-shrink: 0; font-size: 11px; color: var(--text-dim); border-top: 1px solid var(--line); }
/* Rótulo del repaso por sistemas en la demostración. */
.demo-rotulo { margin: 0 auto 10px; padding: 8px 14px; background: #080808; border: 1px solid var(--line-strong); border-left: 3px solid #3fd6ff;
  display: flex; flex-direction: column; gap: 2px; width: max-content; max-width: min(520px, 100%); pointer-events: none; }
.demo-rotulo b { font: 600 20px/1.1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.demo-rotulo span { font-size: 12.5px; color: var(--text); }

/* Mañana, paso a paso: un ítem a la vez, botones grandes para usar con una mano. */
.chequeo__recorrer { margin: 10px 13px; flex-shrink: 0; }
.chequeo__recorrer[aria-pressed='true'] { background: none; color: var(--fg); border: 1px solid var(--line-strong); }
.chequeo__intro[hidden], .chequeo__pie[hidden] { display: none; }
.chequeo__guia { padding: 4px 13px 14px; }
.chequeo__paso { margin: 0 0 6px; font: 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.chequeo__barra { height: 2px; background: var(--line); margin-bottom: 12px; }
.chequeo__barra i { display: block; height: 100%; background: #7de3a2; transition: width .3s; }
.chequeo__guia-titulo { margin: 0 0 8px; font: 600 22px/1.15 var(--font-display); }
.chequeo__hecho { font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: #7de3a2; border: 1px solid currentColor; padding: 0 5px; vertical-align: middle; }
.chequeo__detalle--guia { margin: 0 0 14px; font-size: 14px; line-height: 1.55; }
.chequeo__guia-botones { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 6px; }
.chequeo__guia .taller__lista { margin-bottom: 14px; }
.chip--fuerte { background: #fff; color: #000; border-color: #fff; }
.chip--fuerte:hover, .chip--fuerte:focus-visible { background: #d9d9d9; color: #000; }
@media (prefers-reduced-motion: reduce) { .chequeo__barra i { transition: none; } }

@media (max-width: 900px) {
  .drawer:has(#panel-taller:not([hidden])), .drawer:has(#panel-chequeo:not([hidden])), .drawer:has(#panel-diagnostico:not([hidden])) { width: auto; max-height: 52dvh; }
}
@media (orientation: landscape) and (min-width: 620px) and (max-width: 900px) {
  .drawer:has(#panel-taller:not([hidden])), .drawer:has(#panel-chequeo:not([hidden])), .drawer:has(#panel-diagnostico:not([hidden])) { width: 340px; max-height: none; }
}

/* ------------------------------------------------------------ Diagnóstico */
/* Seis pestañas no entran en una fila de 300 px: dos filas de tres. */
.drawer__tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
.diag__form { padding-bottom: 6px; }
.diag__fila { display: flex; gap: 6px; }
.diag__fila input { flex: 1; min-width: 0; }
.diag__fila .chip { flex-shrink: 0; }
.diag__rapidos { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 13px 8px; flex-shrink: 0; }
.diag__rapidos .chip { min-height: 32px; padding: 4px 8px; font-size: 10.5px; letter-spacing: .02em; text-transform: none; }
.diag__estado { margin: 0; padding: 6px 13px; font-size: 11.5px; color: var(--text-dim); border-top: 1px solid var(--line); flex-shrink: 0; }
.diag__estado:empty { display: none; }
.diag { padding: 0 13px 14px; font-size: 13px; line-height: 1.45; }
.diag__res { padding: 10px 0 8px 10px; border-bottom: 1px solid var(--line); border-left: 2px solid #3fd6ff; margin-top: 8px; }
.diag__titulo { margin: 2px 0 2px; font: 600 16px/1.2 var(--font-display); }
.diag__res .ruido { margin-top: 8px; }
.diag__acciones { display: flex; gap: 14px; margin: 6px 0 0; }

/* Ciclo de cuatro tiempos (vista «Motor»): un casillero por cilindro, en el orden del bloque. */
.ciclo { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; background: #080808; border: 1px solid var(--line); width: min(560px, 100%); }
.ciclo[hidden] { display: none; }
.ciclo__cil { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.ciclo__cil li { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 4px; border: 1px solid var(--line); color: var(--text-dim); text-align: center; position: relative; overflow: hidden; }
.ciclo__cil li b { display: block; font-weight: 400; color: var(--text-faint); }
.ciclo__cil li i { position: absolute; left: 0; bottom: 0; height: 2px; background: currentColor; }
.ciclo__cil li[data-t='0'] { color: #ff8a3d; border-color: #ff8a3d; }
.ciclo__cil li[data-t='1'] { color: rgba(255, 255, 255, .45); }
.ciclo__cil li[data-t='2'] { color: #8fbaff; }
.ciclo__cil li[data-t='3'] { color: var(--fg); }
.ciclo .slider input { flex: 1; }
@media (max-width: 900px) { .ciclo { padding: 6px 8px; } .ciclo__cil li { font-size: 9px; letter-spacing: 0; padding: 4px 2px; } }