/* Legibilidad y calidad gráfica final: navegación + esquemas del Centro de trabajo. */
:root {
  --vq-navy: #082a52;
  --vq-blue: #0b62bd;
  --vq-blue-dark: #08417f;
  --vq-gold: #ffd34f;
  --vq-paper: #ffffff;
  --vq-line: #7fa7d1;
  --vq-muted: #3f5f80;
}
body {overflow-x:hidden;}
body #view .scheme-center,
body #view .scheme-center > *,
body #view .scheme-hero > *,
body #view .scheme-map,
body #view .scheme-track {min-width:0;max-width:100%;}

/* Áreas principales: cada estado conserva contraste alto, incluso con reglas heredadas. */
.sidebar #nav .nav-btn.primary-area {
  min-height: 72px !important;
  border: 2px solid rgba(255,255,255,.78) !important;
  background: #fff !important;
  color: var(--vq-navy) !important;
  box-shadow: 0 7px 16px rgba(3,24,57,.2) !important;
  opacity: 1 !important;
}
.sidebar #nav .nav-btn.primary-area :is(.nav-label,.nav-hint,strong,small,span) {
  color: var(--vq-navy) !important;
  -webkit-text-fill-color: var(--vq-navy) !important;
  opacity: 1 !important;
}
.sidebar #nav .nav-btn.primary-area .nav-hint {
  color: #365b80 !important;
  -webkit-text-fill-color: #365b80 !important;
  font-size: .82rem !important;
  line-height: 1.35 !important;
}
.sidebar #nav .nav-btn.primary-area .nav-index {
  border: 0 !important;
  background: #e5f1ff !important;
  color: var(--vq-blue-dark) !important;
  -webkit-text-fill-color: var(--vq-blue-dark) !important;
}
.sidebar #nav .nav-btn.primary-area.active {
  border-color: var(--vq-gold) !important;
  background: linear-gradient(135deg,#0b68c7,#113f88) !important;
  color: #fff !important;
  outline: 3px solid rgba(255,211,79,.62) !important;
  box-shadow: 0 12px 28px rgba(3,24,57,.34) !important;
}
.sidebar #nav .nav-btn.primary-area.active :is(.nav-label,.nav-hint,strong,small,span) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.sidebar #nav .nav-btn.primary-area.active .nav-hint {
  color: #e4f1ff !important;
  -webkit-text-fill-color: #e4f1ff !important;
}
.sidebar #nav .nav-btn.primary-area.active .nav-index {
  background: var(--vq-gold) !important;
  color: var(--vq-navy) !important;
  -webkit-text-fill-color: var(--vq-navy) !important;
}
.sidebar #nav .nav-btn.primary-area:focus-visible {
  outline: 4px solid #fff !important;
  outline-offset: 3px !important;
}

/* Panel gráfico: profundidad limpia, rótulos mayores y una ruta que se reconoce de inmediato. */
body #view .scheme-graphic {
  min-height: 520px;
  border: 1px solid #315f94;
  background:
    radial-gradient(circle at 72% 18%,rgba(76,211,232,.25),transparent 27%),
    radial-gradient(circle at 18% 86%,rgba(78,122,216,.28),transparent 32%),
    linear-gradient(145deg,#061a3b 0%,#0a3978 58%,#102b5d 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 24px 50px rgba(6,31,69,.26);
}
body #view .scheme-graphic::after {
  content: "RUTA VISUAL · 4 ETAPAS";
  position: absolute;
  left: 24px;
  top: 22px;
  z-index: 5;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  background: rgba(4,24,56,.76);
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
}
body #view .scheme-3d-scene {inset: 78px 35px 44px;}
body #view .scheme-3d-stage {
  width: 188px;
  min-height: 140px;
  padding: 20px;
  border-width: 3px;
  border-bottom-width: 12px;
  background: linear-gradient(145deg,#fff,#dcecff);
  box-shadow: 20px 27px 34px rgba(0,0,0,.32),inset 0 2px #fff;
}
body #view .scheme-3d-stage b {
  margin-top: 10px;
  font-size: 1.2rem;
  line-height: 1.15;
}
body #view .scheme-3d-stage small {
  margin-top: 5px;
  font-size: .86rem;
  line-height: 1.3;
}
body #view .scheme-3d-stage.is-active {
  border-color: var(--vq-gold) !important;
  background: linear-gradient(145deg,#1672c8,#082f64) !important;
  box-shadow: 25px 40px 48px rgba(0,0,0,.42),0 0 0 7px rgba(255,211,79,.22),0 0 45px rgba(255,211,79,.72) !important;
}
body #view .scheme-progress-medal {
  width: 116px;
  height: 116px;
  border-width: 4px;
  background: #061b3c;
}
body #view .scheme-graphic-legend {
  z-index: 6;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 14px;
  background: rgba(4,22,50,.88);
  backdrop-filter: blur(10px);
}
body #view .scheme-graphic-legend span {color:#fff !important;font-size:.76rem !important;}

/* Esquema interactivo: estaciones editoriales, conectores visibles y textos de lectura cómoda. */
body #view .scheme-map {
  border: 2px solid #b4cbe2;
  background: linear-gradient(180deg,#fff,#f4f8fd);
  box-shadow: 0 24px 55px rgba(13,48,88,.12);
}
body #view .scheme-map header span {font-size:.76rem;font-weight:950;letter-spacing:.1em;}
body #view .scheme-map header p {color:#365675;font-size:.92rem;}
body #view .scheme-track {gap:16px;padding-top:30px;}
body #view .scheme-track::before {
  top: 54%;
  height: 10px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px #8aa9c8,0 9px 18px rgba(15,56,101,.22);
}
body #view .scheme-node {
  min-height: 190px;
  padding: 17px;
  border-width: 2px;
  border-bottom-width: 8px;
  border-radius: 20px;
  background: linear-gradient(155deg,#fff 0%,#edf5ff 100%);
  transform: none;
  box-shadow: 0 16px 28px rgba(18,53,94,.14),inset 0 1px #fff;
  transition: transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
body #view .scheme-node:hover {transform:translateY(-6px);box-shadow:0 22px 36px rgba(18,53,94,.2);}
body #view .scheme-node .scheme-node-number {width:44px;height:44px;font-size:.9rem;}
body #view .scheme-node .scheme-node-copy small {font-size:.72rem;line-height:1.25;letter-spacing:.05em;}
body #view .scheme-node .scheme-node-copy b {font-size:.98rem;line-height:1.24;}
body #view .scheme-node .scheme-node-copy em {font-size:.78rem;line-height:1.42;color:#385a7b !important;-webkit-text-fill-color:#385a7b !important;}
body #view .scheme-node.is-current {
  transform: translateY(-12px) scale(1.025);
  border-color: var(--vq-gold) !important;
  background: linear-gradient(145deg,#0d68be,#08396f) !important;
  box-shadow: 0 24px 42px rgba(8,57,111,.32),0 0 0 5px rgba(255,211,79,.26) !important;
}
body #view .scheme-node.is-current:hover {transform:translateY(-16px) scale(1.025);}
body #view .scheme-node.is-current .scheme-node-copy :is(small,b,em) {
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
body #view .scheme-node > i {padding:6px 8px;font-size:.62rem;letter-spacing:.03em;}

@media (max-width: 1100px) {
  body #view .scheme-graphic {min-height:470px;}
  body #view .scheme-track {grid-template-columns:repeat(4,minmax(150px,1fr));}
  body #view .scheme-track::before {display:none;}
}
@media (max-width: 760px) {
  .sidebar #nav .nav-btn.primary-area {min-height:68px !important;}
  body #view .scheme-hero {width:100%;grid-template-columns:minmax(0,1fr);}
  body #view .scheme-copy,body #view .scheme-graphic {width:auto;max-width:100%;}
  body #view .scheme-copy > * {max-width:100%;}
  body #view .scheme-actions > button {width:100%;}
  body #view .scheme-graphic {min-height:420px;overflow:hidden;}
  body #view .scheme-3d-scene {inset:82px 20px 35px;transform:rotateX(55deg) rotateZ(-18deg) scale(.82);transform-origin:center;}
  body #view .scheme-progress-medal {width:92px;height:92px;right:14px;top:14px;}
  body #view .scheme-graphic-legend {left:14px;right:14px;bottom:12px;gap:8px;}
  body #view .scheme-map {padding:20px 16px;}
  body #view .scheme-map header {align-items:flex-start;flex-direction:column;gap:10px;}
  body #view .scheme-track {display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px 4px 14px;}
  body #view .scheme-node,body #view .scheme-node.is-current {flex:0 0 210px;min-height:176px;transform:none;scroll-snap-align:start;animation:none;}
}
@media (prefers-reduced-motion: reduce) {
  body #view .scheme-node,body #view .scheme-node:hover,body #view .scheme-node.is-current {transform:none !important;transition:none !important;animation:none !important;}
}