/* La guía comparte colores y tipografía con el portal. */
.student-guide {
  min-width: 0;
}
.student-guide > .section-block:not(:first-child) {
  margin-top: 3.5rem;
}
.student-guide > .guide-route {
  margin-top: 2rem;
}
.student-guide [hidden] {
  display: none !important;
}
.student-guide h1 {
  max-width: 22ch;
}
.student-guide h3 {
  color: #00355f;
  line-height: 1.3;
}
.student-guide p {
  overflow-wrap: anywhere;
}
.guide-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 2rem;
  align-items: start;
}
.guide-objective {
  border-top: .3rem solid #006972;
}
.guide-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
}
.guide-route {
  margin-block: 0 3rem;
  padding: 1rem 1.4rem;
  background: #eaf1fa;
  border: 1px solid #d5dce2;
  border-radius: .75rem;
}
.guide-route ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.4rem;
}
.guide-route a {
  font-weight: 700;
}
.guide-tinted {
  background: #edf3ff;
  border-radius: 1rem;
  padding: 2rem;
}
.guide-semantic-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 1.5rem;
  align-items: start;
}
.semantic-map-document {
  display: grid;
  gap: .55rem;
}
.semantic-map-document a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .3rem .8rem;
  padding: .8rem 1rem;
  background: #eaf1fa;
  color: #00355f;
  border: 2px solid transparent;
  border-radius: .45rem;
  font-family: ui-monospace, Consolas, monospace;
  font-weight: 700;
  text-decoration: none;
}
.semantic-map-document a span {
  font-family: system-ui, sans-serif;
  font-size: .85rem;
  font-weight: 500;
}
.semantic-map-document a[aria-current="true"] {
  background: #00355f;
  color: #fff;
  border-color: #00355f;
}
.semantic-map-document a:hover {
  text-decoration: underline;
}
.semantic-map-main {
  display: grid;
  gap: .55rem;
  padding: .7rem;
  border: 2px dashed #006972;
  border-radius: .5rem;
}
.semantic-detail {
  min-width: 0;
}
.semantic-detail article + article {
  margin-top: 1rem;
}
.semantic-detail .badge {
  font-family: ui-monospace, Consolas, monospace;
}
.guide-hugo {
  margin-top: 1.5rem;
}
.student-guide pre {
  background: #202d38;
  color: #f7f9ff;
  font: .875rem/1.65 ui-monospace, Consolas, monospace;
  padding: 1.2rem;
  border-radius: .6rem;
  overflow: auto;
  max-width: 100%;
  tab-size: 2;
}
.student-guide pre code {
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  overflow-wrap: normal;
}
.student-guide :not(pre) > code {
  font: .9em ui-monospace, Consolas, monospace;
  background: #e9eff6;
  color: #00355f;
  padding: .1em .3em;
  border-radius: .2rem;
  overflow-wrap: anywhere;
}
.guide-principles {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.guide-principles .card {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.guide-principles .text-link {
  margin-top: auto;
}
.guide-contrast {
  margin-top: 1.5rem;
}
.guide-contrast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin-block: 1.5rem;
}
.guide-contrast figure {
  margin: 0;
}
.contrast-swatch {
  min-height: 6rem;
  display: flex;
  align-items: center;
  padding: 1rem;
  border: 1px solid #d5dce2;
  border-radius: .5rem;
  font-weight: 700;
}
.contrast-blue {
  color: #fff;
  background: #00355f;
}
.contrast-teal {
  color: #fff;
  background: #006972;
}
.contrast-low {
  color: #aaa;
  background: #fff;
}
.guide-contrast figcaption {
  margin-top: .7rem;
  font-size: .9rem;
}
.guide-workshop-intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.5rem;
}
.guide-file-list {
  padding-left: 1.3rem;
}
.guide-file-list li {
  margin-block: .65rem;
}
.guide-timer {
  text-align: center;
}
.guide-timer .guide-actions {
  justify-content: center;
}
.guide-timer-display {
  display: block;
  color: #00355f;
  font-size: 3rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}
.guide-timer-status {
  min-height: 3.2em;
}
.guide-copy-status {
  min-height: 1.6em;
  color: #006972;
  font-weight: 650;
}
.guide-code-file {
  margin-block: 1.5rem 2rem;
  min-width: 0;
}
.guide-code-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  background: #e2ebf7;
  border-radius: .6rem .6rem 0 0;
  padding: .7rem 1rem;
}
.guide-code-heading h3 {
  margin: 0;
  font: 700 1rem ui-monospace, Consolas, monospace;
}
.guide-code-file pre {
  margin: 0;
  border-radius: 0 0 .6rem .6rem;
  max-height: 28rem;
}
.guide-challenges {
  align-items: start;
}
.guide-challenges details {
  border-top: 1px solid #d5dce2;
  margin-top: 1.3rem;
  padding-top: 1rem;
}
.guide-challenges summary {
  color: #00355f;
  cursor: pointer;
  font-weight: 700;
  padding: .3rem;
}
.guide-challenges pre {
  font-size: .8rem;
}
.guide-closing {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 3rem;
  padding: 2rem;
  border: 1px solid #d5dce2;
  border-left: .35rem solid #006972;
  border-radius: .8rem;
  background: #fff;
}
.guide-closing > div {
  flex: 1 1 20rem;
}
.guide-closing h2 {
  font-size: 1.6rem;
}