/* Experiencia unificada de los módulos: video visible, guía Luma y pasos interactivos. */
.module-tutorial {
  display: grid !important;
  grid-template-columns: minmax(300px, .82fr) minmax(420px, 1.18fr) !important;
  grid-template-areas: "heading video" "work work";
  gap: 20px !important;
  align-items: stretch !important;
  padding: clamp(18px, 2.4vw, 28px) !important;
  border: 1px solid #cddced !important;
  background: linear-gradient(145deg,#f8fbff 0%,#f2f8ff 58%,#fff9ec 100%) !important;
}
.module-tutorial-heading { grid-area: heading; display: grid; align-content: start; gap: 14px; min-width: 0; }
.module-tutorial-copy h3 { color: #102f58 !important; }
.module-tutorial-copy p { color: #40556f !important; }
.module-luma-guide { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid #b8d8d3; border-radius: 16px; background: #eefaf7; }
.module-luma-guide img { flex: 0 0 64px; width: 64px; height: 64px; object-fit: contain; }
.module-luma-guide div { min-width: 0; }
.module-luma-guide small { color: #17645d; font-size: .69rem; font-weight: 900; letter-spacing: .09em; }
.module-luma-guide p { margin: 4px 0 0 !important; color: #254f4c !important; font-size: .82rem; line-height: 1.45; }
.module-tutorial-player { grid-area: video; display: grid; align-content: center; padding: 10px !important; min-width: 0; }
.module-tutorial-player video { width: 100% !important; min-height: 220px; aspect-ratio: 16/9 !important; object-fit: contain !important; }
.module-tutorial-player > span { padding: 9px 5px 1px; color: #dce9f9; font-size: .72rem; font-weight: 750; text-align: center; }
.module-tutorial-work { grid-area: work; min-width: 0; padding-top: 2px; }
.module-tutorial-work > h4 { margin: 0 0 12px; color: #17365f; font-size: 1rem; }
.module-tutorial-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.module-tutorial-step { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 10px; min-width: 0; padding: 13px; border: 1px solid #bfd0e4; border-radius: 15px; background: #fff; color: #17365f; text-align: left; cursor: pointer; transition: border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease; }
.module-tutorial-step > span { grid-row: 1/4; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #eaf3ff; font-size: 1.25rem; }
.module-tutorial-step small { color: #57718f; font-size: .65rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.module-tutorial-step strong { color: #17365f; font-size: .86rem; }
.module-tutorial-step em { color: #4c6179; font-size: .72rem; font-style: normal; }
.module-tutorial-step:hover { border-color: #366a9e; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(23,54,95,.1); }
.module-tutorial-step.active,
.module-tutorial-step[aria-selected="true"] { border-color: #0b3b6a !important; background: #0b3b6a !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: 0 10px 22px rgba(11,59,106,.2); }
.module-tutorial-step.active :is(small,strong,em),
.module-tutorial-step[aria-selected="true"] :is(small,strong,em) { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.module-tutorial-step.active > span,
.module-tutorial-step[aria-selected="true"] > span { background: #fff !important; color: #0b3b6a !important; -webkit-text-fill-color: #0b3b6a !important; }
.module-tutorial-step:focus-visible { outline: 3px solid #f4c95d; outline-offset: 3px; }
.module-step-panels { margin-top: 10px; }
.module-step-panel { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 16px; border-left: 4px solid #21a090; border-radius: 14px; background: #eefaf7; }
.module-step-panel[hidden] { display: none !important; }
.module-step-panel > div { display: flex; gap: 10px; align-items: center; min-width: 0; }
.module-step-panel img { flex: 0 0 46px; width: 46px; height: 46px; object-fit: contain; }
.module-step-panel span { min-width: 0; }
.module-step-panel small { color: #17645d; font-size: .69rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.module-step-panel p { margin: 3px 0 0 !important; color: #284d4a !important; font-size: .8rem; line-height: 1.45; }
.module-step-panel .btn { flex: 0 0 auto; min-height: 42px; }
.module-practices { background: #fff !important; }
.module-tutorial-actions { margin-top: 12px; }

/* Toda pestaña azul seleccionada conserva texto blanco y legible. */
#view :is(.module-location nav button.active,.module-one-tabs button.active,.experience-rubric-tab[open] > summary,.module-tutorial-step.active,.module-tutorial-step[aria-selected="true"]) { color: #fff !important; -webkit-text-fill-color: #fff !important; }
#view :is(.module-location nav button.active,.module-one-tabs button.active,.experience-rubric-tab[open] > summary,.module-tutorial-step.active,.module-tutorial-step[aria-selected="true"]) :is(span,strong,small,b,em,i) { color: inherit !important; -webkit-text-fill-color: inherit !important; }

@media (max-width: 900px) {
  .module-tutorial { grid-template-columns: 1fr !important; grid-template-areas: "heading" "video" "work"; }
  .module-tutorial-player video { min-height: 0; }
}
@media (max-width: 650px) {
  .module-tutorial-tabs { grid-template-columns: 1fr; }
  .module-step-panel { align-items: stretch; flex-direction: column; }
  .module-step-panel .btn { width: 100%; }
  .module-luma-guide img { flex-basis: 54px; width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .module-tutorial-step { transition: none; }
  .module-tutorial-step:hover { transform: none; }
}