/* ═══════════════════════════════════════════════════
   TOKENS · Sistema de Diseño UC3M IMPULSO (subset)
   ═══════════════════════════════════════════════════ */
:root {
  /* Paleta primaria UC3M */
  --azul-reflex:    #171796;
  --azul-deep:      #0F0F6B;
  --azul-mid:       #3A3AB8;
  --azul-light:     #6868D4;
  --azul-pale:      #E8E8F7;
  --azul-ghost:     #F2F2FB;

  /* Neutros */
  --white:          #FFFFFF;
  --gris-claro:     #F7F6F6;
  --gris-100:       #EFEFEF;
  --gris-200:       #E0E0E0;
  --gris-300:       #C4C4C4;
  --gris-400:       #9E9E9E;
  --gris-500:       #757575;
  --gris-600:       #545454;
  --gris-700:       #3A3A3A;
  --ink:            #1A1A1A;
  --ink-soft:       #4A4A4A;

  /* Acentos funcionales */
  --acento-teal:      #1A9E7A;
  --acento-teal-pale: #E6F7F1;
  --acento-amber:     #E8A317;
  --acento-amber-pale:#FFF7E6;
  --acento-coral:     #E05555;
  --acento-coral-pale:#FDECEC;

  /* Tipografía */
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* Escala tipográfica · Major Third (1.25) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.563rem;
  --text-2xl:  1.953rem;
  --text-3xl:  2.441rem;
  --text-4xl:  3.052rem;

  /* Espaciado base-4 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* Radios */
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-pill:100px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(23,23,150,0.06);
  --shadow-md: 0 4px 12px rgba(23,23,150,0.08);
  --shadow-lg: 0 8px 30px rgba(23,23,150,0.10);
}

/* ═══════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--gris-claro);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--azul-reflex); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════
   HEADER · marca + atribución + nav
   ═══════════════════════════════════════════════════ */
header.site {
  background: var(--white);
  border-bottom: 2px solid var(--azul-reflex);
  position: sticky; top: 0; z-index: 100;
}
header.site .shell {
  max-width: 1080px; margin: 0 auto;
  padding: var(--sp-3) var(--sp-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
}
.brand { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
a.brand:hover { text-decoration: none; }
.brand-name {
  font-family: var(--serif);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-decoration: none;
}
.brand-name:hover { text-decoration: none; }
.brand-name .dot { color: var(--azul-reflex); }
.brand-attrib {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-600);   /* era --gris-400: 2,68:1 sobre blanco, por debajo del mínimo */
  margin-top: 3px;
  font-weight: 500;
}

nav.primary { display: flex; gap: var(--sp-1); }
nav.primary a {
  padding: 7px var(--sp-4);
  color: var(--gris-600);
  text-decoration: none;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all 0.15s;
  border: 1px solid transparent;
}
nav.primary a:hover { background: var(--azul-ghost); color: var(--azul-reflex); text-decoration: none; }
nav.primary a.active { background: var(--azul-reflex); color: var(--white); font-weight: 600; }

/* ═══════════════════════════════════════════════════
   STATUS STRIP · asignatura + estado + acciones
   ═══════════════════════════════════════════════════ */
.status-strip {
  background: var(--azul-ghost);
  border-bottom: 1px solid var(--azul-pale);
}
.status-strip .shell {
  max-width: 1080px; margin: 0 auto;
  padding: var(--sp-2) var(--sp-6);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
  font-size: var(--text-xs);
}
.status-strip .info { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.status-strip .info-item { display: flex; align-items: center; gap: var(--sp-2); }
.status-strip .info-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--azul-mid); font-weight: 600;
}
.status-strip .info-value { color: var(--ink); font-weight: 500; }
.status-strip .actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* El nombre de la asignatura se edita en el sitio, pinchando sobre él. */
.status-strip .info-value.editable {
  cursor: text;
  border-bottom: 1px dashed var(--gris-300);
  padding-bottom: 1px;
}
.status-strip .info-value.editable:hover { border-bottom-color: var(--azul-reflex); }
.status-strip .info-value.editable:focus-visible {
  outline: 2px solid var(--azul-reflex);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.status-strip .info-value.placeholder { color: var(--gris-600); font-weight: 400; font-style: italic; }
.status-strip .course-input {
  font-family: var(--sans); font-size: var(--text-sm); color: var(--ink);
  border: 1px solid var(--azul-reflex); border-radius: var(--radius-sm);
  padding: 2px var(--sp-2); min-width: 220px; background: var(--white);
}
.status-strip .course-input:focus { outline: 2px solid var(--azul-pale); outline-offset: 1px; }

/* ═══════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 10px 22px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}
.btn.primary { background: var(--azul-reflex); color: var(--white); }
.btn.primary:hover { background: var(--azul-deep); text-decoration: none; }
.btn.outline { background: transparent; color: var(--azul-reflex); border-color: var(--azul-reflex); }
.btn.outline:hover { background: var(--azul-ghost); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--azul-mid); }
.btn.ghost:hover { background: var(--azul-ghost); text-decoration: none; }
.btn.small { padding: 6px 14px; font-size: var(--text-xs); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.btn:focus-visible { outline: 2px solid var(--azul-reflex); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════
   MAIN LAYOUT
   ═══════════════════════════════════════════════════ */
main {
  max-width: 1080px; margin: 0 auto;
  padding: var(--sp-10) var(--sp-6) var(--sp-16);
}

/* Breadcrumb */
.breadcrumb {
  font-family: var(--mono); font-size: 11px;
  color: var(--gris-600); margin-bottom: var(--sp-3);
  letter-spacing: 0.02em;
}
.breadcrumb a { color: var(--gris-600); text-decoration: none; }
.breadcrumb a:hover { color: var(--azul-reflex); }

/* Section chip (kicker) */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azul-reflex);
  margin-bottom: var(--sp-3);
}
.chip::before {
  content: ''; width: 24px; height: 2px;
  background: var(--azul-mid);
}

/* Headings */
h1 {
  font-family: var(--serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: var(--sp-3);
}
h2 {
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
  margin: var(--sp-10) 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--gris-200);
  letter-spacing: -0.01em;
}
h3 {
  font-family: var(--sans);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
  margin: var(--sp-4) 0 var(--sp-2);
}
p { margin-bottom: var(--sp-3); color: var(--gris-700); }
ul { margin-left: var(--sp-5); margin-bottom: var(--sp-4); }
ul li { margin-bottom: var(--sp-2); color: var(--gris-700); }

/* Lead paragraph */
.lead {
  font-family: var(--serif);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--gris-600);
  max-width: 720px;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════ */
.hero {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-10) var(--sp-10);
  margin-bottom: var(--sp-8);
  position: relative;
  overflow: hidden;
}
.hero.dark {
  background: linear-gradient(135deg, var(--azul-reflex) 0%, var(--azul-deep) 100%);
  color: var(--white);
}
.hero.dark::before {
  content: ''; position: absolute; top: -100px; right: -60px;
  width: 340px; height: 340px; border-radius: 50%;
  background: rgba(255,255,255,0.04); pointer-events: none;
}
.hero.dark h1, .hero.dark p { color: var(--white); position: relative; z-index: 1; }
.hero.dark .chip { color: rgba(255,255,255,0.75); }
.hero.dark .chip::before { background: rgba(255,255,255,0.4); }
.hero.dark .hero-meta { color: rgba(255,255,255,0.75); }
.hero.dark .hero-meta strong { color: var(--white); }

.hero p { font-size: var(--text-md); line-height: 1.65; max-width: 720px; margin-bottom: var(--sp-4); }
.hero-meta {
  display: flex; gap: var(--sp-10); margin-top: var(--sp-5); flex-wrap: wrap;
  color: var(--gris-600); font-size: var(--text-sm);
}
.hero-meta strong { color: var(--ink); display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; }
.hero-actions { margin-top: var(--sp-6); display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════
   CONTINUE BANNER (visita recurrente)
   ═══════════════════════════════════════════════════ */
.continue-banner {
  background: linear-gradient(135deg, var(--azul-reflex) 0%, var(--azul-deep) 100%);
  color: var(--white);
  padding: var(--sp-6) var(--sp-8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--sp-8);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-5); flex-wrap: wrap;
}
.continue-banner .continue-chip {
  font-family: var(--mono); font-size: 10px;
  color: rgba(255,255,255,0.6); text-transform: uppercase;
  letter-spacing: 0.16em; margin-bottom: var(--sp-2);
}
.continue-banner h2 {
  font-family: var(--serif); font-size: var(--text-xl); font-weight: 600;
  color: var(--white); margin: 0; padding: 0; border: none;
}
.continue-banner .subtext {
  color: rgba(255,255,255,0.75); font-size: var(--text-sm); margin-top: var(--sp-2);
}
.continue-banner .btn.primary {
  background: var(--white); color: var(--azul-reflex);
  border-color: var(--white);
}
.continue-banner .btn.primary:hover { background: var(--gris-claro); }

/* ═══════════════════════════════════════════════════
   CARDS & GRIDS
   ═══════════════════════════════════════════════════ */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

.card {
  background: var(--white);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  transition: box-shadow 0.2s, transform 0.2s;
}
.card-linkable { cursor: pointer; text-decoration: none; color: inherit; display: block; }
.card-linkable:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; color: inherit; }
.card .meta {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--azul-mid); margin-bottom: var(--sp-2); font-weight: 600;
}
.card h3 { margin-top: 0; margin-bottom: var(--sp-2); }
.card p { font-size: var(--text-sm); color: var(--gris-500); margin-bottom: var(--sp-2); line-height: 1.6; }
.card .card-link { font-size: var(--text-sm); font-weight: 600; color: var(--azul-reflex); }

.card.with-accent { border-top: 3px solid var(--azul-reflex); }
.card.muted { opacity: 0.55; }

/* ═══════════════════════════════════════════════════
   STEP BLOCK · paso del proceso
   ═══════════════════════════════════════════════════ */
.step-block {
  background: var(--white);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--azul-reflex);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6) var(--sp-6);
  margin: var(--sp-4) 0;
}
.step-block .step-num {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--azul-mid); font-weight: 600; margin-bottom: var(--sp-1);
}
.step-block h3 { margin-top: 0; font-family: var(--serif); font-size: var(--text-lg); font-weight: 600; }
/* Se atenúa el borde, no el texto: el opacity global bajaba el contraste del
   rótulo del paso a 4,1:1. */
.step-block.muted { border-left-color: var(--gris-300); background: var(--gris-050, #FAFAFA); }
.step-block.muted .step-num { color: var(--gris-600); }

/* ═══════════════════════════════════════════════════
   PRINCIPLE · bloque de principio numerado
   ═══════════════════════════════════════════════════ */
.principle {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gris-200);
  padding: var(--sp-5);
  margin: var(--sp-3) 0;
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: start;
}
.principle .num {
  font-family: var(--serif);
  font-size: var(--text-2xl);
  color: var(--azul-reflex);
  font-weight: 700;
  line-height: 1;
  min-width: 44px;
}
.principle h3 { margin-top: 0; margin-bottom: var(--sp-1); }
.principle p { margin-bottom: 0; font-size: var(--text-sm); color: var(--gris-600); }

/* ═══════════════════════════════════════════════════
   TOOL CARD · pieza descargable
   ═══════════════════════════════════════════════════ */
.tool-card {
  background: var(--white);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-2) 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-5); transition: box-shadow 0.15s;
}
.tool-card:hover { box-shadow: var(--shadow-sm); border-color: var(--azul-pale); }
.tool-card .body h3 { margin-top: 0; margin-bottom: var(--sp-1); font-size: var(--text-base); font-family: var(--sans); }
.tool-card .body .meta {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--azul-mid); margin-bottom: var(--sp-1); font-weight: 600;
}
.tool-card .body p { margin-bottom: 0; color: var(--gris-500); font-size: var(--text-sm); }
.tool-card .actions { white-space: nowrap; flex-shrink: 0; display: flex; gap: var(--sp-1); }

/* ═══════════════════════════════════════════════════
   CALLOUT
   ═══════════════════════════════════════════════════ */
.callout {
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  line-height: 1.65;
  display: flex; gap: var(--sp-3); align-items: flex-start;
  margin: var(--sp-3) 0;
}
.callout.wireframe {
  background: var(--azul-ghost);
  border-left: 3px solid var(--azul-mid);
  color: var(--azul-deep);
  font-style: italic;
}
.callout.wireframe::before {
  content: "nota de diseño";
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; font-style: normal;
  padding: 2px 8px; background: var(--azul-pale);
  border-radius: var(--radius-sm); align-self: flex-start;
  flex-shrink: 0;
}
.callout.info {
  background: var(--azul-ghost);
  border-left: 3px solid var(--azul-reflex);
  color: var(--azul-deep);
}
.callout.info::before {
  content: "nota"; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700;
  padding: 2px 8px; background: var(--azul-pale);
  border-radius: var(--radius-sm); align-self: flex-start;
  flex-shrink: 0; color: var(--azul-reflex);
}

/* ═══════════════════════════════════════════════════
   PROGRESS BAR & CHECKBOXES
   ═══════════════════════════════════════════════════ */
.progress-bar { background: var(--gris-100); height: 6px; border-radius: var(--radius-pill); overflow: hidden; margin: var(--sp-3) 0; }
.progress-bar .fill { background: var(--azul-reflex); height: 100%; transition: width 0.3s; }

.checkbox {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-2) 0; font-size: var(--text-sm); color: var(--gris-700);
  cursor: pointer;
  user-select: none;
}
.checkbox .box {
  width: 18px; height: 18px;
  border: 1.5px solid var(--gris-500);   /* elemento de interfaz: necesita 3:1 */
  border-radius: var(--radius-sm);
  flex-shrink: 0; margin-top: 2px; background: var(--white);
  position: relative;
  transition: all 0.15s;
}
.checkbox:hover .box { border-color: var(--azul-reflex); }
.checkbox.done .box { background: var(--azul-reflex); border-color: var(--azul-reflex); }
.checkbox.done .box::after {
  content: "✓"; color: var(--white); position: absolute;
  top: -4px; left: 2px; font-size: 13px; font-weight: 700;
}
.checkbox.done .label { color: var(--gris-500); text-decoration: line-through; }
.checkbox:focus-visible {
  outline: 2px solid var(--azul-reflex);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Aviso junto al botón de cierre de sprint: cuántos pasos faltan por marcar. */
.complete-hint {
  display: inline-block;
  margin-left: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--gris-600);
}
.complete-hint:empty { display: none; }

/* ═══════════════════════════════════════════════════
   WORK PANEL
   ═══════════════════════════════════════════════════ */
.work-panel {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gris-200);
  padding: var(--sp-6);
  margin: var(--sp-4) 0;
}

/* ═══════════════════════════════════════════════════
   FAQ & GLOSARIO
   ═══════════════════════════════════════════════════ */
.faq-item {
  background: var(--white);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-2) 0;
}
.faq-item h3 {
  margin-top: 0; margin-bottom: var(--sp-2);
  font-family: var(--sans); font-size: var(--text-base); font-weight: 600;
  color: var(--azul-deep);
}
.faq-item p { font-size: var(--text-sm); margin-bottom: 0; color: var(--gris-600); }

.glossary-item {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--gris-100);
}
.glossary-item dt {
  font-family: var(--mono); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--azul-reflex); font-weight: 600; margin-bottom: 2px;
}
.glossary-item dd {
  font-size: var(--text-sm); color: var(--gris-700);
}

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */
footer {
  border-top: 1px solid var(--gris-200);
  background: var(--white);
  padding: var(--sp-5) var(--sp-6);
  color: var(--gris-500);
  font-size: var(--text-xs);
}
footer .shell {
  max-width: 1080px; margin: 0 auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
}
footer a { color: var(--gris-500); }
footer a:hover { color: var(--azul-reflex); }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (max-width: 780px) {
  header.site .shell { flex-wrap: wrap; gap: var(--sp-3); }
  nav.primary { flex-wrap: wrap; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .hero { padding: var(--sp-6); }
  .hero-meta { gap: var(--sp-5); }
  .tool-card { flex-direction: column; }
  .principle { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════
   ACCESIBILIDAD
   ═══════════════════════════════════════════════════ */

/* Saltar la cabecera y la barra de estado: eran 11 tabulaciones antes de
   llegar al contenido, en cada carga de página. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--azul-reflex); color: var(--white);
  padding: 10px 18px; border-radius: 0 0 var(--radius-md) 0;
  font-size: var(--text-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Texto que solo existe para quien usa lector de pantalla. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Objetivos táctiles: los botones pequeños se quedaban en 28 px de alto. */
.btn.small { min-height: 32px; }
.status-strip .actions .btn { min-height: 32px; }

/* Quien pide menos movimiento, menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .card-linkable:hover { transform: none; }
}

/* Un paso de un sprint bloqueado se ve bloqueado, y no solo al intentarlo. */
.checkbox[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.checkbox[aria-disabled="true"]:hover .box { border-color: var(--gris-500); }

/* ═══════════════════════════════════════════════════
   CAPAS DE INFORMACIÓN
   Varios profesores dicen que la aplicación es prolija. Lo es a propósito:
   el detalle está porque hace falta cuando hace falta. Lo que no puede ser
   es que esté siempre delante. La primera capa —lo que se lee al abrir—
   dice qué es esto, qué toca hacer ahora y cuánto cuesta; el resto se abre
   a un clic. Se usa <details>, que ya funciona con teclado y con lector
   de pantalla sin que tengamos que reconstruirlo.
   ═══════════════════════════════════════════════════ */

.capa {
  border-top: 1px solid var(--gris-200);
  margin: var(--sp-5) 0;
}
.capa > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-4) 0;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-family: var(--sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--azul-reflex);
}
.capa > summary::-webkit-details-marker { display: none; }
.capa > summary::before {
  content: '+';
  font-family: var(--mono);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1;
  color: var(--azul-mid);
  width: 1em;
  flex: none;
}
.capa[open] > summary::before { content: '−'; }
.capa > summary:hover { color: var(--azul-deep); }
.capa > summary:focus-visible {
  outline: 3px solid var(--azul-reflex);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.capa > summary .capa-pista {
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--gris-600);
}
.capa > *:not(summary) { margin-left: calc(1em + var(--sp-3)); }
.capa > :last-child { margin-bottom: var(--sp-5); }

/* Resumen de una línea: lo mínimo que hay que leer para saber si esto va contigo. */
.en-corto {
  background: var(--azul-pale);
  border-left: 3px solid var(--azul-reflex);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
  font-size: var(--text-md);
  line-height: 1.6;
}
.en-corto strong { color: var(--azul-deep); }
.en-corto p:last-child { margin-bottom: 0; }

/* Conmutador de capas, en la barra de estado. En las páginas sin apartados
   plegables el botón se esconde con [hidden], y .btn{display:inline-flex}
   ganaba: se veía un botón que no hacía nada. */
.btn[hidden] { display: none !important; }


.btn[data-action="detalle"][aria-pressed="true"] {
  background: var(--azul-reflex);
  border-color: var(--azul-reflex);
  color: var(--white);
}

/* En papel no hay clics: todo abierto. El CSS por sí solo no basta —el
   navegador oculta el contenido de un <details> cerrado desde su propia hoja
   de estilos—, así que app.v2.js los abre en 'beforeprint' y los deja como
   estaban en 'afterprint'. Esto de aquí es el respaldo por si el JavaScript
   no llegara a ejecutarse. */
@media print {
  .capa > summary::before { content: ''; }
  .capa[open] > summary::before { content: ''; }
  .capa > *:not(summary) { margin-left: 0; display: revert; }
  .capa { display: block; }
  .skip-link, .status-strip .actions { display: none; }
}

/* ═══════════════════════════════════════════════════
   GUIADO
   La aplicación era un documento: el profesor tenía que decidir por su cuenta
   qué tocaba ahora. Estas dos piezas lo dicen —una en la página, la otra en el
   propio paso— usando sólo lo que él mismo ha marcado en este navegador.
   ═══════════════════════════════════════════════════ */

/* Sin esto, la regla de abajo (especificidad de id) gana al [hidden] del
   navegador y, sin JavaScript, quedaba una barra azul vacía en seis páginas. */
#siguiente-paso[hidden] { display: none; }
#siguiente-paso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  background: var(--azul-reflex);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-8) 0 var(--sp-4);
}
#siguiente-paso .sp-texto { font-size: var(--text-md); line-height: 1.5; }
#siguiente-paso .sp-texto strong {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  display: block;
  margin-bottom: 2px;
}
#siguiente-paso .btn.primary {
  background: var(--white);
  color: var(--azul-deep);
  border-color: var(--white);
  flex: none;
}
#siguiente-paso .btn.primary:hover { background: var(--gris-100); }

/* El paso que toca ahora se distingue de los que ya están hechos. */
.step-block.en-curso { border-left-color: var(--azul-reflex); border-left-width: 4px; }
.step-block.ya-hecho { opacity: 0.72; }
.step-block.ya-hecho:hover { opacity: 1; }
.marca-en-curso {
  margin-left: var(--sp-3);
  background: var(--azul-reflex);
  color: var(--white);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media print {
  #siguiente-paso { background: none; color: var(--ink); border: 1px solid var(--gris-300); }
  #siguiente-paso .btn { display: none; }
  .step-block.ya-hecho { opacity: 1; }
}