/* ==========================================================================
   ffmpeg-playground — hoja de estilos única
   Mobile-first. Sistema oscuro. Sin fuentes externas, sin build.
   ========================================================================== */

:root {
  /* --- paleta base (oscuro) --- */
  --bg: #0b0d10;
  --bg-raised: #12151a;
  --bg-inset: #0a0c0f;
  --border: #262b33;
  --border-soft: #1c2027;

  --text: #e8ebef;       /* sobre --bg: ratio ~15.8:1 */
  --text-dim: #a7aeb9;   /* sobre --bg: ratio ~7.4:1 */
  --text-faint: #7b828d; /* sobre --bg: ratio ~4.6:1, solo para texto >=18px */

  /* acentos: cian/magenta, guiño al test-pattern / datamoshing */
  --cian: #4fd9e8;       /* sobre --bg: ~10.9:1 */
  --cian-dim: #2a8b96;
  --magenta: #f26fc0;    /* sobre --bg: ~7.6:1 */
  --magenta-dim: #9c3f7e;

  --ok: #6fd88a;         /* sobre --bg: ~10.4:1 */
  --ok-bg: #10251a;
  --warn: #f2836f;       /* sobre --bg: ~7.9:1 */
  --warn-bg: #2a1512;

  --radius: 10px;
  --radius-sm: 6px;

  /* espaciado en escala de 4px */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --max-w: 780px;
  --transition: 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  * , *::before, *::after {
    transition-duration: 0s !important; /* respetar reduce-motion sin listar cada regla */
    animation-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   reset mínimo
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  color-scheme: dark;
  /* evita overflow horizontal por elementos que ignoran box-sizing */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: break-word;
  /* NO overflow-x aquí: "overflow-x" fuerza "overflow-y: auto" en el
     cómputo (quirk del spec), y eso convierte a body en un contenedor de
     scroll propio que rompe el position:sticky de nav.toc. Con html ya
     cubriendo el caso, alcanza. */
}

img, video { max-width: 100%; }

a {
  color: var(--cian);
  text-decoration-color: var(--cian-dim);
  text-underline-offset: 2px;
}
a:hover { text-decoration-color: var(--cian); }

:focus-visible {
  outline: 2px solid var(--cian);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-inset);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  color: var(--cian);
  word-break: break-word;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 var(--sp-3);
}

strong { color: var(--text); font-weight: 700; }
em { color: var(--text-dim); }

/* --------------------------------------------------------------------------
   layout general
   -------------------------------------------------------------------------- */

header.hero,
nav.toc,
main > section,
footer {
  padding-inline: var(--sp-4);
  max-width: var(--max-w);
  margin-inline: auto;
}

main > section { padding-block: var(--sp-7) 0; }
main > section:last-child { padding-bottom: var(--sp-7); }

footer {
  padding-block: var(--sp-6);
  border-top: 1px solid var(--border);
  margin-top: var(--sp-7);
  color: var(--text-dim);
  font-size: 0.9em;
}
footer .fine { color: var(--text-faint); font-size: 0.95em; }

p { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.3em; }
li { margin-bottom: var(--sp-2); }

/* --------------------------------------------------------------------------
   h2 con número de sección
   -------------------------------------------------------------------------- */

h2 {
  font-size: 1.6rem;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5);
}

h2 .num {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--bg);
  background: var(--cian);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.5em;
  flex-shrink: 0;
}

h3 { font-size: 1.25rem; margin-top: var(--sp-6); }
h4 { font-size: 1.05rem; margin-top: var(--sp-5); color: var(--text-dim); }
h5 { font-size: 1rem; color: var(--cian); }

/* --------------------------------------------------------------------------
   hero
   -------------------------------------------------------------------------- */

header.hero {
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-6);
}

.kicker {
  font-family: var(--font-mono);
  color: var(--magenta);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  margin: 0 0 var(--sp-3);
}

h1 {
  font-size: clamp(1.8rem, 7vw, 3rem);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-4);
  /* único guiño de datamoshing: split cromático sutil, solo en el h1 */
  text-shadow: 1px 0 var(--cian-dim), -1px 0 var(--magenta-dim);
}

.lead {
  font-size: 1.15rem;
  color: var(--text-dim);
  max-width: 34em;
}
.lead strong { color: var(--cian); }

dl.meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin: var(--sp-6) 0;
  padding: var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
dl.meta > div { display: flex; flex-direction: column; gap: 2px; }
dl.meta dt {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
dl.meta dd { margin: 0; color: var(--text); }

/* --------------------------------------------------------------------------
   figure.media — video/imagenes GIF-replacement
   -------------------------------------------------------------------------- */

figure.media {
  margin: var(--sp-5) 0;
}

figure.media video,
figure.media img {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

figure.media figcaption {
  margin-top: var(--sp-2);
  font-size: 0.9rem;
  color: var(--text-dim);
}

figure.media.estrecha {
  max-width: 320px;
}

figure.media.pixelada img {
  image-rendering: pixelated;
}

.hero-media {
  margin-top: var(--sp-5);
  margin-bottom: 0;
}

/* .comparacion: antes/después */
.comparacion {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin: var(--sp-5) 0;
}

.etiqueta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15em 0.5em;
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text-dim);
  margin-bottom: var(--sp-1);
}
.etiqueta.destacada {
  background: var(--magenta-dim);
  border-color: var(--magenta);
  color: #fff0f8;
}

.pie-comparacion {
  font-size: 0.9rem;
  color: var(--text-faint);
  margin-top: calc(var(--sp-5) * -1 + var(--sp-2));
}

/* --------------------------------------------------------------------------
   .toc — índice
   -------------------------------------------------------------------------- */

nav.toc {
  margin: var(--sp-6) auto;
}

nav.toc details {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
}

nav.toc summary.toc-title {
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  color: var(--cian);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
}
nav.toc summary.toc-title::-webkit-details-marker { display: none; }
nav.toc summary.toc-title::before {
  content: "▸";
  display: inline-block;
  transition: transform var(--transition);
  color: var(--magenta);
}
nav.toc details[open] > summary.toc-title::before {
  transform: rotate(90deg);
}

nav.toc ol {
  margin: var(--sp-3) 0 var(--sp-1);
  padding-left: 1.2em;
}
nav.toc ol ol {
  margin-top: var(--sp-2);
  font-size: 0.92em;
}
nav.toc li { margin-bottom: var(--sp-2); }
nav.toc a { color: var(--text-dim); }
nav.toc a:hover { color: var(--cian); }

/* --------------------------------------------------------------------------
   .cmd — bloques de comando (el elemento más importante de la página)
   -------------------------------------------------------------------------- */

.cmd {
  position: relative;
  margin: var(--sp-4) 0 var(--sp-5);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* pista de scroll horizontal descubrible: fade sutil en el borde derecho */
  background-image: linear-gradient(to right, transparent calc(100% - 24px), var(--bg-inset) 100%);
}

.cmd pre {
  margin: 0;
  padding: var(--sp-4);
  padding-top: calc(var(--sp-4) + 40px); /* deja lugar arriba para el botón copiar */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
  box-shadow: inset -16px 0 12px -12px rgba(0, 0, 0, 0.55);
}

.cmd pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* salida de programa: NO es código para copiar, se lee distinto */
.cmd.salida {
  background-image: none;
  border-color: var(--border-soft);
  border-style: dashed;
}
.cmd.salida pre {
  padding-top: var(--sp-4); /* sin botón copiar, no hace falta el hueco */
  box-shadow: none;
}
.cmd.salida pre code {
  color: var(--text-faint);
  font-style: italic;
}

/* botón copiar, inyectado por JS como último hijo de .cmd (no de .pre) */
.cmd button.copiar {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 1;
  min-width: 44px;
  min-height: 44px;
  padding: 0.4em 0.9em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.cmd button.copiar:hover {
  color: var(--cian);
  border-color: var(--cian-dim);
}

/* --------------------------------------------------------------------------
   .concepto / .aha — líneas rituales de cada módulo
   -------------------------------------------------------------------------- */

.concepto {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: 0.95rem;
  color: var(--text-dim);
  margin-bottom: var(--sp-4);
}
.concepto span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bg);
  background: var(--cian-dim);
  border-radius: var(--radius-sm);
  padding: 0.2em 0.5em;
}

/* .aha: el momento — el beat emocional del módulo, más peso visual */
.aha {
  margin: var(--sp-6) 0 var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(135deg, rgba(242, 111, 192, 0.12), rgba(79, 217, 232, 0.08));
  border: 1px solid var(--magenta-dim);
  border-left: 4px solid var(--magenta);
  border-radius: var(--radius);
  font-size: 1.05rem;
  color: var(--text);
}
.aha span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--magenta);
  margin-bottom: var(--sp-2);
}

/* --------------------------------------------------------------------------
   .modulo — artículos del taller
   -------------------------------------------------------------------------- */

.modulo {
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.modulo > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
}

.modulo-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-faint);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.modulo > header h3 { margin: 0; font-size: 1.35rem; flex-basis: 100%; order: -1; }
.modulo-tiempo {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--cian);
  margin: 0;
}

/* .modulo.destacado — módulo 4, la pieza central */
.modulo.destacado {
  background: linear-gradient(160deg, var(--bg-raised) 0%, #1a1220 100%);
  border-color: var(--magenta-dim);
  border-width: 2px;
  box-shadow: 0 0 0 1px rgba(242, 111, 192, 0.15), 0 8px 32px -8px rgba(242, 111, 192, 0.25);
}
.modulo.destacado .modulo-tiempo { color: var(--magenta); }

.paso-titulo {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--cian);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: var(--sp-5) 0 var(--sp-1);
}

/* .capas / .tipos / .dag / .razones — listas con marcado propio */
ul.razones, ol.capas, ul.tipos, ul.dag {
  list-style: none;
  padding-left: 0;
}
ul.razones > li, ol.capas > li, ul.tipos > li, ul.dag > li {
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  background: var(--bg-inset);
  border-left: 3px solid var(--cian-dim);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
ol.capas { counter-reset: capas; }
ol.capas > li {
  counter-increment: capas;
  position: relative;
  padding-left: var(--sp-6);
}
ol.capas > li::before {
  content: counter(capas);
  position: absolute;
  left: var(--sp-2);
  top: var(--sp-3);
  font-family: var(--font-mono);
  color: var(--cian);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   .resultado / .factor — readout de medición
   -------------------------------------------------------------------------- */

.resultado {
  font-family: var(--font-mono);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin: var(--sp-4) 0 var(--sp-5);
}
.resultado p { margin: 0 0 var(--sp-1); font-size: 0.92rem; color: var(--text-dim); }
.resultado p:last-child { margin-bottom: 0; }
.resultado code { color: var(--text); }
.resultado .factor {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--border);
  font-size: 1.1rem;
}
.resultado .factor strong { color: var(--magenta); }

/* --------------------------------------------------------------------------
   .nota — asides
   -------------------------------------------------------------------------- */

.nota {
  margin: var(--sp-5) 0;
  padding: var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cian-dim);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.95rem;
  color: var(--text-dim);
}
.nota p:last-child { margin-bottom: 0; }
.nota strong { color: var(--text); }

.nota.gif h4 { margin-top: 0; color: var(--text); }

/* --------------------------------------------------------------------------
   .grid / .card — catálogo de capacidades
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
}

.card {
  padding: var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card h3 { margin-top: 0; font-size: 1.05rem; color: var(--cian); }
.card ul { margin-bottom: 0; padding-left: 1.1em; font-size: 0.92rem; }
.card li { margin-bottom: var(--sp-2); }
.card li:last-child { margin-bottom: 0; }

.card.destacada {
  border-color: var(--magenta-dim);
  background: linear-gradient(160deg, var(--bg-raised), #1a1220);
}
.card.destacada h3 { color: var(--magenta); }

/* --------------------------------------------------------------------------
   .discusion
   -------------------------------------------------------------------------- */

.discusion {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin: var(--sp-4) 0 var(--sp-5);
}
.discusion > div {
  padding: var(--sp-4);
  background: var(--bg-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.discusion h5 { margin-top: 0; }
.discusion p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   .intro-taller
   -------------------------------------------------------------------------- */

.intro-taller {
  font-size: 1.05rem;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   tablas .datos
   -------------------------------------------------------------------------- */

table.datos {
  /* display:block hace que el <table> mismo actúe como caja de scroll;
     thead/tbody/tr/td conservan su display de tabla por defecto, así que
     las columnas siguen alineadas entre encabezado y filas. */
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: var(--sp-4) 0 var(--sp-5);
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
table.datos tbody, table.datos thead { display: table; width: 100%; }
table.datos tr { display: table-row; }
table.datos th, table.datos td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
table.datos th {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-faint);
  background: var(--bg-inset);
}
table.datos tbody tr:last-child td { border-bottom: none; }
table.datos tr.malo td { background: var(--warn-bg); color: var(--warn); }
table.datos tr.malo td span { color: var(--warn); opacity: 0.8; }
table.datos tr.bueno td { background: var(--ok-bg); color: var(--ok); font-weight: 700; }
table.datos tr.bueno td span { color: var(--ok); opacity: 0.85; font-weight: 400; }

/* --------------------------------------------------------------------------
   glosario
   -------------------------------------------------------------------------- */

dl.glosario {
  display: grid;
  gap: var(--sp-4);
}
dl.glosario > div {
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
}
dl.glosario > div:last-child { border-bottom: none; }
dl.glosario dt {
  font-weight: 700;
  color: var(--cian);
  margin-bottom: var(--sp-1);
}
dl.glosario dt span {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.82em;
  color: var(--text-faint);
  margin-left: var(--sp-2);
}
dl.glosario dd { margin: 0; color: var(--text-dim); }

/* --------------------------------------------------------------------------
   .extras — lista ordenada "para seguir"
   -------------------------------------------------------------------------- */

ol.extras {
  list-style: none;
  padding-left: 0;
  counter-reset: extras;
}
ol.extras > li {
  counter-increment: extras;
  position: relative;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-7);
  margin-bottom: var(--sp-3);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
ol.extras > li::before {
  content: counter(extras);
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--magenta);
  font-size: 1.1rem;
}
ol.extras h3 { margin-top: 0; font-size: 1.1rem; }

/* ==========================================================================
   breakpoints — mobile-first, min-width hacia arriba
   ========================================================================== */

/* --- ~480px: algo más de aire, meta en 2 columnas --- */
@media (min-width: 480px) {
  dl.meta { grid-template-columns: 1fr 1fr; }
}

/* --- ~700px: comparación en dos columnas, grid de tarjetas en 2 --- */
@media (min-width: 700px) {
  .comparacion { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .discusion { grid-template-columns: repeat(3, 1fr); }
  h1 { font-size: clamp(2.4rem, 6vw, 3.4rem); }
}

/* --- ~900px: tipografía y ritmo vertical más generosos --- */
@media (min-width: 900px) {
  header.hero, nav.toc, main > section, footer { padding-inline: var(--sp-5); }
  .modulo { padding: var(--sp-6); }
}

/* --- ~1100px: toc como sidebar sticky, contenido a la derecha --- */
@media (min-width: 1100px) {
  body {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    max-width: 1200px;
    margin-inline: auto;
    gap: var(--sp-6);
  }

  header.hero {
    grid-column: 1 / -1;
    max-width: none;
  }

  nav.toc {
    grid-column: 1;
    position: sticky;
    top: var(--sp-5);
    align-self: start;
    max-width: none;
    max-height: calc(100vh - var(--sp-6));
    overflow-y: auto;
  }

  main {
    grid-column: 2;
  }

  main > section {
    max-width: var(--max-w);
    padding-inline: 0;
    margin-inline: 0;
  }

  footer {
    grid-column: 1 / -1;
    max-width: none;
  }
}

/* --- ~1300px: un poco más de aire general en desktop grande --- */
@media (min-width: 1300px) {
  body { max-width: 1280px; }
  .lead { font-size: 1.25rem; }
}

/* ==========================================================================
   pixel-playground — widget del kernel (módulo 2)
   Solo reglas nuevas. .comparacion, .etiqueta, .paso-titulo, .resultado
   y .cmd ya existen arriba y se reusan tal cual.
   ========================================================================== */

.widget-kernel {
  margin: var(--sp-5) 0;
  padding: var(--sp-4);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.widget-kernel .comparacion canvas {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  image-rendering: pixelated;
}

.matriz3x3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  max-width: 300px;
  margin-bottom: var(--sp-4);
}

/* 44px es el mínimo táctil de WCAG 2.5.5. Los pesos se escriben a mano
   (0.0625 y similares), así que las flechitas del spinner no sirven para nada
   y encima le roban ancho al número: se ocultan y el valor queda centrado. */
.matriz3x3 input {
  width: 100%;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 1rem;
  text-align: center;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.4em 0.2em;
  -moz-appearance: textfield;
  appearance: textfield;
}
.matriz3x3 input::-webkit-outer-spin-button,
.matriz3x3 input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.matriz3x3 input:focus-visible {
  outline: 2px solid var(--cian);
  outline-offset: 1px;
  border-color: var(--cian-dim);
}

.presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.presets button {
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-dim);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5em 1em;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.presets button:hover, .presets button.activo {
  color: var(--cian);
  border-color: var(--cian-dim);
}
.presets button.activo { background: var(--bg-inset); }

.widget-kernel .normalizar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  font-size: 0.95rem;
  color: var(--text-dim);
  margin-bottom: var(--sp-4);
  cursor: pointer;
}
.widget-kernel .normalizar input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--cian);
}

.widget-kernel .resultado p { margin: 0; }

/* El resto del sitio deja que los comandos largos scrolleen en horizontal,
   pero este es el que hay que poder leer entero para confiar en que el widget
   y la terminal hacen lo mismo: acá el comando se parte en varias líneas. */
.widget-kernel .cmd pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (min-width: 480px) {
  .widget-kernel .resultado {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2) var(--sp-5);
  }
}

.widget-kernel .error {
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.widget-kernel .error code { color: var(--warn); }