/* Reglas propias de la aplicación que no son marca ni sistema de diseño.

   Hasta el 07/09/2026 este fichero abría con un `:root` de TRECE tokens en
   terracota y crema —`--brand: #ba3f1d`, `--bg: #f3efe5`, `IBM Plex Sans`—:
   una identidad anterior entera, viva en el CSS. No se veía porque
   `codelab-brand.css` se carga después y redefinía los trece, uno por uno; y
   sus reglas de `pre`, `code` y `.btn-outline-primary` también estaban
   pisadas. Era color muerto esperando a que alguien cambiara un orden de carga.

   Se comprobó token a token que los trece estaban redefinidos antes de
   borrarlos, así que la retirada no cambia un píxel. Lo único que SÍ se veía
   era el rosa `#ffd4c7` del hover de la marca, que ahora sale del token.

   Lo que queda aquí es lo que este fichero aporta y nadie más define. */

.page-shell {
  min-height: 100vh;
}

.navbar-brand {
  color: var(--brand-contrast);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.navbar-brand:hover {
  color: var(--brand);
}

.app-card {
  background: var(--surface);
  border: 1px solid var(--ui-velo-3);
  border-radius: var(--ui-radius-surface);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.eyebrow {
  display: inline-block;
  margin-bottom: 0.8rem;
  color: var(--brand);
  font-size: var(--ui-text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.list-link {
  display: block;
  padding: 0.8rem 0;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.list-link:last-child {
  border-bottom: 0;
}

.list-link:hover {
  color: var(--brand);
}

.list-link.static:hover {
  color: var(--text);
}

.step-badge,
.content-type {
  display: inline-flex;
  padding: 0.3rem 0.7rem;
  border-radius: var(--ui-radius-pill);
  background: var(--bg-strong);
  color: var(--brand);
  font-size: var(--ui-text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tutorial-blocks {
  display: grid;
  gap: 1rem;
}

.rich-text p:last-child {
  margin-bottom: 0;
}

.nav-link {
  text-decoration: none;
}

/* ── Jerarquía visual en secciones de Índice ── */
.tutorial-doc-body h1[id="indice"] + ul,
.tutorial-doc-body h2[id="indice"] + ul,
.tutorial-doc-body h3[id="indice"] + ul,
.rich-text h1[id="indice"] + ul,
.rich-text h2[id="indice"] + ul,
.rich-text h3[id="indice"] + ul {
  padding-left: 0;
  list-style-type: disc;
}

.tutorial-doc-body h1[id="indice"] + ul ul,
.tutorial-doc-body h2[id="indice"] + ul ul,
.tutorial-doc-body h3[id="indice"] + ul ul,
.rich-text h1[id="indice"] + ul ul,
.rich-text h2[id="indice"] + ul ul,
.rich-text h3[id="indice"] + ul ul {
  padding-left: 1.75rem;
  margin-top: 0.2rem;
  list-style-type: circle;
}

.tutorial-doc-body h1[id="indice"] + ul ul ul,
.tutorial-doc-body h2[id="indice"] + ul ul ul,
.tutorial-doc-body h3[id="indice"] + ul ul ul,
.rich-text h1[id="indice"] + ul ul ul,
.rich-text h2[id="indice"] + ul ul ul,
.rich-text h3[id="indice"] + ul ul ul {
  padding-left: 1.75rem;
  list-style-type: square;
}