/* faq.css — Manual del tablero. Hereda paleta, fuentes, .top, .foot y .tb de style.css.
   Voz: documentación de sala de máquinas. Se lee de arriba abajo; nada se despliega. */

.faq{max-width:1080px}
.faq code{font-family:'DM Mono',monospace;font-size:.85em;color:var(--cyan);
  background:color-mix(in srgb,var(--cyan) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--cyan) 18%,transparent);
  border-radius:2px;padding:1px 5px;white-space:nowrap}
.faq a{color:var(--amber);text-decoration-color:color-mix(in srgb,var(--amber) 35%,transparent);
  text-underline-offset:3px}
.faq a:hover,.faq a:focus-visible{color:var(--paper)}
.faq b.go{color:var(--go)} .faq b.caution{color:var(--amber)} .faq b.stop{color:var(--signal)}

/* ---------- índice: una tira de fichas pegajosa bajo el header ---------- */
.toc{position:sticky;top:52px;z-index:15;
  display:flex;gap:6px;flex-wrap:wrap;
  background:var(--ink);border-bottom:1px solid var(--line);
  margin:0 calc(-1 * var(--pad)) 30px;padding:10px var(--pad)}
.toc a{font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;border:1px solid var(--line);border-radius:2px;
  padding:5px 10px;transition:color .18s,border-color .18s}
.toc a:hover,.toc a:focus-visible{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent)}

/* ---------- secciones ---------- */
.doc{margin:0 0 54px;scroll-margin-top:104px}
.doc__title{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(1.35rem,3vw,1.9rem);line-height:1.1;margin:0 0 12px;
  padding-bottom:10px;border-bottom:2px solid var(--line)}
.doc__lead{max-width:70ch;color:var(--paper);margin:0 0 26px;font-size:1.02rem}
.doc__lead b{color:var(--amber)}
.doc__h3{font-family:'DM Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin:34px 0 14px;font-weight:500}

/* ---------- el flujo del dato: 4 pasos numerados ---------- */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.flow__step{background:var(--ink-2);padding:18px 16px 16px;position:relative}
.flow__n{font-family:Anton,sans-serif;font-size:2.4rem;line-height:1;color:var(--ink-3);
  position:absolute;top:8px;right:12px;pointer-events:none}
.flow__step h3{font-family:'DM Mono',monospace;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);font-weight:500;margin:0 0 8px}
.flow__step p{font-size:.88rem;color:var(--paper-dim)}
.mini{list-style:none;font-size:.84rem;color:var(--paper-dim);display:grid;gap:7px}
.mini li{padding-left:12px;position:relative;line-height:1.45}
.mini li::before{content:'';position:absolute;left:0;top:.55em;width:4px;height:4px;border-radius:50%;background:var(--cyan)}
.mini b{color:var(--paper)}

/* ---------- listas de definición ---------- */
.deflist{display:grid;gap:0;margin-top:6px;border-top:1px solid var(--line)}
.deflist dt{font-weight:700;color:var(--paper);padding:14px 0 5px;
  display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.deflist dd{color:var(--paper-dim);padding:0 0 14px;max-width:78ch;
  border-bottom:1px solid var(--line);font-size:.92rem}
.deflist dd b{color:var(--paper)}
.deflist--qa dt{font-family:'DM Sans',sans-serif;color:var(--amber);font-size:1rem}

/* ---------- caja de advertencia ---------- */
.warn-box{margin:26px 0 0;padding:14px 16px;font-size:.92rem;
  color:var(--paper);background:color-mix(in srgb,var(--signal) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--signal) 32%,transparent);
  border-left:3px solid var(--signal);border-radius:3px}
.warn-box b{color:var(--signal)}

/* ---------- tarjetas (señales, lighthouse) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px}
.card{background:var(--ink-2);border:1px solid var(--line);border-radius:3px;padding:16px;
  scroll-margin-top:110px}
.card h3{font-family:'DM Mono',monospace;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper);font-weight:500;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.card p{font-size:.88rem;color:var(--paper-dim);margin-bottom:10px}
.card__foot{font-size:.8rem !important;color:var(--dim) !important;margin:0 !important;
  padding-top:10px;border-top:1px solid var(--line)}
.lamp-mini{width:9px;height:9px;border-radius:50%;flex:none}
.lamp-mini--go{background:var(--go);box-shadow:0 0 7px color-mix(in srgb,var(--go) 60%,transparent)}
.lamp-mini--caution{background:var(--amber);box-shadow:0 0 7px color-mix(in srgb,var(--amber) 60%,transparent)}
.lamp-mini--stop{background:var(--signal);box-shadow:0 0 7px color-mix(in srgb,var(--signal) 60%,transparent)}
.thr{list-style:none;display:grid;gap:6px;margin:0 0 12px;font-size:.85rem;color:var(--paper-dim)}
.thr li{line-height:1.4}

/* fichas del despacho de repos, replicadas para explicarlas */
.chip{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.06em;padding:2px 7px;border-radius:2px;
  border:1px solid var(--line);color:var(--dim);white-space:nowrap}
.chip--dirty{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,transparent)}
.chip--pages{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 40%,transparent)}
.chip--vm{color:var(--paper-dim);border-color:var(--line)}

/* ---------- los ítems de la auditoría ---------- */
.checks{display:grid;gap:12px}
.check{background:var(--ink-2);border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:3px;padding:16px 18px;scroll-margin-top:110px}
.check:target{border-color:var(--amber);background:var(--ink-3)}
.check--info{border-left-color:var(--dim)}
.check h3{font-family:'DM Sans',sans-serif;font-size:1rem;color:var(--paper);margin:8px 0 10px;line-height:1.35}
.check__sev{display:inline-block;font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 7px;border-radius:2px;margin-right:5px}
.sev--fail{color:var(--signal);background:color-mix(in srgb,var(--signal) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--signal) 40%,transparent)}
.sev--warn{color:var(--amber);background:color-mix(in srgb,var(--amber) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--amber) 38%,transparent)}
.sev--info{color:var(--dim);border:1px solid var(--line)}
.check p{font-size:.9rem;color:var(--paper-dim);max-width:82ch;margin-bottom:8px;line-height:1.55}
.check p:last-child{margin-bottom:0}
.check__what{color:var(--paper) !important}
.check__why b{color:var(--amber)}
.check__fix b{color:var(--go)}

/* ---------- la guía, sección por sección ----------
   Cada § con su número de tapa. §13 destacado: es el principio que ordena a los demás. */
.secs{display:grid;gap:12px}
.sec{background:var(--ink-2);border:1px solid var(--line);border-radius:3px;
  padding:16px 18px 18px;scroll-margin-top:110px}
.sec:target{border-color:var(--amber);background:var(--ink-3)}
.sec--key{border-left:3px solid var(--cyan)}
.sec h3{font-family:'DM Sans',sans-serif;font-size:1.05rem;color:var(--paper);font-weight:700;
  margin:0 0 10px;display:flex;align-items:baseline;gap:10px;line-height:1.3}
.sec__n{font-family:Anton,sans-serif;font-weight:400;font-size:.9rem;letter-spacing:.06em;
  color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 35%,transparent);
  border-radius:2px;padding:2px 7px;flex:none;min-width:34px;text-align:center}
.sec--key .sec__n{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 40%,transparent)}
.sec p{font-size:.92rem;color:var(--paper-dim);max-width:82ch;margin-bottom:10px;line-height:1.6}
.sec p:last-child{margin-bottom:0}
.sec p b{color:var(--paper)}
.sec .mini{margin-bottom:10px;max-width:84ch}
.sec__link{font-family:'DM Mono',monospace;font-size:.72rem !important;color:var(--dim) !important;
  padding-top:9px;border-top:1px solid var(--line);margin-top:12px}

/* ---------- pie ---------- */
.faq .foot{margin-top:10px}

@media (max-width:640px){
  .toc{top:48px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .toc a{white-space:nowrap}
  .doc{margin-bottom:42px}
}