@charset "UTF-8";

/*
  redKAOS base.css — sistema unificado 2026.
  Paleta: Kubuntu Breeze.
  Tipografía: Nimbus Mono (h1 + h1.title) + Ubuntu (prosa) + Ubuntu Mono (técnico).

  Fuentes referencia en IDENTITY.md. Autohospedadas bajo assets/font/,
  subseteadas a Español + Inglés con scripts/optimize-fonts.py.
  Licencias en /font/UFL.txt (Ubuntu) y /font/GFL.txt (TeX Gyre Cursor).
  Modificaciones de TeX Gyre Cursor en /font/MANIFEST-tex-gyre-cursor.txt.

  Esta hoja se procesa como Hugo template (vive en assets/, no static/).
  Los `?h=HASH` se calculan en build time desde sha256 del propio .woff2,
  garantizando que la URL cambia cuando los bytes de la fuente cambian.
*/

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/font/ubuntu-regular.woff2?h=518e21c036") format("woff2");
}

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/font/ubuntu-bold.woff2?h=0778343b7b") format("woff2");
}

@font-face {
  font-family: "Ubuntu Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/font/ubuntu-mono-regular.woff2?h=f0bd65a0f3") format("woff2");
}

@font-face {
  font-family: "Ubuntu Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/font/ubuntu-mono-bold.woff2?h=3a323063cd") format("woff2");
}

/* Nimbus Mono (TeX Gyre Cursor): marquee de portada y títulos h1 desde 2026,
   recupera la decisión tipográfica del CSS de 2006. Ver MANIFEST en /font/. */
@font-face {
  font-family: "Nimbus Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/font/nimbus-mono-regular.woff2?h=9d9b5519f8") format("woff2");
}

:root {
  --bg: #232627;
  --text: #fcfcfc;
  --muted: #a1a9b1;
  --accent: #11D116;
  --rule: #3a3e40;
  --font-sans: "Ubuntu", system-ui, -apple-system, sans-serif;
  --font-mono: "Ubuntu Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-title: "Nimbus Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--font-sans);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ─── Layout ─── */
.page {
  max-width: 68ch;
  margin: 0 auto;
  padding: 3em 1.5em 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}


header {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.5em;
  margin-bottom: 2em;
}

/* ─── Typography ─── */
h1 {
  color: var(--accent);
  font-family: var(--font-title);
  font-size: 5em;
  font-weight: 400;
  letter-spacing: -0.1em;
  margin: 0 0 0.2em;
  line-height: 1;
}

/* Todos los h1 grandes (marquee de home, listing /apuntes/, página /licencia/)
   empiezan con letra minúscula ('r', 'a', 'l'…) y Nimbus Mono deja un
   side-bearing izquierdo visible para esas letras. Compensamos con margin
   negativo para alinear ópticamente con el resto del contenido. h1.title
   queda fuera porque los títulos de artículo preservan su capitalización
   (suelen empezar en mayúscula, sin side-bearing significativo). */
h1:not(.title) {
  margin-left: -0.07em;
}

/* h1 de artículo (single): título de contenido, no marquee.
   Hereda color + Nimbus Mono + letter-spacing -0.1em + line-height 1 de h1.
   Añade word-spacing y text-wrap propios (relevantes solo en títulos multi-palabra). */
h1.title {
  font-size: 2em;
  font-weight: 400;
  letter-spacing: -0.10em;
  word-spacing: -0.3em;
  line-height: 1;
  text-wrap: pretty;
}

h2 {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1em;
  font-weight: normal;
  margin: 2.5em 0 0.8em;
  text-transform: lowercase;
  letter-spacing: 0.05em;
}

h2::before {
  content: "// ";
  color: var(--muted);
}

h3 {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.95em;
  font-weight: bold;
  margin: 1.5em 0 0.5em;
}

p { margin: 0.8em 0; }
.lema { margin: 0; }

.ethos {
  color: var(--muted);
  font-size: 0.9em;
  margin-top: 1.8em;
  border-left: 2px solid var(--rule);
  padding-left: 1em;
}

/* ─── Links ─── */

/* Links en prosa: neutros, underline sutil, accent en hover */
a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ─── Listas ─── */
ul {
  list-style: none;
  padding: 0;
  margin: 0.8em 0;
}

li {
  padding: 0.25em 0;
  display: flex;
  gap: 1em;
  align-items: baseline;
}

/* Links en listas de navegación: calls-to-action, accent */
ul a {
  color: var(--accent);
  text-decoration: none;
  font-family: var(--font-mono);
  min-width: 22ch;
  flex-shrink: 0;
}

ul a:hover { text-decoration: underline; }

li .desc {
  color: var(--muted);
  font-size: 0.9em;
}

.muted a { color: var(--muted); }
.muted a:hover { color: var(--accent); }

/* ─── Breadcrumb ─── */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--muted);
  margin: 0 0 2em;
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumb a:hover { color: var(--accent); }

.breadcrumb .sep {
  color: var(--rule);
  margin: 0 0.5em;
}

/* ─── Última modificación (meta en cabecera de artículo, alineada a la derecha) ─── */
.rev {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--muted);
  margin: 0.4em 0 0;
  text-align: right;
}

/* ─── Article content ─── */
article p,
article ul,
article ol {
  max-width: 62ch;
}

article p {
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
}

article ul {
  list-style: disc;
  padding-left: 1.5em;
}

article ol {
  list-style: decimal;
  padding-left: 1.5em;
}

article li {
  display: list-item;
  padding: 0.2em 0;
  text-wrap: pretty;
}

article ul a,
article ol a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.15em;
  font-family: inherit;
  min-width: unset;
  flex-shrink: unset;
}

article ul a:hover,
article ol a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* Inline code: no background — the page already is the terminal.
   Differentiation comes from typography (Ubuntu Mono) only. */
article code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Code block: no background either — delimited by a rule border.
   The 2px radius is ecosystem-wide (rounded boxes since 2000, see IDENTITY.md). */
article pre {
  font-family: var(--font-mono);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1em 1.2em;
  overflow-x: auto;
  font-size: 0.88em;
  line-height: 1.5;
}

article pre code {
  padding: 0;
}

article blockquote {
  border-left: 2px solid var(--rule);
  padding-left: 1em;
  margin-left: 0;
  color: var(--muted);
}

/* ─── Shell prompt + cursor (terminal-style easter egg) ──────── */

@keyframes blink { 50% { opacity: 0; } }

.prompt {
  color: var(--accent);
}

.cursor {
  color: var(--accent);
  animation: blink 1s step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}

/* ─── Copyright footer (ecosystem signature) ─────────────────── */

footer.copy {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-top: 2em;
  padding-left: max(1.5em, env(safe-area-inset-left));
  padding-right: max(1.5em, env(safe-area-inset-right));
  padding-bottom: max(0.5em, env(safe-area-inset-bottom));
}

footer.copy > p {
  flex: 1;
  text-align: center;
  margin: 0.4em 0;
}

/* ─── License notice (bottom-left, same muted treatment as the π) ─ */

a.license {
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 1em;
  line-height: 1;
}

a.license:hover { color: var(--accent); }

/* ─── Pi (bottom-right easter egg) ─────────────────────────────── */

a.pi {
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 1em;
  line-height: 1;
}

/* ─── Pagination ────────────────────────────────────────────────── */

nav.pagination {
  display: flex;
  align-items: center;
  margin-top: 2em;
  font-family: var(--font-mono);
  font-size: 0.85em;
}

nav.pagination > span {
  flex: 1;
}

nav.pagination > span:nth-child(2) { text-align: center; }
nav.pagination > span:last-child   { text-align: right; }

/* ─── Responsive ─── */
@media (max-width: 480px) {
  li {
    flex-direction: column;
    gap: 0.2em;
  }
  li > a {
    min-width: 0;
  }
}