:root {
  /* ---------- Paleta corporativa Eniun PC Lab ----------
     azul = interfaz e interacción · verde = correcto/completado · ámbar = orientación, ayuda o atención · rojo = error */
  --navy: #17324D;          /* azul principal: cabecera y cabeceras de panel */
  --blue: #2F6F9F;          /* azul de interacción */
  --blue-soft: #E8F2F8;     /* azul claro de selección */
  --bg: #F4F7F9;            /* fondo general */
  --surface: #FFFFFF;       /* superficies y paneles */
  --bench: #EEF2F4;         /* zona de trabajo */
  --ink: #263238;           /* texto principal */
  --muted: #66737D;         /* texto secundario */
  --line: #D7E0E5;          /* bordes */
  --disabled: #A8B1B7;      /* deshabilitado */
  --ok: #2E7D5B;            /* éxito */
  --ok-soft: #E7F4ED;       /* éxito suave */
  --err: #B84A4A;           /* error */
  --err-soft: #FBECEC;      /* error suave */
  --hint: #D9972B;          /* aviso / orientación */
  --hint-soft: #FFF4DC;     /* aviso suave */

  /* Derivados de la paleta (mismo tono), solo donde el color base no da contraste suficiente. */
  --on-dark: #FFFFFF;          /* texto sobre los azules */
  --on-dark-muted: #C9D6E2;    /* texto secundario sobre el azul principal (8,9:1) */
  --ok-ink: #297052;           /* texto verde sobre éxito suave (5,3:1) */
  --hint-ink: #8B611C;         /* texto ámbar sobre aviso suave (5,0:1) */
  --ok-line: #B7DCC8;          /* borde de tarjeta instalada */
  --hint-line: #EFD39A;        /* borde del bloque de orientación */
  /* Resaltados sobre la placa (fondo oscuro): versiones claras de azul, verde y rojo. */
  --on-board-blue: #8FBBDB;
  --on-board-ok: #6CC39A;
  --on-board-err: #E58A8A;
  /* Para transparencias: los mismos colores en RGB. */
  --navy-rgb: 23 50 77;
  --blue-rgb: 47 111 159;
  --hint-rgb: 217 151 43;
  --board-blue-rgb: 143 187 219;
  --board-ok-rgb: 108 195 154;
  --board-err-rgb: 229 138 138;

  --radius: 12px;
  --shadow: 0 1px 2px rgb(var(--navy-rgb) / 8%), 0 4px 14px rgb(var(--navy-rgb) / 6%);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
}

h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.topbar :focus-visible, .zoom :focus-visible { outline-color: var(--on-dark); }

/* ---------- Distribución ---------- */
/* La rejilla de la práctica (mesa + instrucciones) está en css/practice-workbench.css. */

/* ---------- Cabecera ---------- */

.topbar {
  padding: 9px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--navy);
  color: var(--on-dark);
}
/* Marca: icono + nombre + descripción. Si falta sitio, se recorta antes la descripción que el nombre. */
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; }
.brand__logo { width: 46px; height: 46px; flex: none; object-fit: contain; }
.brand__text { min-width: 0; }
.brand__name { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
/* H1 de la página (el tema), con el aspecto discreto de una línea de cabecera. */
.brand__title { font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--on-dark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tools { flex: none; display: flex; gap: 6px; }
.tool {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 8px;
  background: transparent;
  color: var(--on-dark);
  cursor: pointer;
}
a.tool, a.btn { text-decoration: none; }

/* ---------- Paneles ---------- */

.panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel__head { padding: 11px 16px; background: var(--navy); color: var(--on-dark); }
.panel__head h2 { font-size: 17px; }
.panel__body { padding: 16px; overflow-y: auto; display: grid; gap: 14px; align-content: start; }

/* Imagen de un componente con sus marcas (mesa y arrastre): la marca gira con la imagen. */
.figure { position: relative; display: inline-block; line-height: 0; transition: rotate .2s; }
.figure img { display: block; width: 100%; height: auto; pointer-events: none; }
.figure--pending { font-size: 11.5px; line-height: 1.3; color: var(--muted); border: 1px dashed var(--line); border-radius: 6px; padding: 6px 8px; }
.mark { position: absolute; width: 0; height: 0; display: none; }
/* Ayudas de orientación (ámbar): halo sobre el triángulo real de la CPU y halo sobre la esquina de
   destino del socket. Mismo dibujo en los dos; el del socket es solo un aro de la interfaz. */
.mark::after, .guide::after {
  content: ""; position: absolute; left: -11px; top: -11px; width: 22px; height: 22px;
  border-radius: 50%; border: 2px solid var(--hint);
  box-shadow: 0 0 0 3px rgb(var(--hint-rgb) / 28%), 0 0 10px rgb(var(--hint-rgb) / 50%);
  animation: guide-pulse 3s ease-in-out infinite;
}
.component-mark-on .ghost .mark { display: block; }
.scene__hints { position: absolute; inset: 0; z-index: 105; pointer-events: none; }
.guide { position: absolute; width: 0; height: 0; }
/* En las ranuras DIMM la guía es más pequeña: la ranura es estrecha. */
.guide--ram::after { left: -9px; top: -9px; width: 18px; height: 18px; }
.guide--m2::after { left: -8px; top: -8px; width: 16px; height: 16px; }
.guide[hidden] { display: none; }
/* La guía del socket pulsa un poco después: la mirada va primero a la CPU y luego a su destino. */
.guide::after { animation-delay: .45s; }
/* Sobre su sitio y bien orientada: las dos ayudas pasan a verde. */
.ghost.is-valid .mark::after, .guide.is-valid::after {
  border-color: var(--on-board-ok);
  box-shadow: 0 0 0 3px rgb(var(--board-ok-rgb) / 35%), 0 0 12px rgb(var(--board-ok-rgb) / 60%);
  animation: none;
}
/* Dos pulsos suaves cada 3 s (por debajo de 3 destellos por segundo). */
@keyframes guide-pulse {
  0%, 30%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgb(var(--hint-rgb) / 28%), 0 0 10px rgb(var(--hint-rgb) / 50%); }
  8%, 22% { transform: scale(1.35); box-shadow: 0 0 0 5px rgb(var(--hint-rgb) / 40%), 0 0 16px rgb(var(--hint-rgb) / 75%); }
  15% { transform: scale(1); }
}
/* Herramienta en la mano: la punta (no el centro) es la que se coloca sobre el elemento. */
.ghost--tool img { display: block; width: 100%; height: auto; }
.ghost__tip { position: absolute; width: 0; height: 0; }
.ghost--tool.is-valid .ghost__tip::after {
  content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  box-shadow: 0 0 0 2px rgb(var(--board-ok-rgb) / 90%), 0 0 10px rgb(var(--board-ok-rgb) / 80%);
}

/* Paso */
.step__title { font-size: 20px; line-height: 1.25; }
.step__text { color: var(--ink); }
.callout { border-radius: 10px; padding: 12px 14px; background: var(--bg); }
.callout h4 { display: flex; align-items: center; gap: 8px; font-size: 14.5px; margin-bottom: 6px; }
.callout ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.callout--do { background: var(--blue-soft); }
.callout--do h4 { color: var(--blue); }
.callout--tip { background: var(--hint-soft); }
.callout--tip .icon { color: var(--hint-ink); }

/* Subpasos: una sola acción visible y un indicador discreto */
.action { position: relative; padding: 12px 14px; border-radius: 10px; background: var(--blue-soft); }
/* Pulso de atención (MME.attention): halo azul suave alrededor de las instrucciones, de una a cuatro veces (cuatro
   al comenzar el montaje), y el panel vuelve a su aspecto normal. Azul = interfaz/información. */
.action.attention--1 { animation: attention-pulse .9s ease-in-out 1; }
.action.attention--2 { animation: attention-pulse .9s ease-in-out 2; }
.action.attention--4 { animation: attention-pulse .9s ease-in-out 4; }
@keyframes attention-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--blue-rgb) / 0%); }
  50% { box-shadow: 0 0 0 2px var(--blue), 0 0 0 7px rgb(var(--blue-rgb) / 22%); }
}
.attention__tag {
  position: absolute; right: 10px; top: 0; translate: 0 -55%;
  padding: 2px 9px; border-radius: 999px; background: var(--blue); color: var(--on-dark);
  font-size: 12px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 2px 6px rgb(var(--navy-rgb) / 25%);
  animation: attention-tag 1.8s ease-in-out both; pointer-events: none;   /* la duración la fija el pulso (panels.js) */
}
@keyframes attention-tag { 0% { opacity: 0; } 12%, 85% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .action.attention { animation: none; box-shadow: 0 0 0 2px var(--blue), 0 0 0 6px rgb(var(--blue-rgb) / 18%); }
  .attention__tag { animation: none; }
}
/* Señal de zona de trabajo (antes del acercamiento): halo ámbar suave sobre donde se va a actuar.
   Ámbar = elemento físico sobre el que actuar. */
.zone-signal {
  position: absolute; border-radius: 12px; pointer-events: none;
  border: 2px solid var(--hint); box-shadow: 0 0 0 4px rgb(var(--hint-rgb) / 28%), 0 0 16px rgb(var(--hint-rgb) / 45%);
  animation: zone-signal .35s ease-in-out 2 alternate;
}
@keyframes zone-signal { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .zone-signal { animation: none; } }
.action__title { font-size: 18px; font-weight: 700; margin-top: 2px; }
.action__text { margin-top: 4px; }
.action__detail { margin-top: 6px; font-size: 14px; color: var(--muted); }
/* Acción preparada pero aún sin interacción (falta un asset). */
.action__pending { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--surface); border: 1px dashed var(--line); font-size: 13.5px; color: var(--muted); }
.action__pending .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.callout--orientation { background: var(--hint-soft); border: 1px solid var(--hint-line); }
.callout--orientation h4 { color: var(--hint-ink); }
.callout__note { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hint-line); font-size: 13.5px; color: var(--muted); }
.pin1-sample { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2.5px solid var(--hint); box-shadow: 0 0 0 2px rgb(var(--hint-rgb) / 25%); }
.message { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; }
.message:empty { display: none; }
.message .icon { width: 20px; height: 20px; margin-top: 1px; }
.message--ok { color: var(--ok); }
.message--error { color: var(--err); padding: 10px 12px; border-radius: 10px; background: var(--err-soft); }
.message--error p { color: var(--ink); }
.message--info .icon { color: var(--blue); }

.more { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 14px; }
.more summary { cursor: pointer; font-weight: 600; color: var(--blue); }
.more summary .icon { width: 16px; height: 16px; vertical-align: -3px; }
.more p { margin-top: 6px; color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
}
.btn--primary { background: var(--blue); color: var(--on-dark); }
.btn--secondary { background: var(--surface); color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }
.btn--secondary:hover { background: var(--blue-soft); }

/* Cierre y revisión del montaje */
.finale__actions { display: grid; gap: 8px; }
/* Botón con una segunda línea que explica qué hay detrás («Revisar montaje»). */
.btn--two-lines { flex-direction: column; gap: 1px; padding-block: 8px; }
.btn--two-lines > span { display: inline-flex; align-items: center; gap: 8px; }
.btn--two-lines small { font-size: 12.5px; font-weight: 400; opacity: .9; }
.btn.is-pulsing { animation: attention-pulse .9s ease-in-out 2; }
.step__hint { font-size: 14px; color: var(--muted); }
.review { display: grid; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--blue-soft); }
.review__title { font-size: 17px; }
.review__status { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ok-ink); }
.review__status .icon { width: 18px; height: 18px; color: var(--ok); }
.review__points { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.review-extras { font-size: 13.5px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.review-extra { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--blue); font: inherit; font-weight: 600; cursor: pointer; }
.review-extra:hover { border-color: var(--blue); }
.review-extra.is-selected { background: var(--blue-soft); border-color: var(--blue); }

/* Información técnica (en «Revisar montaje»): datos de este equipo frente a conceptos generales. */
.tech-toggle { justify-self: start; padding: 4px 0; border: 0; background: none; color: var(--blue); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.tech-toggle:hover { text-decoration: underline; }
.tech { display: grid; gap: 10px; }
.tech__category { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tech__block { display: grid; gap: 6px; padding: 10px 12px; border-radius: 8px; background: var(--surface); }
.tech__block h5 { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tech__block--here { border-left: 3px solid var(--blue); }
.tech__block--here h5 { color: var(--blue); }
.tech__block--concepts { border: 1px dashed var(--line); }
.tech__block--concepts h5 { color: var(--muted); }
.tech__rows { display: grid; gap: 3px; margin: 0; font-size: 13.5px; }
.tech__rows div { display: grid; grid-template-columns: minmax(0, 40%) 1fr; gap: 8px; }
.tech__rows dt { color: var(--muted); }
.tech__rows dd { margin: 0; font-weight: 600; }
.tech__note { font-size: 13.5px; }
.tech__concept strong { font-size: 13.5px; }
.tech__concept p { font-size: 13.5px; color: var(--ink); }
.tech__list { margin: 0; padding-left: 18px; font-size: 13.5px; display: grid; gap: 2px; }
.tech__remark { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; font-weight: 600; padding: 8px 10px; border-radius: 8px; background: var(--hint-soft); }
.tech__remark .icon { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--hint-ink); }

/* Preparación de la práctica */
.prep { padding: 10px 12px; border-radius: 10px; background: var(--blue-soft); }
.prep__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.prep__board { font-weight: 700; }
.prep__specs { font-size: 14px; color: var(--muted); }
.prep__list { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 14.5px; }
/* Pictograma + texto: el icono (decorativo) en una columna fija, alineado con la primera línea. El trazo se ajusta
   al tamaño para que todos se vean con el mismo grosor (~1,6 px). */
.prep__item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; }
.prep__item .icon { width: 22px; height: 22px; color: var(--blue); stroke-width: 1.75; }
.prep__item--board { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 6px; }
.prep__item--board .icon { width: 32px; height: 32px; stroke-width: 1.2; }

/* Confirmación (reiniciar) */
.confirm { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; max-width: 340px; box-shadow: var(--shadow); color: var(--ink); background: var(--surface); }
.confirm::backdrop { background: rgb(var(--navy-rgb) / 35%); }
.confirm h2 { font-size: 18px; }
.confirm p { margin: 6px 0 14px; color: var(--muted); font-size: 14.5px; }
.confirm__actions { display: flex; justify-content: flex-end; gap: 8px; }

.done { display: flex; gap: 12px; padding: 14px; border-radius: 10px; background: var(--ok-soft); }
.done > .icon { color: var(--ok); width: 28px; height: 28px; }
.done { align-items: center; }
.done p { font-size: 17px; font-weight: 700; color: var(--ok-ink); }

/* ---------- Zona de montaje ---------- */

.workbench {
  position: relative;
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bench);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
}
.workspace { position: absolute; inset: 0; padding: 14px; display: flex; overflow: hidden; }
.workspace.is-zoomed { overflow: auto; cursor: grab; }
.workspace.is-zoomed:active { cursor: grabbing; }

.scene { position: relative; flex: none; margin: auto; }
.scene__board { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.scene__installed, .scene__mechanisms { position: absolute; inset: 0; pointer-events: none; }

/* Mecanismos (socket): todas sus capas ocupan exactamente la misma caja. */
.mechanism { position: absolute; }
.mechanism > .overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.mechanism.is-changing > .overlay { animation: fade-in .25s ease-out; }
@keyframes fade-in { from { opacity: 0; } }
.overlay--placeholder {
  display: grid; place-items: start center;
  border: 1.5px dashed var(--hint);
  border-radius: 6px;
}
.overlay--placeholder span {
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--hint-soft);
  color: var(--hint-ink);
  font-size: 11px; line-height: 1.35; text-align: center;
}
.overlay--placeholder code { font-size: 10px; }
.scene__highlights, .scene__targets { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 100; pointer-events: none; }
.scene__labels { position: absolute; inset: 0; z-index: 110; pointer-events: none; }

.installed {
  position: absolute;
  height: auto;
  transform: var(--transform);
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 55%));
}
.installed.is-snapping { animation: snap .3s ease-out; }
/* Módulo que baja y se asienta en la ranura (~250 ms). */
.installed.is-seating { animation: seat .26s ease-out; }
@keyframes seat { from { transform: var(--transform) translateY(-3%) scale(1.04); opacity: .6; } }
/* SSD M.2: entra deslizando en el conector; insertado queda levantado por el extremo libre (entra inclinado);
   al fijarlo baja hasta el soporte 2242. */
.installed.is-sliding { animation: m2-slide .4s ease-out; }
@keyframes m2-slide { from { transform: var(--transform) translateX(-9%); opacity: .7; } }
.mechanism[data-state="m2Inserted"] .installed--m2 { translate: 0 -3.5%; filter: drop-shadow(-4px 7px 4px rgb(0 0 0 / 60%)); }
.mechanism[data-state="m2Lowered"] .installed--m2 { animation: m2-press .3s ease-out; }
/* Tornillo del SSD: aparece sobre el soporte 2242 al bajar el SSD (pendiente de apretar: algo más alto y con más
   sombra) y queda asentado al atornillarlo. */
.mechanism > .overlay--at { right: auto; bottom: auto; height: auto; translate: -50% -50%; z-index: 25; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 60%)); }
.mechanism[data-state="m2Lowered"] .overlay--m2-screw { scale: 1.08; filter: drop-shadow(1px 3px 2px rgb(0 0 0 / 65%)); animation: screw-appear .35s ease-out; }
@keyframes screw-appear { from { translate: -50% -90%; opacity: 0; } }
@keyframes m2-press { from { translate: 0 -3.5%; filter: drop-shadow(-4px 7px 4px rgb(0 0 0 / 60%)); } }
/* Conector que baja sobre su cabezal (~250 ms). */
.installed.is-plugging { animation: plug .26s ease-out; }
@keyframes plug { from { transform: var(--transform) translateY(-8%) scale(1.05); opacity: .7; } }
@keyframes snap { from { transform: var(--transform) scale(1.06); opacity: .5; } }

/* Revisar montaje: zonas invisibles por componente; la seleccionada lleva un halo azul (azul = selección; el
   verde queda para «completado»). Con el procesador seleccionado, el disipador se vuelve translúcido. */
.scene__review { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 101; pointer-events: none; }
.review-zone { fill: transparent; outline: none; }
.scene.is-review .review-zone { pointer-events: all; cursor: pointer; }
.review-zone:hover { fill: rgb(var(--board-blue-rgb) / 8%); }
.review-zone:focus-visible { stroke: var(--on-dark); stroke-width: 2; vector-effect: non-scaling-stroke; }
.review-zone.is-selected { fill: rgb(var(--board-blue-rgb) / 10%); stroke: var(--on-board-blue); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgb(var(--board-blue-rgb) / 80%)); }
.scene.review-cpu .installed--cooler, .scene.review-cpu .installed--fan-connector, .scene.review-cpu .scene__cables { opacity: .22; transition: opacity .25s; }
/* Al revisar, los elementos resaltados van en azul y sin destellos, sea cual sea su tono durante el montaje. */
.scene.is-review .highlight.is-on .highlight__line { stroke: var(--on-board-blue); animation: none; }
.scene.is-review .highlight.is-on .highlight__halo { stroke: rgb(var(--board-blue-rgb) / 30%); animation: none; }
@media (prefers-reduced-motion: reduce) { .scene.review-cpu .installed--cooler { transition: none; } }

/* Zonas: invisibles; solo reciben el clic y el foco. */
.target { fill: transparent; pointer-events: all; outline: none; }
.target:focus-visible, .control:focus-visible { stroke: var(--on-dark); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* Controles (palanca, marco): solo reaccionan cuando son la acción del subpaso. */
.control { fill: transparent; pointer-events: all; outline: none; }
.control.is-active { cursor: pointer; transition: fill .15s; }
.control.is-active:hover { fill: rgb(var(--board-blue-rgb) / 22%); stroke: var(--on-board-blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.highlight.is-done { opacity: 1; }
/* Pestañas DIMM (`look: 'glow'`): se señala la pieza, no un botón. Línea tenue y halo difuminado ajustados a la
   pestaña; al pasar el ratón el halo se intensifica. El área clicable, más amplia, nunca se ve. */
.control--glow.is-active:hover { fill: transparent; stroke: none; }
.control--passive { pointer-events: none; }
.highlight.look-glow .highlight__line { stroke-width: 1.1; stroke-opacity: .75; }
.highlight.look-glow .highlight__halo { filter: blur(1.5px); }
.highlight.look-glow.is-hover { filter: drop-shadow(0 0 3px rgb(var(--hint-rgb) / 90%)); }
.highlight.look-glow.is-prepared.is-hover { filter: none; }
/* Controles «a preparar» (pestañas DIMM): halo ámbar, con el mismo destello que el resto. */
.highlight.tone-hint .highlight__line { stroke: var(--hint); }
.highlight.tone-hint .highlight__halo { stroke: rgb(var(--hint-rgb) / 35%); }
.highlight.tone-hint.is-attention .highlight__halo { animation-name: attention-halo-hint; }
.highlight.tone-hint.is-attention .highlight__line { animation-name: attention-line-hint; }
@keyframes attention-halo-hint {
  0%, 68%, 80%, 100% { stroke: rgb(var(--hint-rgb) / 35%); stroke-width: 9; }
  74%, 86% { stroke: rgb(var(--hint-rgb) / 80%); stroke-width: 16; }
}
@keyframes attention-line-hint {
  0%, 68%, 80%, 100% { stroke: var(--hint); stroke-width: 1.6; }
  74%, 86% { stroke: var(--on-dark); stroke-width: 2.8; }
}
/* Pestaña abierta (simulada): la pestaña de la foto no cambia; el halo se desplaza un poco hacia fuera
   (hacia el extremo de la ranura) y pasa a verde. */
.highlight.is-prepared { opacity: 1; transform: translateY(-0.7px); animation: latch-open .3s ease-out; }
.highlight.is-prepared .highlight__line { stroke: var(--on-board-ok); stroke-width: 2; animation: none; }
.highlight.is-prepared .highlight__halo { stroke: rgb(var(--board-ok-rgb) / 35%); stroke-width: 7; animation: none; }
@keyframes latch-open { from { transform: translateY(0); } }
/* Anclaje del disipador presionado: el halo baja un instante y queda en verde, en su sitio. */
.highlight.motion-press.is-prepared { transform: none; animation: pin-press .22s ease-out; transform-box: fill-box; transform-origin: center; }
/* Presionar → encajar: el halo baja y se comprime un instante antes de quedar en verde. */
@keyframes pin-press { 45% { transform: translateY(0.45px) scale(.84); } }
@media (prefers-reduced-motion: reduce) { .highlight.motion-press.is-prepared { animation: none; } }
/* Acción manual con el dedo: el puntero es un dedo presionando, solo sobre lo que aún hay que presionar.
   La zona clicable no cambia; lo ya hecho no es activo y vuelve al cursor normal. */
.control--cursor-press.is-active { cursor: pointer; }
.control--cursor-press.is-active:hover { fill: rgb(var(--board-blue-rgb) / 12%); stroke: var(--on-board-blue); stroke-width: 1; }
.highlight.motion-press.is-hover { filter: drop-shadow(0 0 3px rgb(var(--hint-rgb) / 90%)); }

/* Aviso de interfaz junto a un mecanismo (p. ej. «Pestaña abierta»). No es parte del hardware. */
.ui-tag {
  position: absolute; translate: -50% -50%;
  padding: 1px 5px; border-radius: 5px;
  background: var(--ok-soft); color: var(--ok-ink);
  border: 1px solid var(--ok-line);
  font-size: 10px; font-weight: 600; line-height: 1.15; text-align: center;
  width: min-content; white-space: normal;
  box-shadow: 0 1px 3px rgb(var(--navy-rgb) / 25%);
}
.ui-tag[hidden] { display: none; }

/* Cable del ventilador (dinámico): uno solo, negro y discreto, con un brillo tenue para darle volumen.
   En la escena va en px de la imagen maestra; al arrastrar, en px de pantalla (--cable-width). */
.scene__cables { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cable path, .cable-drag path { fill: none; stroke-linecap: round; }
/* El cable es negro, como el real: un borde claro fino y un brillo más marcado lo separan de la placa oscura. */
.cable__edge { stroke: rgb(205 212 220 / 55%); stroke-width: calc(var(--cable-width) * 1.35); }
.cable__body { stroke: #141618; }
.cable__shine { stroke: #6a737d; opacity: .75; }
.cable__body { stroke-width: var(--cable-width); }
.cable__shine { stroke-width: calc(var(--cable-width) * .28); }
.cable.is-lifted { display: none; }
.cable-drag { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 999; pointer-events: none; overflow: visible; }
/* El conector tapa el halo de CPU_FAN al arrastrarlo: sobre la zona válida se ilumina él en verde. */
.ghost--fan-connector.is-valid { filter: drop-shadow(0 0 2px rgb(var(--board-ok-rgb) / 100%)) drop-shadow(0 0 8px rgb(var(--board-ok-rgb) / 80%)); }
/* Pieza suelta sobre la placa (conector del ventilador): se coge con el ratón o el dedo. */
.loose {
  position: absolute; height: auto; translate: -50% -50%;
  pointer-events: auto; touch-action: none; user-select: none; cursor: default;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 55%));
}
.loose.is-available { cursor: grab; }
.loose.is-dragging, .loose.is-returning { opacity: 0; }
.loose:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }
/* Aprender: el conector que hay que coger destella en ámbar (contorno fijo y dos destellos cada 2,4 s), como
   el resto de elementos sobre los que hay que actuar. */
.hints-on .loose.is-available { animation: loose-hint 2.4s ease-in-out infinite; }
@keyframes loose-hint {
  0%, 56%, 72%, 100% { filter: drop-shadow(0 2px 2px rgb(0 0 0 / 55%)) drop-shadow(0 0 1.5px rgb(var(--hint-rgb) / 100%)) drop-shadow(0 0 4px rgb(var(--hint-rgb) / 70%)); scale: 1; }
  64%, 80% { filter: drop-shadow(0 2px 2px rgb(0 0 0 / 55%)) drop-shadow(0 0 2px rgb(var(--hint-rgb) / 100%)) drop-shadow(0 0 12px rgb(var(--hint-rgb) / 100%)); scale: 1.06; }
}
@media (prefers-reduced-motion: reduce) { .hints-on .loose.is-available { animation: none; filter: drop-shadow(0 0 5px rgb(var(--hint-rgb) / 90%)); } }
.highlight.is-done .highlight__line { stroke: var(--on-board-ok); stroke-width: 2.6; }
.highlight.is-done .highlight__halo { stroke: rgb(var(--board-ok-rgb) / 45%); animation: none; }

/* Resaltado del sitio correcto: contorno fino y halo suave, sin tapar el hardware. */
.highlight polygon { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: stroke .15s, stroke-width .15s, opacity .15s, fill .15s; }
.highlight { opacity: 0; transition: opacity .2s; }
.highlight.is-on, .highlight.is-wrong { opacity: 1; }
.highlight__halo { stroke: rgb(var(--board-blue-rgb) / 30%); stroke-width: 9; }
.highlight__line { stroke: var(--on-board-blue); stroke-width: 1.6; }
.highlight.is-on .highlight__halo { animation: breathe 2.4s ease-in-out infinite; }
.highlight.is-on.is-awaiting .highlight__line { stroke-width: 2.2; }
.highlight.is-on.is-awaiting .highlight__halo { stroke: rgb(var(--board-blue-rgb) / 42%); }
.highlight.is-valid { opacity: 1; }
.highlight.is-valid .highlight__line { stroke: var(--on-board-ok); stroke-width: 2.6; }
.highlight.is-valid .highlight__halo { stroke: rgb(var(--board-ok-rgb) / 38%); stroke-width: 7; animation: none; }
/* Válido gana al destello de «pendiente» (p. ej. la punta del destornillador sobre el tornillo). */
.highlight.is-attention.is-valid .highlight__line { animation: none; stroke: var(--on-board-ok); stroke-width: 2.6; }
.highlight.is-attention.is-valid .highlight__halo { animation: none; stroke: rgb(var(--board-ok-rgb) / 38%); stroke-width: 7; }
.highlight.is-misaligned { opacity: 1; }
.highlight.is-misaligned .highlight__line { stroke: var(--hint); stroke-width: 2.6; }
.highlight.is-misaligned .highlight__halo { stroke: rgb(var(--hint-rgb) / 40%); stroke-width: 7; animation: none; }
.highlight.is-wrong .highlight__line { stroke: var(--on-board-err); stroke-width: 2.2; }
.highlight.is-wrong .highlight__halo { stroke: rgb(var(--board-err-rgb) / 40%); animation: none; }
@keyframes breathe { 50% { stroke: rgb(var(--board-blue-rgb) / 14%); } }
/* Control que hay que pulsar: dos destellos suaves cada 3,2 s (muy por debajo de 3 destellos por segundo). */
.highlight.is-attention .highlight__halo { animation: attention-halo 3.2s ease-in-out infinite; }
.highlight.is-attention .highlight__line { animation: attention-line 3.2s ease-in-out infinite; }
@keyframes attention-halo {
  0%, 68%, 80%, 100% { stroke: rgb(var(--board-blue-rgb) / 30%); stroke-width: 9; }
  74%, 86% { stroke: rgb(var(--board-blue-rgb) / 75%); stroke-width: 16; }
}
@keyframes attention-line {
  0%, 68%, 80%, 100% { stroke: var(--on-board-blue); stroke-width: 1.6; }
  74%, 86% { stroke: var(--on-dark); stroke-width: 2.8; }
}

/* Etiquetas: un punto discreto; el texto se abre en el paso actual, al pasar el ratón o al pulsar. */
.label { position: absolute; translate: -50% -50%; pointer-events: auto; }
.label[hidden] { display: none; }
.label__dot {
  display: block;
  width: 14px; height: 14px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--on-dark);
  background: rgb(var(--navy-rgb) / 88%);
  box-shadow: 0 0 0 3px rgb(0 0 0 / 25%);
  cursor: pointer;
}
.label__text {
  position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 0;
  padding: 2px 9px;
  border-radius: 6px;
  background: rgb(var(--navy-rgb) / 94%);
  color: var(--on-dark);
  font-size: 12.5px; line-height: 1.5; white-space: nowrap;
  opacity: 0; visibility: hidden;
  transition: opacity .15s;
  pointer-events: none;
}
.label:hover .label__text, .label:focus-within .label__text, .label.is-open .label__text { opacity: 1; visibility: visible; }

.ghost {
  position: fixed; left: 0; top: 0; z-index: 1000;
  pointer-events: none;
  transform-origin: center;
  opacity: .95;
  filter: drop-shadow(0 14px 14px rgb(0 0 0 / 45%));
}
.ghost .figure { width: 100%; }

/* Arrastre con dos vistas: RAM de frente «en la mano» y desde arriba sobre las ranuras; disipador en 3/4
   y cenital sobre el procesador. Fundido (y giro, en la RAM) cortos (200 ms) al entrar en su zona.
   La vista de instalado lleva en línea el giro contrario al del cuerpo, para quedar derecha. */
.ghost--two .ghost__body { position: absolute; inset: 0; transition: rotate .2s ease-out; }
.ghost--two .ghost__front { position: absolute; inset: 0; transition: opacity .2s; }
.ghost--two .ghost__top {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  opacity: 0; transition: opacity .2s;
}
/* La vista 3/4 del disipador es más apaisada que la cenital: se centra en la misma caja. */
.ghost--cooler .ghost__front img { position: absolute; top: 50%; translate: 0 -50%; }
/* Sobre la placa el disipador se ve algo translúcido: así se ven debajo los orificios de montaje. */
.ghost--cooler.is-near { opacity: .72; }
/* Aro de la interfaz en el centro del disipador (tamaño de la zona de colocación): azul sobre la placa,
   verde cuando está centrado y se puede soltar. */
.ghost__ring {
  position: absolute; translate: -50% -50%; border-radius: 50%; display: none;
  background: radial-gradient(circle, rgb(var(--board-blue-rgb) / 22%) 0%, rgb(var(--board-blue-rgb) / 10%) 55%, transparent 72%);
}
.ghost.is-near .ghost__ring { display: block; }
/* Centrado sobre la CPU: halo verde suave y difuso (no un anclaje ni un botón). */
.ghost.is-valid .ghost__ring { background: radial-gradient(circle, rgb(var(--board-ok-rgb) / 45%) 0%, rgb(var(--board-ok-rgb) / 22%) 50%, transparent 74%); }
.ghost--two.is-near .ghost__front { opacity: 0; }
.ghost--two.is-near .ghost__top { opacity: 1; }
.ghost--two.is-near .ghost__front .mark { display: none !important; }

/* Controles de zoom */
.zoom {
  position: absolute; left: 12px; bottom: 12px; z-index: 300;
  display: flex; align-items: center; gap: 2px;
  padding: 4px;
  border-radius: 10px;
  background: rgb(var(--navy-rgb) / 92%);
  color: var(--on-dark);
}
.zoom button {
  min-width: 34px; height: 32px;
  border: 0; border-radius: 7px;
  background: transparent; color: var(--on-dark);
  font-size: 18px; cursor: pointer;
}
.zoom button:hover { background: rgb(255 255 255 / 14%); }
.zoom output { min-width: 52px; text-align: center; font-size: 13.5px; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .highlight.is-attention .highlight__halo { stroke: rgb(var(--board-blue-rgb) / 55%); stroke-width: 13; }
  .highlight.is-attention .highlight__line { stroke-width: 2.4; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Pantallas más pequeñas (aula, tablet) ---------- */

@media (max-width: 1100px) {
  body { font-size: 14px; }
  .topbar { gap: 10px; }
  .brand { gap: 10px; }
  .brand__logo { width: 42px; height: 42px; }
  .brand__name { font-size: 18px; }
}

/* ---------- Sobre esta práctica (debajo del simulador, en el flujo normal de la página) ---------- */
.about { background: var(--surface); border-top: 1px solid var(--line); }
.about__inner { max-width: 760px; margin: 0 auto; padding: 32px 20px 40px; display: grid; gap: 12px; }
.about h2 { font-size: 20px; line-height: 1.3; color: var(--navy); }
.about h2 + p { margin-top: -2px; }
.about p, .about li { color: var(--ink); font-size: 15px; }
.about h2:not(:first-child) { margin-top: 10px; font-size: 17px; }
.about ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.about__noscript { padding: 10px 12px; border-radius: 8px; background: var(--hint-soft); color: var(--hint-ink); }

.brand__home{display:flex;flex:none;color:inherit;text-decoration:none}
.brand__name a{color:inherit;text-decoration:none}
.brand__home:focus-visible{outline:3px solid #62c9f2;outline-offset:5px;border-radius:4px}