/* V190 · Capa visual final: contraste universal, diagramación sin solapamientos y profundidad 4D accesible. */
:root {
  --pe4d-navy: #072f5f;
  --pe4d-blue: #0b5fb7;
  --pe4d-cyan: #27d3ce;
  --pe4d-gold: #ffd166;
  --pe4d-ink: #102a49;
  --pe4d-space: clamp(12px, 1.45vw, 18px);
}

/* Ningún grupo de pestañas puede montarse sobre otro. */
#view :is(
  .module-location,
  .module-tutorial,
  .experience-tabs,
  .expert-reference-tabs,
  .guide-accordion,
  .content-browser,
  .cpeip-task-stack,
  .rubric-focus-grid,
  .ux-space-switcher,
  .stage-tabs,
  .rubric-module-tabs,
  .primary-tabs
) {
  position: relative !important;
  isolation: isolate;
  clear: both;
}
#view :is(
  .module-location > nav,
  .module-one-tabs,
  .module-tutorial-tabs,
  .experience-tabs,
  .stage-tabs,
  .rubric-module-tabs,
  .ux-space-switcher,
  .primary-tabs
) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)) !important;
  align-items: stretch !important;
  gap: var(--pe4d-space) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: var(--pe4d-space) !important;
  overflow: visible !important;
  transform: none !important;
}
#view .module-location-current { margin: 0 !important; }
#view .module-location > nav + .module-one-tabs { border-top: 1px solid #d5e2f1; padding-top: var(--pe4d-space) !important; }
#view :is(.experience-rubric-tab,.expert-reference-tabs > details,.guide-accordion > details,.content-item,.cpeip-task,.cpeip-indicator) {
  position: relative !important;
  z-index: auto !important;
  margin: 0 0 12px !important;
  transform: none !important;
}
#view :is(.experience-rubric-tab,.expert-reference-tabs > details,.guide-accordion > details,.content-item,.cpeip-task,.cpeip-indicator):last-child { margin-bottom: 0 !important; }
#view :is(.experience-rubric-tab,.expert-reference-tabs > details,.guide-accordion > details,.content-item,.cpeip-task,.cpeip-indicator) > summary {
  min-height: 56px;
  line-height: 1.4 !important;
}

/* Contrato de contraste: todo control azul activo usa blanco real en toda su descendencia. */
#view :is(
  .tab.active,
  .section-tab.active,
  .primary-tab.active,
  .nav-btn.active,
  .module-location > nav > button.active,
  .module-one-tabs > button.active,
  .module-tutorial-step.active,
  .module-tutorial-step[aria-selected="true"],
  .stage-tabs button.active,
  .rubric-module-tabs button.active,
  .experience-tabs button.active,
  .premium-video-chapters button.active,
  .ux-space-tab.is-active,
  .scheme-3d-stage.is-active,
  .scheme-node.is-current,
  [role="tab"][aria-selected="true"]
) {
  border-color: var(--pe4d-gold) !important;
  background: linear-gradient(135deg, var(--pe4d-blue), var(--pe4d-navy)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 3px rgba(255,209,102,.24), 0 12px 25px rgba(7,47,95,.24) !important;
}
#view :is(
  .tab.active,
  .section-tab.active,
  .primary-tab.active,
  .nav-btn.active,
  .module-location > nav > button.active,
  .module-one-tabs > button.active,
  .module-tutorial-step.active,
  .module-tutorial-step[aria-selected="true"],
  .stage-tabs button.active,
  .rubric-module-tabs button.active,
  .experience-tabs button.active,
  .premium-video-chapters button.active,
  .ux-space-tab.is-active,
  .scheme-3d-stage.is-active,
  .scheme-node.is-current,
  [role="tab"][aria-selected="true"]
) :is(span,strong,small,b,em,i,p) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
/* Las insignias de número conservan contraste inverso dentro de la pestaña activa. */
#view :is(.module-location > nav > button.active,.module-tutorial-step.active,.module-tutorial-step[aria-selected="true"]) > :is(b,span:first-child) {
  background: #fff !important;
  color: var(--pe4d-navy) !important;
  -webkit-text-fill-color: var(--pe4d-navy) !important;
}

/* Controles inactivos: superficies claras, altura estable y lectura completa. */
#view :is(
  .module-location > nav > button,
  .module-one-tabs > button,
  .module-tutorial-step,
  .stage-tabs button,
  .rubric-module-tabs button,
  .experience-tabs button,
  .premium-video-chapters button,
  [role="tab"]
) {
  min-height: 54px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 12px 15px !important;
  border-radius: 15px !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.35 !important;
}

/* Iconografía de alto acabado, consistente entre módulos. */
#view :is(
  .module-overview-card > header > span,
  .module-task-list > button > span,
  .module-tutorial-step > span,
  .module-visual-step > span,
  .roadmap-marker,
  .scheme-node-number,
  .recording-script-step header > span,
  .cpeip-task > summary > span,
  .cpeip-indicator > summary > span
) {
  position: relative;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.68) !important;
  background: linear-gradient(145deg,#fff 0%,#dcecff 48%,#bcd8f5 100%) !important;
  color: var(--pe4d-navy) !important;
  -webkit-text-fill-color: var(--pe4d-navy) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 8px 18px rgba(7,47,95,.18) !important;
}

/* 4D: profundidad, luz que sigue al puntero y respuesta suave; sin perder estabilidad. */
#view :is(.module-overview-card,.module-tutorial,.cpeip-rubric-shell,.experience-builder,.expert-reference-tabs) {
  --pe4d-rx: 0deg;
  --pe4d-ry: 0deg;
  --pe4d-lx: 50%;
  --pe4d-ly: 18%;
  transform: perspective(1500px) rotateX(var(--pe4d-rx)) rotateY(var(--pe4d-ry));
  transform-style: preserve-3d;
  transform-origin: center;
  background-image: radial-gradient(circle at var(--pe4d-lx) var(--pe4d-ly),rgba(255,255,255,.8),transparent 30%),linear-gradient(145deg,#fff,#f5f9ff) !important;
  box-shadow: 0 26px 70px rgba(7,47,95,.13), inset 0 1px rgba(255,255,255,.9) !important;
  transition: transform .28s cubic-bezier(.2,.75,.2,1),box-shadow .28s ease,border-color .28s ease;
}
#view :is(.module-overview-card,.module-tutorial,.cpeip-rubric-shell,.experience-builder,.expert-reference-tabs).pe-4d-active {
  border-color: #8cb5df !important;
  box-shadow: 0 34px 85px rgba(7,47,95,.2),0 0 0 1px rgba(39,211,206,.25),inset 0 1px rgba(255,255,255,.95) !important;
}
#view :is(.module-overview-card,.module-tutorial,.cpeip-rubric-shell,.experience-builder,.expert-reference-tabs) > * {
  transform: translateZ(1px);
}
#view :is(button,a,summary,[role="tab"]):focus-visible {
  outline: 4px solid var(--pe4d-gold) !important;
  outline-offset: 3px !important;
}

/* Ruta 4D principal: cuatro hitos conectados, comprensibles y confiables. */
.module-route-4d {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: clamp(14px,2vw,24px);
  margin: 24px 0 30px;
  padding: 36px 22px 28px;
  border: 1px solid #8fb4dc;
  border-radius: 28px;
  background: radial-gradient(circle at 12% 20%,rgba(39,211,206,.2),transparent 24%),radial-gradient(circle at 86% 74%,rgba(255,209,102,.2),transparent 25%),linear-gradient(145deg,#061b3a,#0b3d78 58%,#082a55);
  box-shadow: 0 32px 80px rgba(5,35,73,.28),inset 0 1px rgba(255,255,255,.18);
  perspective: 1600px;
  isolation: isolate;
  overflow: hidden;
}
.module-route-4d::before { content:"RUTA INTERACTIVA 4D"; position:absolute; top:13px; left:22px; color:#aeeeee; font-size:10px; font-weight:950; letter-spacing:.15em; }
.module-route-4d-track { position:absolute; z-index:0; left:10%; right:10%; top:77px; height:6px; border-radius:99px; background:rgba(255,255,255,.18); box-shadow:inset 0 1px 3px rgba(0,0,0,.35),0 0 20px rgba(39,211,206,.25); }
.module-route-4d-track i { display:block; width:78%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#41e0d4,#8db6ff,#ffd166); box-shadow:0 0 18px rgba(65,224,212,.75); }
.module-route-4d-stop { --stop:#6b55cf; position:relative; z-index:1; display:grid; justify-items:center; min-width:0; min-height:175px; padding:17px 13px 15px; border:1px solid rgba(255,255,255,.38); border-radius:22px; background:linear-gradient(155deg,rgba(255,255,255,.19),rgba(255,255,255,.07)); color:#fff; text-align:center; font:inherit; cursor:pointer; backdrop-filter:blur(14px); transform:translateZ(18px); transform-style:preserve-3d; box-shadow:0 18px 36px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.28); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease; }
.module-route-4d-stop:nth-of-type(2) { transform:translateZ(18px) translateY(9px); }
.module-route-4d-stop:nth-of-type(3) { transform:translateZ(18px) translateY(18px); }
.module-route-4d-stop:nth-of-type(4) { transform:translateZ(18px) translateY(27px); }
.module-route-4d-stop:hover,.module-route-4d-stop:focus-visible { transform:translateZ(42px) translateY(-5px); border-color:#ffd166; background:linear-gradient(155deg,rgba(255,255,255,.28),rgba(255,255,255,.1)); box-shadow:0 28px 55px rgba(0,0,0,.3),0 0 0 3px rgba(255,209,102,.18),inset 0 1px rgba(255,255,255,.4); }
.module-route-4d-stop > span { display:grid; place-items:center; width:54px; height:54px; margin-top:1px; border:2px solid #fff; border-radius:18px; background:linear-gradient(145deg,#7e67e4,#4a36a9); color:#fff; font-size:23px; font-weight:950; box-shadow:0 13px 25px rgba(0,0,0,.25),0 0 0 7px rgba(255,255,255,.08); transform:translateZ(28px); }
.module-route-4d-cyan > span { background:linear-gradient(145deg,#20c7c3,#08727c); }
.module-route-4d-gold > span { background:linear-gradient(145deg,#f3b43b,#9a5b05); }
.module-route-4d-finish > span { background:linear-gradient(145deg,#34aa78,#126346); }
.module-route-4d-stop small,.module-route-4d-stop strong,.module-route-4d-stop em { display:block; color:#fff !important; -webkit-text-fill-color:#fff !important; }
.module-route-4d-stop small { margin-top:13px; font-size:10px; font-weight:900; letter-spacing:.08em; }
.module-route-4d-stop strong { margin-top:5px; font-size:13px; line-height:1.28; }
.module-route-4d-stop em { align-self:end; margin-top:10px; color:#c9f6f0 !important; -webkit-text-fill-color:#c9f6f0 !important; font-size:10px; font-style:normal; font-weight:800; }
.module-overview-card > header > span,.modules-closing > span { grid-template-rows:1fr auto; font-size:20px; line-height:1; }
.module-overview-card > header > span small,.modules-closing > span small { margin-top:2px; color:inherit !important; -webkit-text-fill-color:inherit !important; font-size:8px; font-weight:950; }

@media (max-width: 720px) {
  #view :is(.module-location > nav,.module-one-tabs,.module-tutorial-tabs,.experience-tabs,.stage-tabs,.rubric-module-tabs,.ux-space-switcher,.primary-tabs) {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  #view :is(.module-overview-card,.module-tutorial,.cpeip-rubric-shell,.experience-builder,.expert-reference-tabs) {
    transform: none !important;
  }
  .module-route-4d { grid-template-columns:1fr; padding:42px 14px 18px 54px; overflow:visible; }
  .module-route-4d-track { left:26px; right:auto; top:66px; bottom:64px; width:6px; height:auto; }
  .module-route-4d-track i { width:100%; height:78%; }
  .module-route-4d-stop,.module-route-4d-stop:nth-of-type(2),.module-route-4d-stop:nth-of-type(3),.module-route-4d-stop:nth-of-type(4) { min-height:128px; justify-items:start; text-align:left; transform:none; }
  .module-route-4d-stop:hover,.module-route-4d-stop:focus-visible { transform:translateX(3px); }
  .module-route-4d-stop > span { position:absolute; left:-45px; top:30px; width:42px; height:42px; border-radius:14px; font-size:18px; }
}
@media (prefers-reduced-motion: reduce) {
  #view :is(.module-overview-card,.module-tutorial,.cpeip-rubric-shell,.experience-builder,.expert-reference-tabs) {
    transform: none !important;
    transition: none !important;
  }
}