/* ═══════════════════════════════════════════════════
   TOKENS · Sistema de diseño del kit
   ═══════════════════════════════════════════════════ */
:root {
  /* Paleta primaria */
  --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;
  /* Medida de lectura de la portadilla: título y texto comparten columna. */
  --medida-hero:720px;

  /* 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); }

/* Una sola columna de lectura en la portadilla. El texto va limitado a 720 px
   —unos 75 caracteres a 18 px, que es donde la línea empieza a cansar— y el
   título iba suelto hasta el borde del bloque, 230 px más a la derecha. Esa
   diferencia no se leía como una decisión: se leía como un margen mal puesto.
   Ahora comparten medida y el título rompe donde rompe el texto. */
.hero h1, .hero p { max-width: var(--medida-hero); }
.hero p { font-size: var(--text-md); line-height: 1.65; 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
   ═══════════════════════════════════════════════════ */
/* El aviso era un contenedor flexible, y en un contenedor flexible cada trozo
   de texto suelto y cada <strong> se convierte en una columna: cualquier aviso
   con más de una frase con negritas se rompía en tiras verticales. Ahora la
   etiqueta flota y el texto fluye normal, que es lo que se esperaba siempre. */
.callout {
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  line-height: 1.65;
  margin: var(--sp-3) 0;
}
.callout::before { float: left; margin: 0 var(--sp-3) 0 0; }
.callout::after { content: ''; display: block; clear: both; }
.callout > p { margin-bottom: var(--sp-2); }
.callout > p:last-child { margin-bottom: 0; }
.callout > ul, .callout > ol { margin: var(--sp-2) 0 var(--sp-2) var(--sp-5); }
.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);
}
.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); 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; }
}

/* Lectura de fuera del kit. Se marca como tal para que se distinga de lo que
   el propio kit trae, y no se presenta nunca como obligatoria. */
.lectura {
  font-size: var(--text-sm);
  color: var(--gris-600);
  border-left: 2px solid var(--azul-light);
  padding-left: var(--sp-4);
  margin-top: var(--sp-4);
}
.lectura::before {
  content: 'Lectura recomendada';
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azul-mid);
  margin-bottom: 3px;
}

/* ═══════════════════════════════════════════════════
   RECURSOS PLEGADOS · página del Kit
   La biblioteca se recorre buscando, no leyendo. Por defecto se ve el título
   y los botones; la descripción se abre a un clic, o de golpe con el
   conmutador de la barra de estado, porque es un <details class="capa"> más.
   ═══════════════════════════════════════════════════ */

.tool-card > .capa-recurso {
  flex: 1;
  border-top: none;
  margin: 0;
  min-width: 0;
}
.capa-recurso > summary {
  padding: 0;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.capa-recurso > summary::before {
  color: var(--azul-mid);
  font-size: var(--text-md);
  align-self: center;
}
.capa-recurso .rec-titulo {
  font-family: var(--sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--ink);
}
.capa-recurso > summary:hover .rec-titulo { color: var(--azul-reflex); }
.capa-recurso > summary .capa-pista {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--azul-mid);
  font-weight: 600;
}
.capa-recurso > p {
  margin: var(--sp-2) 0 var(--sp-1) calc(1em + var(--sp-3));
  font-size: var(--text-sm);
  color: var(--gris-700);
  line-height: 1.6;
}
.capa-recurso > :last-child { margin-bottom: 0; }

/* Índice de una página larga que se lee de arriba abajo. No se pliega —plegar
   protege una acción o una comparación, no acorta una lectura—: se navega. */
.indice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  border-top: 1px solid var(--gris-200);
  border-bottom: 1px solid var(--gris-200);
  padding: var(--sp-3) 0;
  margin: var(--sp-5) 0 var(--sp-6);
}
.indice strong {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-600);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   EL NAVEGADOR NO ESTÁ GUARDANDO
   Sin cuenta de usuario, el almacenamiento del navegador es lo único que hay.
   Cuando no está disponible —navegación privada, cookies restringidas, disco
   lleno—, callarlo significa que el profesor trabaja media hora y lo pierde.
   La banda va arriba del todo, antes de la cabecera, y no se puede cerrar:
   mientras la condición dure, el aviso es cierto.
   ═══════════════════════════════════════════════════ */
.aviso-no-guarda {
  background: var(--acento-amber-pale, #FBF0D9);
  border-bottom: 3px solid var(--acento-amber, #E8A317);
  color: #6B4400;
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--text-sm);
  line-height: 1.6;
  text-align: center;
}
.aviso-no-guarda strong { color: #5B3A00; }
@media print { .aviso-no-guarda { display: none; } }