@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

/* ============================================================
   SISTEMA DE MANUALES — Centro de Ayuda NYXIVO
   Diseño común de las guías ilustradas: tipografía, color,
   pasos, capturas anotadas y visor ampliable.
   Documentado en /taller-manuales.php
   Se activa declarando "css" => "guia-manual.css" en
   config/ayuda_articulos.php y envolviendo el contenido en
   <div class="nrus-doc">.
   ============================================================ */

/* ── Tokens + reglas de body ────────────────────────────── */
.guia .nrus-doc{
  --ground:#FBFCFD;
  --surface:#FFFFFF;
  --surface-2:#F1F4F7;
  --ink:#16202B;
  --ink-soft:#4C5C6B;
  --ink-faint:#7C8B99;
  --rule:#DDE4EA;
  --deep:#12456F;
  --deep-soft:#2E6796;
  --mark:#C8322B;
  --mark-soft:#FBEDEC;
  --money:#1E6B43;
  --warn-bg:#FCF6E6;
  --warn-line:#E0C46A;
  --warn-ink:#5E4A12;
  --alert-bg:#FCEEED;
  --alert-line:#E3ADA9;
  --alert-ink:#7C2620;
  --shadow:0 1px 2px rgba(22,32,43,.06), 0 8px 24px rgba(22,32,43,.06);

  background:var(--ground);
  color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;

  /* equivalente a .wrap del documento original */
  max-width:940px;
  margin:0 auto;
  padding:0 28px 96px;
}
.guia .nrus-doc *{ box-sizing:border-box; }

@media (prefers-color-scheme: dark){
  .guia .nrus-doc{
    --ground:#10161D;
    --surface:#161E27;
    --surface-2:#1D2833;
    --ink:#E6EDF3;
    --ink-soft:#A7B6C3;
    --ink-faint:#7B8B99;
    --rule:#2A3742;
    --deep:#8FC1E8;
    --deep-soft:#6FA8D6;
    --mark:#F1837A;
    --mark-soft:#33201E;
    --money:#6FCB98;
    --warn-bg:#2A2415;
    --warn-line:#6B5A26;
    --warn-ink:#E8D9A6;
    --alert-bg:#2C1B19;
    --alert-line:#6E3733;
    --alert-ink:#F2C0BB;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}

/* ── Cabecera ───────────────────────────────────────────── */
.guia .nrus-doc .nrus-masthead{
  border-bottom:3px solid var(--deep);
  padding:52px 0 26px;
  margin-bottom:34px;
}
.guia .nrus-doc .nrus-eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--deep-soft);margin:0 0 14px;max-width:none;
}
.guia .nrus-doc h1{
  font-family:"Source Serif 4",Georgia,serif;
  font-weight:700;font-size:clamp(2.1rem,5vw,3.1rem);
  line-height:1.08;margin:0 0 10px;text-wrap:balance;letter-spacing:-.015em;
  color:var(--ink);
}
.guia .nrus-doc .nrus-deck{
  font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(1.05rem,2.4vw,1.3rem);
  color:var(--ink-soft);margin:0;max-width:60ch;
}

/* ── Bloques ────────────────────────────────────────────── */
.guia .nrus-doc .nrus-notice{
  border:1px solid var(--rule);
  border-left:3px solid var(--deep-soft);
  background:var(--surface);
  padding:16px 20px;border-radius:2px;
  font-size:14.5px;color:var(--ink-soft);
  margin:0 0 30px;max-width:none;
}
.guia .nrus-doc .nrus-notice strong{color:var(--ink)}

.guia .nrus-doc .nrus-card{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:22px 24px;
  box-shadow:var(--shadow);
  margin:0 0 34px;
}
.guia .nrus-doc .nrus-card h2{margin-top:0}

.guia .nrus-doc dl.nrus-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;margin:0;font-size:14.5px}
.guia .nrus-doc dl.nrus-facts dt{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);padding-top:3px;margin:0}
.guia .nrus-doc dl.nrus-facts dd{margin:0;color:var(--ink)}

.guia .nrus-doc h2{
  font-family:"Source Serif 4",Georgia,serif;
  font-size:1.62rem;font-weight:700;line-height:1.2;
  margin:52px 0 6px;text-wrap:balance;letter-spacing:-.01em;
  color:var(--ink);
  display:block;padding:0;background:none;
}
.guia .nrus-doc h2::before{ content:none; display:none; }  /* anula la barrita de .guia h2 */

.guia .nrus-doc h3{
  font-family:"IBM Plex Sans",-apple-system,sans-serif;
  font-size:1.06rem;font-weight:600;margin:30px 0 8px;line-height:1.35;
  color:var(--ink);
}
.guia .nrus-doc p{margin:0 0 15px;max-width:68ch;color:var(--ink);font-size:16px;line-height:1.65}
.guia .nrus-doc a{color:var(--deep-soft)}
.guia .nrus-doc strong{font-weight:600}

.guia .nrus-doc .nrus-part{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:64px 0 4px;padding-bottom:10px;border-bottom:1px solid var(--rule);
}
.guia .nrus-doc .nrus-part-tag{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mark);white-space:nowrap;
}
.guia .nrus-doc .nrus-part h2{margin:0;font-size:1.5rem}

/* ── Pasos ──────────────────────────────────────────────── */
.guia .nrus-doc .nrus-step{margin:40px 0 0;scroll-margin-top:20px}
.guia .nrus-doc .nrus-step-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:10px}
.guia .nrus-doc .nrus-step-num{
  flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--mark);color:#fff;
  display:grid;place-items:center;
  font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:14px;
  margin-top:2px;
}
.guia .nrus-doc .nrus-step-head h3{margin:0;font-family:"Source Serif 4",Georgia,serif;
  font-size:1.34rem;font-weight:600;line-height:1.3}

/* ── Pantallas ──────────────────────────────────────────── */
.guia .nrus-doc figure.nrus-screen{margin:22px 0 8px;break-inside:avoid}
.guia .nrus-doc figure.nrus-screen .nrus-frame{
  position:relative;
  background:var(--surface-2);
  border:1px solid var(--rule);
  border-radius:4px;padding:14px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  cursor:zoom-in;
}
.guia .nrus-doc figure.nrus-screen svg{display:block;width:100%;height:auto;min-width:620px;
  border-radius:2px;box-shadow:0 1px 3px rgba(22,32,43,.18);background:#fff}
/* Capturas hechas en el celular: son estrechas de origen (390px de ancho real),
   así que el mínimo de 620px pensado para pantallas de escritorio las cortaría.
   Con min-width:0 se ven enteras en un teléfono, sin scroll lateral. */
.guia .nrus-doc figure.nrus-screen--movil svg{ min-width:0; }
/* En pantallas táctiles el botón «Agrandar» no se puede ocultar al quitar el ratón:
   está siempre visible, arriba a la derecha, justo donde muchas capturas tienen el
   botón que se está explicando. Le damos una franja propia para que no tape nada. */
@media (hover:none){
  .guia .nrus-doc figure.nrus-screen .nrus-frame{ padding-top:46px; }
}

.guia .nrus-doc figcaption{
  font-size:12.5px;color:var(--ink-faint);text-align:center;
  margin-top:10px;font-style:italic;
}

/* Botón "Ampliar" (añadido: el documento original no era interactivo) */
.guia .nrus-doc .nrus-zoom{
  position:absolute; top:22px; right:22px; z-index:2;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .6rem;
  background:rgba(18,69,111,.92); color:#fff;
  border:0; border-radius:3px; cursor:zoom-in;
  font-family:"IBM Plex Sans",sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.03em;
  opacity:0; transition:opacity .16s ease;
}
.guia .nrus-doc .nrus-frame:hover .nrus-zoom,
.guia .nrus-doc .nrus-zoom:focus-visible{ opacity:1; }
@media (hover:none){ .guia .nrus-doc .nrus-zoom{ opacity:1; } }

.guia .nrus-doc ol.nrus-keys{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.guia .nrus-doc ol.nrus-keys li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;
  color:var(--ink-soft);max-width:70ch;border:0;background:none;padding:0;margin:0}
.guia .nrus-doc ol.nrus-keys .nrus-k{
  flex:none;width:21px;height:21px;border-radius:50%;
  background:var(--mark);color:#fff;
  display:grid;place-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;
  margin-top:1px;
}
.guia .nrus-doc ol.nrus-keys strong{color:var(--ink)}

/* ── Avisos ─────────────────────────────────────────────── */
.guia .nrus-doc .nrus-tip,
.guia .nrus-doc .nrus-alert{
  border-radius:2px;padding:14px 18px;margin:20px 0;
  font-size:14.5px;line-height:1.6;max-width:72ch;break-inside:avoid;
  border:0;
}
.guia .nrus-doc .nrus-tip{background:var(--warn-bg);border-left:3px solid var(--warn-line);color:var(--warn-ink)}
.guia .nrus-doc .nrus-alert{background:var(--alert-bg);border-left:3px solid var(--alert-line);color:var(--alert-ink)}
.guia .nrus-doc .nrus-tip strong,
.guia .nrus-doc .nrus-alert strong{font-weight:600;color:inherit}

/* ── Tabla ──────────────────────────────────────────────── */
.guia .nrus-doc .nrus-tablewrap{overflow-x:auto;margin:18px 0 24px}
.guia .nrus-doc table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px;margin:0;background:transparent}
.guia .nrus-doc th{
  background:var(--deep);color:#fff;text-align:left;
  font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;
  padding:10px 14px;border:0;
}
.guia .nrus-doc td{padding:11px 14px;border:0;border-bottom:1px solid var(--rule);
  font-variant-numeric:tabular-nums;color:var(--ink);background:transparent}
.guia .nrus-doc tbody tr:nth-child(even) td{background:var(--surface-2)}
.guia .nrus-doc .nrus-money{color:var(--money);font-weight:600}
.guia .nrus-doc code{
  font-family:"IBM Plex Mono",monospace;font-size:.88em;
  background:var(--surface-2);padding:1px 5px;border-radius:2px;
  border:1px solid var(--rule);color:var(--ink);
}

/* ── Índice ─────────────────────────────────────────────── */
.guia .nrus-doc nav.nrus-toc{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:3px;padding:20px 24px;margin:0 0 20px;
}
.guia .nrus-doc nav.nrus-toc p{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px;max-width:none}
.guia .nrus-doc nav.nrus-toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px;font-size:14.5px}
.guia .nrus-doc nav.nrus-toc li{margin-bottom:5px;break-inside:avoid;color:var(--ink-faint)}
.guia .nrus-doc nav.nrus-toc a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent}
.guia .nrus-doc nav.nrus-toc a:hover,
.guia .nrus-doc nav.nrus-toc a:focus{color:var(--deep-soft);border-bottom-color:var(--deep-soft)}
.guia .nrus-doc :focus-visible{outline:2px solid var(--mark);outline-offset:2px}

.guia .nrus-doc footer{
  margin-top:70px;padding-top:22px;border-top:1px solid var(--rule);
  font-size:13px;color:var(--ink-faint);
}

@media (max-width:640px){
  .guia .nrus-doc nav.nrus-toc ol{columns:1}
  .guia .nrus-doc{padding:0 18px 64px}
}
@media (prefers-reduced-motion:reduce){
  .guia .nrus-doc .nrus-zoom{transition:none}
}

/* ============================================================
   Visor a pantalla completa de las capturas
   ============================================================ */
.nrus-lb{
  position:fixed; inset:0; z-index:99999;
  background:rgba(8,12,17,.94);
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.nrus-lb.abierto{ opacity:1; pointer-events:auto; }

.nrus-lb-bar{
  flex:0 0 auto; display:flex; align-items:center; gap:.5rem;
  padding:12px 16px; color:#E6EDF3;
  font-family:"IBM Plex Sans",sans-serif; font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.nrus-lb-tit{
  flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:#A7B6C3;
}
.nrus-lb-bar button{
  flex:0 0 auto;
  background:rgba(255,255,255,.10); color:#E6EDF3;
  border:1px solid rgba(255,255,255,.18); border-radius:3px;
  padding:.34rem .7rem; cursor:pointer;
  font-family:"IBM Plex Sans",sans-serif; font-size:13px; font-weight:600;
  transition:background .14s ease;
}
.nrus-lb-bar button:hover{ background:rgba(255,255,255,.20); }
.nrus-lb-bar button:disabled{ opacity:.4; cursor:default; }
.nrus-lb-bar button:focus-visible{ outline:2px solid #C8322B; outline-offset:2px; }
.nrus-lb-zoom{
  min-width:52px; text-align:center;
  font-family:"IBM Plex Mono",monospace !important; font-size:12px !important;
  color:#A7B6C3; font-weight:400 !important;
}
.nrus-lb-vp{
  flex:1 1 auto; overflow:auto; padding:20px;
  display:flex; align-items:flex-start; justify-content:center;
  cursor:grab;
}
.nrus-lb-vp.arrastrando{ cursor:grabbing; }
.nrus-lb-vp svg{
  background:#fff; border-radius:3px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
  width:var(--nd-lb-w, 1200px); height:auto; max-width:none;
  transition:width .16s ease;
}
@media (max-width:640px){
  .nrus-lb-bar{ flex-wrap:wrap; }
  .nrus-lb-tit{ order:3; flex-basis:100%; white-space:normal; }
}
@media (prefers-reduced-motion:reduce){
  .nrus-lb, .nrus-lb-vp svg{ transition:none; }
}

/* ── Impresión: Ctrl+P → Guardar como PDF ───────────────── */
@media print{
  @page{size:A4;margin:15mm 14mm}
  .guia .nrus-doc{max-width:none;padding:0;background:#fff;color:#111;font-size:10.5pt}
  .guia .nrus-doc nav.nrus-toc,
  .guia .nrus-doc .nrus-zoom{display:none}
  .guia .nrus-doc .nrus-masthead{padding-top:0;break-after:avoid}
  .guia .nrus-doc .nrus-part{break-before:page;break-after:avoid}
  .guia .nrus-doc .nrus-step{break-inside:avoid-page}
  .guia .nrus-doc figure.nrus-screen .nrus-frame{background:#fff;padding:0;border-color:#bbb}
  .guia .nrus-doc figure.nrus-screen svg{min-width:0;box-shadow:none}
  .guia .nrus-doc .nrus-card,
  .guia .nrus-doc .nrus-tip,
  .guia .nrus-doc .nrus-alert,
  .guia .nrus-doc .nrus-notice{box-shadow:none}
  .guia .nrus-doc h2,.guia .nrus-doc h3{break-after:avoid}
  .guia .nrus-doc a{color:#111;text-decoration:none}
}