/* =========================================================
   NOTEBOOK — Motivo "cuaderno de matemático", uso sutil
   ========================================================= */

/* Línea de margen tipo cuaderno — solo decorativa, aparece
   en secciones marcadas con .has-margin-rule */
.has-margin-rule {
  position: relative;
  padding-left: var(--space-md);
}

.has-margin-rule::before {
  content: "";
  position: absolute;
  top: 0.3em;
  bottom: 0.3em;
  left: 0;
  width: var(--margin-rule);
  background: var(--color-stone-line);
}

@media (max-width: 640px) {
  .has-margin-rule {
    padding-left: var(--space-sm);
  }
}

/* Anotación de sección — número pequeño en mono, como nota
   al margen, NO como bloque "01 / 02 / 03" genérico */
.section-annotation {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-stone);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

/* Subrayado trazo-a-mano: SVG inline vía background,
   ligeramente imperfecto, no una línea CSS perfecta */
.ink-underline {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 C 50 11, 150 4, 198 9' stroke='%232B4C7E' stroke-width='3' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.5em;
  padding-bottom: 0.05em;
}

.ink-underline--red {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 C 50 11, 150 4, 198 9' stroke='%23B23A23' stroke-width='3' fill='none' stroke-linecap='round'/></svg>");
}

/* Nota marginal: pequeño comentario tipo anotación de puño y letra,
   usado con moderación junto a afirmaciones clave */
.margin-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-red);
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
}

.margin-note::before {
  content: "→";
}

/* Textura de papel — extremadamente sutil, solo ruido leve */
.paper-texture {
  background-color: var(--color-paper);
  background-image:
    radial-gradient(var(--color-stone-line) 0.5px, transparent 0.5px);
  background-size: 14px 14px;
  background-position: 0 0;
}