/* Tema: hoja de manual de servicio. Papel gris-azulado, tinta oscura,
   color solo en cables y en el tramo sospechoso; amarillo multímetro
   para el paso activo. */
:root {
  --papel: #e6ebf0;
  --hoja: #f7f9fb;
  --tinta: #16222c;
  --tinta-2: #4b5a66;
  --linea: #c3ccd5;
  --linea-suave: #dde3e9;
  --amarillo: #f2c200;
  --amarillo-tinta: #5c4a00;
  --rojo: #d62828;
  --rojo-suave: #fbe3e3;
  --verde: #2e7d32;
  --azul: #1565c0;
  --foco: #1565c0;
  --sombra: 0 1px 0 rgba(22, 34, 44, .08);
  --radio: 6px;
  --fuente: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #12181e; --hoja: #1b232b; --tinta: #e8edf1; --tinta-2: #a3b0bb;
    --linea: #34404b; --linea-suave: #26303a; --amarillo: #ffd23f; --amarillo-tinta: #ffe58a;
    --rojo: #ff5c5c; --rojo-suave: #3a1c1c; --verde: #6fcf73; --azul: #6aa8ff; --foco: #6aa8ff;
    --sombra: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #12181e; --hoja: #1b232b; --tinta: #e8edf1; --tinta-2: #a3b0bb;
  --linea: #34404b; --linea-suave: #26303a; --amarillo: #ffd23f; --amarillo-tinta: #ffe58a;
  --rojo: #ff5c5c; --rojo-suave: #3a1c1c; --verde: #6fcf73; --azul: #6aa8ff; --foco: #6aa8ff;
  --sombra: none; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--fuente); font-size: 16px; line-height: 1.45;
  display: grid; grid-template-rows: auto auto 1fr auto; min-height: 100vh;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.2; }

/* Encabezado */
.cabecera {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--linea); background: var(--hoja);
}
.cabecera h1 { font-size: 1.15rem; }
.cabecera h1 small { display: block; font-size: .85rem; font-weight: 400; color: var(--tinta-2); }
.cabecera .espacio { flex: 1; }
.modos { display: inline-flex; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.modos button { border: 0; background: transparent; padding: 8px 16px; }
.modos button[aria-pressed="true"] { background: var(--tinta); color: var(--hoja); }
.tema { border: 1px solid var(--linea); background: transparent; border-radius: var(--radio); padding: 8px 12px; }

/* Aviso de datos aproximados */
.aviso-aprox {
  display: flex; gap: 12px; align-items: center; padding: 8px 16px;
  background: var(--amarillo); color: #16222c; font-size: .92rem;
}
.aviso-aprox strong { white-space: nowrap; }
@media (max-width: 900px) { .aviso-aprox { display: block; } .aviso-aprox strong { display: inline; } }

/* Cuerpo: escenario + panel */
.cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); min-height: 0; }
.escenario { position: relative; min-height: 420px; background: var(--hoja); border-right: 1px solid var(--linea); overflow: hidden; }
.vista { position: absolute; inset: 0; }
.vista[hidden] { display: none; }
#svg-2d { width: 100%; height: 100%; display: block; }
#vista-3d { background: #1b2430; }
#vista-3d canvas { display: block; }
.vista-3d-fallo { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; color: #e8edf1; text-align: center; }

/* Etiquetas y overlays del escenario */
.leyenda[hidden] { display: none; }
.leyenda {
  position: absolute; right: 12px; bottom: 12px; padding: 8px 10px; font-size: .8rem;
  background: color-mix(in srgb, var(--hoja) 92%, transparent); border: 1px solid var(--linea); border-radius: var(--radio);
  display: grid; grid-template-columns: auto auto; gap: 4px 12px; max-width: 360px;
}
.leyenda span::before { content: ''; display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--c); vertical-align: middle; margin-right: 6px; }
.leyenda .sospechoso::before { border-top: 3px dashed var(--rojo); }
.leyenda .aprox { grid-column: 1 / -1; color: var(--tinta-2); }
.etiqueta-3d {
  font: 600 12px/1.2 var(--fuente); color: #fff; background: rgba(20, 28, 38, .78); padding: 3px 7px; border-radius: 4px;
  white-space: nowrap; pointer-events: none; border: 1px solid rgba(255,255,255,.15);
}
.etiqueta-3d.contexto { font-weight: 400; opacity: .75; }
.etiqueta-3d.activa { background: var(--amarillo); color: #16222c; border-color: transparent; }
.etiqueta-3d.multimetro { background: #1f1f1f; color: #b7f5a1; font-size: 15px; padding: 6px 10px; letter-spacing: .5px; border: 2px solid #f2c200; }
.ayuda-3d { position: absolute; right: 12px; top: 12px; font-size: .78rem; color: #cdd5dd; background: rgba(20,28,38,.7); padding: 6px 10px; border-radius: 4px; pointer-events: none; }

/* SVG 2D */
.comp rect.caja { fill: var(--hoja); stroke: var(--tinta); stroke-width: 1.6; }
.comp.contexto { display: none; }
.comp text.nombre { font: 600 14px var(--fuente); fill: var(--tinta); }
.comp text.pin { font: 12px var(--fuente); fill: var(--tinta-2); }
.comp circle.pin { fill: var(--hoja); stroke: var(--tinta); stroke-width: 1.5; }
.comp.activo rect.caja { stroke: var(--amarillo-tinta); stroke-width: 2.5; fill: color-mix(in srgb, var(--amarillo) 22%, var(--hoja)); }
.comp.falla rect.caja { stroke: var(--rojo); stroke-width: 3; fill: var(--rojo-suave); }
.comp .icono { stroke: var(--tinta); fill: none; stroke-width: 1.6; }
.cable { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; opacity: .9; }
.cable.grueso { stroke-width: 7; }
.cable-borde { fill: none; stroke: var(--tinta); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.cable-borde.grueso { stroke-width: 9; }
.cable-raya { fill: none; stroke-width: 3; stroke-dasharray: 9 9; stroke-linecap: butt; pointer-events: none; }
.cable-raya.grueso { stroke-width: 7; }
.cable-raya.atenuado, .cable-borde.atenuado { opacity: .2; }
.codigo { font: 700 11px var(--fuente); fill: var(--tinta); paint-order: stroke; stroke: var(--hoja); stroke-width: 4px; stroke-linejoin: round; }
.cable.atenuado { opacity: .28; }
.cable.resaltado { opacity: 1; filter: drop-shadow(0 0 3px currentColor); }
.cable-sospechoso { fill: none; stroke: var(--rojo); stroke-width: 9; stroke-dasharray: 10 8; opacity: .45; stroke-linecap: round; }
.cable-falla { fill: none; stroke: var(--rojo); stroke-width: 11; opacity: .6; stroke-linecap: round; }
.flujo { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 6 12; stroke-linecap: round; animation: fluir 1.1s linear infinite; }
.flujo.grueso { stroke-width: 4; stroke-dasharray: 10 16; }
@keyframes fluir { to { stroke-dashoffset: -18; } }
.flujo.grueso { animation-name: fluir-grueso; }
@keyframes fluir-grueso { to { stroke-dashoffset: -26; } }
.punta { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.punta line { stroke-width: 6; stroke-linecap: round; }
.punta.roja line { stroke: var(--rojo); }
.punta.negra line { stroke: var(--tinta); }
.punta text { font: 700 12px var(--fuente); }
.punta.roja text { fill: var(--rojo); }
.punta.negra text { fill: var(--tinta); }
.punta circle.toque { fill: none; stroke: var(--amarillo-tinta); stroke-width: 2; animation: toque 1.4s ease-out infinite; }
@keyframes toque { from { r: 4; opacity: 1; } to { r: 22; opacity: 0; } }
.extra { fill: none; stroke: var(--amarillo-tinta); stroke-width: 4; stroke-dasharray: 8 6; }
.extra-texto { font: 700 12px var(--fuente); fill: var(--amarillo-tinta); }
.titulo-2d { font: 700 18px var(--fuente); fill: var(--tinta); }
.sub-2d { font: 13px var(--fuente); fill: var(--tinta-2); }
@media (prefers-reduced-motion: reduce) {
  .flujo { animation: none; stroke-dasharray: none; opacity: .5; }
  .punta { transition: none; }
  .punta circle.toque { animation: none; r: 8; }
}

/* Panel lateral */
.panel { overflow: auto; padding: 16px 20px 24px; background: var(--papel); }
.panel .paso-num { color: var(--tinta-2); font-size: .9rem; }
.panel h2 { font-size: 1.35rem; margin: 2px 0 8px; }
.panel .resumen { margin: 0 0 14px; color: var(--tinta); }
.ficha { display: grid; grid-template-columns: 96px 1fr; gap: 8px 12px; margin: 0 0 16px; padding: 12px 14px; background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.ficha dt { color: var(--tinta-2); font-size: .88rem; padding-top: 2px; }
.ficha dd { margin: 0; }
.ficha dd.llave { font-weight: 700; }
.ficha dd.roja { border-left: 4px solid var(--rojo); padding-left: 8px; }
.ficha dd.negra { border-left: 4px solid var(--tinta); padding-left: 8px; }
.ficha dd.esperado { background: var(--amarillo); color: #16222c; padding: 6px 10px; border-radius: 4px; font-weight: 700; }
.resultados h3 { font-size: 1rem; margin: 0 0 8px; }
.resultados table { width: 100%; border-collapse: collapse; font-size: .93rem; margin-bottom: 16px; }
.resultados th, .resultados td { text-align: left; vertical-align: top; padding: 7px 6px; border-top: 1px solid var(--linea); }
.resultados th { color: var(--tinta); font-weight: 700; white-space: normal; width: 34%; }
.seguridad { border: 2px solid var(--rojo); border-radius: var(--radio); padding: 10px 14px; margin-bottom: 16px; }
.seguridad h3 { color: var(--rojo); font-size: 1rem; margin: 0 0 6px; }
.seguridad ul { margin: 0; padding-left: 18px; }
.seguridad li { margin-bottom: 4px; }
.fuentes { font-size: .88rem; margin-bottom: 14px; }
.fuentes h3 { font-size: 1rem; margin: 0 0 6px; }
.fuentes ul { margin: 0; padding-left: 18px; }
.fuentes li { margin-bottom: 6px; }
.fuentes a { color: var(--azul); }
.nota-aprox { font-size: .85rem; color: var(--tinta-2); border-top: 1px dashed var(--linea); padding-top: 8px; }

/* Árbol de decisión */
.arbol .pregunta { font-size: 1.1rem; font-weight: 700; margin: 0 0 10px; }
.arbol .ref-paso { color: var(--tinta-2); font-size: .88rem; margin-bottom: 8px; }
.arbol .opciones { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.arbol .opciones button, .arbol .reiniciar { border: 1px solid var(--tinta); background: var(--hoja); border-radius: var(--radio); padding: 8px 16px; }
.arbol .opciones button:hover { background: var(--amarillo); color: #16222c; }
.arbol .camino { list-style: none; padding: 0; margin: 0 0 12px; font-size: .88rem; color: var(--tinta-2); }
.arbol .camino li::before { content: '↳ '; }
.arbol .diagnostico { border-left: 5px solid var(--rojo); padding: 8px 12px; background: var(--hoja); margin-bottom: 12px; }
.arbol .diagnostico h3 { font-size: 1rem; margin-bottom: 4px; }
.arbol .reparacion { border-left: 5px solid var(--verde); padding: 8px 12px; background: var(--hoja); margin-bottom: 12px; }

/* Glosario */
.glosario { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--hoja); color: var(--tinta); padding: 20px 24px; width: min(720px, calc(100vw - 32px)); max-height: 85vh; }
.glosario::backdrop { background: rgba(10, 16, 22, .55); }
.glosario-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.glosario-cab h2 { font-size: 1.3rem; }
.glosario dl { margin: 0; }
.glosario dt { font-weight: 700; margin-top: 12px; }
.glosario dd { margin: 2px 0 0; color: var(--tinta); }

/* Navegación */
.nav { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--linea); background: var(--hoja); }
.nav .salto { border: 1px solid var(--tinta); background: var(--hoja); border-radius: var(--radio); padding: 8px 16px; }
.nav .salto:disabled { opacity: .4; cursor: default; }
.pasos-lista { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.pasos-lista button { border: 1px solid var(--linea); background: transparent; border-radius: 999px; padding: 4px 12px; font-size: .85rem; }
.pasos-lista button[aria-current="step"] { background: var(--amarillo); color: #16222c; border-color: transparent; font-weight: 700; }
.pasos-lista button .n { display: inline-block; min-width: 1.2em; font-weight: 700; }

@media (max-width: 900px) {
  .cuerpo { grid-template-columns: 1fr; grid-template-rows: 56vh auto; }
  .escenario { border-right: 0; border-bottom: 1px solid var(--linea); min-height: 320px; }
  .ficha { grid-template-columns: 84px 1fr; }
  .nav { grid-template-columns: 1fr 1fr; }
  .pasos-lista { order: 3; grid-column: 1 / -1; }
  .leyenda { display: none; }
  .escenario { overflow: auto; -webkit-overflow-scrolling: touch; }
  #svg-2d { min-width: 860px; }
}