/* ══════════════════════════════════════════════════════════════
   tour-shared.css — shell compartido de la serie "Recorrido Nexus"
   (:root vars, instr-rail, browserframe, spot/tag, dots, botones, logo).
   Cada tour/{modulo}/index.html linkea esto y sólo mantiene inline los
   overrides puntuales (appviewport height, dots sizing, tour-wrap width
   para módulos grandes) + su .mockapp{...} propio.
   IMPORTANTE: al editar este archivo, bumpear el ?v=N en el <link> de
   TODOS los tours (cache-buster) con:
     sed -i 's/tour-shared\.css?v=[0-9]*/tour-shared.css?v=N/' tour/*/index.html tour/index.html
   (mismo motivo que NX_MS_CSSV en el micrositio: sin esto, Hostinger
   sirve el CSS viejo pese a un cambio real en este archivo).
══════════════════════════════════════════════════════════════ */

:root{
  --bg:#eef2f8; --bg2:#ffffff; --stage:#e4eaf3;
  --text:#10233d; --text-dim:#51698c;
  --border:#d3ddea; --border-soft:#e3e9f2;
  --accent:#b8790a; --accent-ink:#fff7e6;
  --card-shadow:0 24px 60px -20px rgba(16,35,61,.25);
  --focus:#2383c4;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b1420; --bg2:#101d2e; --stage:#0d1826;
    --text:#eef4fb; --text-dim:#8fa5c2;
    --border:#22334c; --border-soft:#182842;
    --accent:#f0b429; --accent-ink:#241a02;
    --card-shadow:0 24px 70px -18px rgba(0,0,0,.6);
    --focus:#5aa9e6;
  }
}
:root[data-theme="dark"]{
  --bg:#0b1420; --bg2:#101d2e; --stage:#0d1826;
  --text:#eef4fb; --text-dim:#8fa5c2;
  --border:#22334c; --border-soft:#182842;
  --accent:#f0b429; --accent-ink:#241a02;
  --card-shadow:0 24px 70px -18px rgba(0,0,0,.6);
  --focus:#5aa9e6;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:'IBM Plex Sans',Tahoma,sans-serif;
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:18px;
}
h1,h2,h3{font-family:'Sora',Tahoma,sans-serif; text-wrap:balance; margin:0;}
::selection{background:var(--accent); color:var(--accent-ink);}

.tour-wrap{width:100%; max-width:1180px; display:flex; gap:20px; align-items:stretch;}
@media (max-width:860px){ .tour-wrap{flex-direction:column;} }

.instr-rail{
  width:296px; flex-shrink:0;
  background:var(--bg2); border:1px solid var(--border); border-radius:14px;
  padding:22px 22px 18px; display:flex; flex-direction:column;
}
@media (max-width:860px){ .instr-rail{width:100%;} }
.rail-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.tour-eyebrow{font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--accent); font-weight:600;}
.tour-counter{font-family:'IBM Plex Sans',sans-serif; font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--text-dim); flex-shrink:0;}
.instr-rail h2{font-size:19px; font-weight:600; margin:14px 0 8px;}
.instr-rail p{font-size:14px; line-height:1.55; color:var(--text-dim); margin:0;}
.instr-hint{display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:12px; font-weight:600; color:var(--accent);}
.instr-hint svg{width:13px;height:13px; flex-shrink:0;}
.rail-spacer{flex:1; min-height:16px;}
.rail-foot{font-size:10.5px; line-height:1.5; color:var(--text-dim); margin-top:14px;}
.rail-foot strong{color:var(--text);}
.rail-foot a{color:var(--accent); text-decoration:none; font-weight:600;}

.stage-wrap{flex:1; min-width:0; position:relative; display:flex; align-items:center;}
.stage{width:100%; background:var(--stage); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:var(--card-shadow);}
.browserframe{background:var(--bg2); border:1px solid var(--border); border-radius:10px; overflow:hidden;}
.browserbar{display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--border-soft); border-bottom:1px solid var(--border);}
.bb-dots{display:flex; gap:6px;}
.bb-dots span{width:9px; height:9px; border-radius:50%; background:var(--border); display:block;}
.bb-url{flex:1; display:flex; align-items:center; gap:6px; background:var(--bg2); border:1px solid var(--border); border-radius:6px; padding:5px 10px; font-size:12px; color:var(--text-dim); font-family:'IBM Plex Sans',sans-serif;}
.bb-url svg{width:11px;height:11px;flex-shrink:0;color:var(--text-dim);}

.appviewport{position:relative; width:100%; height:460px; overflow:hidden; background:#F3F8FD;}
@media (max-width:720px){ .appviewport{ height:420px; } }

.spot{position:absolute; pointer-events:none; z-index:92; border-radius:8px; box-shadow:0 0 0 3px var(--accent), 0 0 0 999px rgba(6,12,20,.42); transition:top .35s ease, left .35s ease, width .35s ease, height .35s ease, opacity .2s ease; opacity:0;}
.spot.on{opacity:1; animation:spotpulse 1.8s ease-in-out infinite;}
@keyframes spotpulse{ 0%,100%{box-shadow:0 0 0 3px var(--accent), 0 0 0 999px rgba(6,12,20,.42);} 50%{box-shadow:0 0 0 5px var(--accent), 0 0 0 999px rgba(6,12,20,.42);} }
@media (prefers-reduced-motion: reduce){ .spot.on{animation:none;} }
.tag{position:absolute; z-index:93; pointer-events:none; background:var(--accent); color:var(--accent-ink); font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:11.5px; padding:4px 9px; border-radius:6px; white-space:nowrap; opacity:0; transition:top .35s ease, left .35s ease, opacity .2s ease;}
.tag.on{opacity:1;}
.tag::after{content:''; position:absolute; left:14px; bottom:-5px; border:5px solid transparent; border-top-color:var(--accent);}
.tag.tag-below::after{ bottom:auto; top:-5px; border-top-color:transparent; border-bottom-color:var(--accent); }

.dots{display:flex; gap:6px;}
.dots button{width:8px; height:8px; border-radius:50%; border:none; padding:0; cursor:pointer; background:var(--border); transition:background .15s, width .15s;}
.dots button.active{background:var(--accent); width:20px; border-radius:5px;}
.navbtns{display:flex; gap:8px; margin-top:10px;}
.navbtns .btn{flex:1;}
.btn{font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:13.5px; padding:9px 16px; border-radius:8px; border:1px solid var(--border); background:var(--bg2); color:var(--text); cursor:pointer; transition:background .12s,border-color .12s,transform .08s;}
.btn:hover{border-color:var(--accent);}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.btn-primary:hover{filter:brightness(1.06);}
.btn:disabled{opacity:.4; cursor:default;}



/* Logo SIMPLE Nexus, arriba de la fila SIMPLE Nexus · módulo · n/nn */
.instr-rail::before{content:''; display:block; width:40px; height:40px; margin-bottom:10px; background:url('../assets/img/logo64.png') no-repeat center / contain;}