/* Tutorial v2 — panel persistente, pantallas de intro/fin, microtutoriales
   contextuales y resaltado de anclas. Sustituye a onboarding.css. */

.tutorial-overlay{position:fixed;inset:0;z-index:2200;display:grid;place-items:center;padding:16px;background:#02090bcc;backdrop-filter:blur(2px)}
.tutorial-intro-card{width:min(420px,100%);border:1px solid #47727a;background:linear-gradient(160deg,#0a3039,#061317);box-shadow:0 24px 60px #000a;padding:20px 20px 18px}
.tutorial-kicker{display:block;color:#e0b86e;font:500 9px/1.3 "DM Mono",monospace;letter-spacing:.14em;margin-bottom:8px}
.tutorial-intro-card h2{margin:0 0 10px;color:#f1faf4;font:700 18px/1.25 "Unbounded",sans-serif}
.tutorial-intro-card p{margin:0 0 12px;color:#b9cfce;font:9px/1.6 "DM Mono",monospace}
.tutorial-route{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 16px;padding:10px;border:1px solid #294b53;background:#081e23}
.tutorial-route span{padding:4px 7px;border:1px solid #35656c;color:#70d9e7;font:500 8px/1 "DM Mono",monospace;letter-spacing:.08em}
.tutorial-route i{color:#4d6c71;font-style:normal}
.tutorial-actions{display:flex;justify-content:flex-end;gap:10px;align-items:center;flex-wrap:wrap}
.tutorial-actions-final{justify-content:flex-start}
.tutorial-actions button,.tutorial-actions-final button{border:1px solid #42727a;background:#0b2025;color:#d4e9ea;padding:9px 14px;font:600 10px/1 "DM Mono",monospace;letter-spacing:.05em;cursor:pointer}
.tutorial-actions button:hover,.tutorial-actions-final button:hover{border-color:#f1cb63;color:#fff2be;background:#19333a}
.tutorial-actions button.primary,.tutorial-actions-final button.primary{border-color:#e0b86e;background:#3a2c14;color:#ffe9b8}
.tutorial-link{border:0;background:transparent;color:#7fa3a8;font:500 9px/1 "DM Mono",monospace;letter-spacing:.04em;text-decoration:underline;cursor:pointer;padding:6px 2px}
.tutorial-link:hover{color:#cfe4e6}

.tutorial-panel{position:fixed;z-index:1400;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:min(300px,calc(100vw - 28px));border:1px solid #355e67;background:linear-gradient(160deg,#0a2830,#061317);box-shadow:0 14px 34px #0009}
.tutorial-panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid #274951;background:#07171b}
.tutorial-panel-head span{display:block;color:#70d9e7;font:500 8px/1.2 "DM Mono",monospace;letter-spacing:.1em}
.tutorial-panel-head b{display:block;margin-top:2px;color:#f1faf4;font:700 11px/1.2 "DM Mono",monospace;letter-spacing:.02em}
.tutorial-toggle{border:1px solid #355e67;background:#081e23;color:#a9c8cc;padding:5px 8px;font:500 8px/1 "DM Mono",monospace;letter-spacing:.05em;cursor:pointer;white-space:nowrap}
.tutorial-toggle:hover{border-color:#f1cb63;color:#fff2be}
.tutorial-panel-body{padding:11px 12px 12px}
.tutorial-objective{margin:0 0 6px;color:#f7d66d;font:600 10px/1.5 "DM Mono",monospace}
.tutorial-hint{margin:0 0 8px;color:#9dc0c4;font:9px/1.55 "DM Mono",monospace}
.tutorial-panel-body small{display:block;margin-bottom:8px;color:#5f8489;font:500 8px/1 "DM Mono",monospace;letter-spacing:.06em;text-transform:uppercase}
.tutorial-panel-body .tutorial-link{padding:0}

.tutorial-context-popup{position:fixed;z-index:1500;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));width:min(300px,calc(100vw - 28px))}
.tutorial-context-card{border:1px solid #e0b86e;background:linear-gradient(160deg,#3a2c14,#1c1710);box-shadow:0 14px 34px #000a;padding:12px 14px}
.tutorial-context-card b{display:block;margin:2px 0 6px;color:#ffe9b8;font:700 11px/1.3 "DM Mono",monospace}
.tutorial-context-card p{margin:0 0 8px;color:#e6d3a8;font:9px/1.55 "DM Mono",monospace}

/* Resaltado de anclas: puramente visual, nunca condiciona progresión.
   Sólo el elemento cuya clave coincide con el foco activo recibe el anillo. */
[data-tutorial-anchor]{position:relative}
body[data-tutorial-focus-anchor]:not([data-tutorial-focus-anchor=""]) [data-tutorial-anchor]{transition:box-shadow .2s ease}
body[data-tutorial-focus-anchor="warehouse"] [data-tutorial-anchor="warehouse"],
body[data-tutorial-focus-anchor="cargo"] [data-tutorial-anchor="cargo"],
body[data-tutorial-focus-anchor="production"] [data-tutorial-anchor="production"],
body[data-tutorial-focus-anchor="orbitalScan"] [data-tutorial-anchor="orbitalScan"],
body[data-tutorial-focus-anchor="explorationHub"] [data-tutorial-anchor="explorationHub"],
body[data-tutorial-focus-anchor="surfaceScanner"] [data-tutorial-anchor="surfaceScanner"],
body[data-tutorial-focus-anchor="extraction"] [data-tutorial-anchor="extraction"],
body[data-tutorial-focus-anchor="mining"] [data-tutorial-anchor="mining"],
body[data-tutorial-focus-anchor="ruins"] [data-tutorial-anchor="ruins"],
body[data-tutorial-focus-anchor="signal"] [data-tutorial-anchor="signal"],
body[data-tutorial-focus-anchor="rescue"] [data-tutorial-anchor="rescue"],
body[data-tutorial-focus-anchor="market"] [data-tutorial-anchor="market"],
body[data-tutorial-focus-anchor="contracts"] [data-tutorial-anchor="contracts"],
body[data-tutorial-focus-anchor="outpost"] [data-tutorial-anchor="outpost"],
body[data-tutorial-focus-anchor="navigation"] [data-tutorial-anchor="navigation"]{
  box-shadow:0 0 0 2px #e0b86e,0 0 22px #e0b86e77;outline:2px solid transparent;outline-offset:2px;
}

@media(max-width:900px){
  .tutorial-panel{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));width:auto;bottom:max(96px,calc(92px + env(safe-area-inset-bottom)))}
  .tutorial-context-popup{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));width:auto;bottom:max(96px,calc(92px + env(safe-area-inset-bottom)))}
}
@media(max-width:420px){
  .tutorial-intro-card{padding:16px 14px}
  .tutorial-intro-card h2{font-size:16px}
  .tutorial-actions{justify-content:stretch}
  .tutorial-actions button,.tutorial-actions-final button{flex:1}
}
@media(max-width:390px){
  .tutorial-route span{font-size:7px;padding:3px 5px}
}

@media(prefers-reduced-motion:reduce){
  .tutorial-overlay,.tutorial-panel,.tutorial-context-popup,[data-tutorial-anchor]{transition:none!important;animation:none!important}
}