/* ==========================================================================
   Hoja de estilos principal
   1. Tokens de diseño (colores, tipografía, espaciado, radios, sombras)
   2. Base y utilidades
   3. Estructura: cabecera, navegación, buscador, pie
   4. Componentes: botones, tarjetas, avisos, migas de pan
   5. Páginas: inicio, listados, artículos
   6. Herramientas: zona de archivos, formularios, resultados
   7. Movimiento reducido e impresión
   Enfoque «mobile first»: los estilos base son para móvil y las consultas
   min-width añaden la reorganización para pantallas mayores.
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */
:root {
  color-scheme: light;
  --c-bg: #f8fafc;
  --c-surface: #ffffff;
  --c-surface-2: #f1f5f9;
  --c-border: #e2e8f0;
  --c-border-strong: #cbd5e1;
  --c-text: #0f172a;
  --c-text-muted: #475569;
  --c-accent: #0a6a70;
  --c-accent-hover: #075459;
  --c-accent-soft: #e2f1f1;
  --c-on-accent: #ffffff;
  --c-focus: #0a6a70;
  --c-info-bg: #e8f0fb;
  --c-info-border: #9db8e0;
  --c-info-text: #1d3f72;
  --c-warn-bg: #fdf3e1;
  --c-warn-border: #e2b25f;
  --c-warn-text: #6b4100;
  --c-danger-bg: #fdecea;
  --c-danger-border: #eba59e;
  --c-danger-text: #9c1c12;
  --c-success-bg: #e6f5ec;
  --c-success-border: #8fcca6;
  --c-success-text: #145c33;
  --c-checker-a: #ffffff;
  --c-checker-b: #e3e7ec;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-h3: 1.1875rem;
  --fs-h2: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-h1: clamp(1.875rem, 1.45rem + 1.9vw, 2.75rem);
  --lh-tight: 1.2;
  --lh-base: 1.6;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.06);
  --shadow: 0 1px 3px rgb(16 24 40 / 0.08), 0 4px 12px rgb(16 24 40 / 0.05);
  --shadow-lg: 0 8px 28px rgb(16 24 40 / 0.14);

  --container: 72rem;
  --container-narrow: 46rem;
  --gutter: 1rem;
  --header-h: 3.75rem;
  --transition: 150ms ease;
}

/* Tema oscuro: por preferencia del sistema o elegido manualmente. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-bg: #111827;
    --c-surface: #1f2937;
    --c-surface-2: #273449;
    --c-border: #374151;
    --c-border-strong: #4b5563;
    --c-text: #f3f4f6;
    --c-text-muted: #a8b3c2;
    --c-accent: #5ccac5;
    --c-accent-hover: #86dbd7;
    --c-accent-soft: #15302f;
    --c-on-accent: #04201f;
    --c-focus: #7fdcd8;
    --c-info-bg: #142338;
    --c-info-border: #34557f;
    --c-info-text: #b9d0f0;
    --c-warn-bg: #2b2111;
    --c-warn-border: #7a5a22;
    --c-warn-text: #f1d39b;
    --c-danger-bg: #2f1715;
    --c-danger-border: #823530;
    --c-danger-text: #f6b8b1;
    --c-success-bg: #12271b;
    --c-success-border: #2f6a46;
    --c-success-text: #a6e2bd;
    --c-checker-a: #2b3749;
    --c-checker-b: #1f2937;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.25);
    --shadow-lg: 0 8px 28px rgb(0 0 0 / 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #111827;
  --c-surface: #1f2937;
  --c-surface-2: #273449;
  --c-border: #374151;
  --c-border-strong: #4b5563;
  --c-text: #f3f4f6;
  --c-text-muted: #a8b3c2;
  --c-accent: #5ccac5;
  --c-accent-hover: #86dbd7;
  --c-accent-soft: #15302f;
  --c-on-accent: #04201f;
  --c-focus: #7fdcd8;
  --c-info-bg: #142338;
  --c-info-border: #34557f;
  --c-info-text: #b9d0f0;
  --c-warn-bg: #2b2111;
  --c-warn-border: #7a5a22;
  --c-warn-text: #f1d39b;
  --c-danger-bg: #2f1715;
  --c-danger-border: #823530;
  --c-danger-text: #f6b8b1;
  --c-success-bg: #12271b;
  --c-success-border: #2f6a46;
  --c-success-text: #a6e2bd;
  --c-checker-a: #2b3749;
  --c-checker-b: #1f2937;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.25);
  --shadow-lg: 0 8px 28px rgb(0 0 0 / 0.5);
}

/* Color de cada sección (Herramientas, Guías, Aprende, Diagnóstico, Recursos). --c-section es el color de
   marca para iconos y detalles; --c-accent, la variante legible para texto y botones (WCAG AA:
   ≥ 4,5:1 sobre el fondo y las tarjetas en cada tema). Se aplica a la página entera con
   <html data-section> o a un bloque concreto, como las tarjetas de la portada. */
[data-section="herramientas"] { --c-section: #3b82f6; --c-accent: #2563eb; --c-accent-hover: #1d4ed8; --c-accent-soft: #dbeafe; --c-on-accent: #ffffff; --c-focus: #2563eb; }
[data-section="articulos"] { --c-section: #14b8a6; --c-accent: #0f766e; --c-accent-hover: #115e59; --c-accent-soft: #ccfbf1; --c-on-accent: #ffffff; --c-focus: #0f766e; }
[data-section="aprende"] { --c-section: #a78bfa; --c-accent: #7c3aed; --c-accent-hover: #6d28d9; --c-accent-soft: #ede9fe; --c-on-accent: #ffffff; --c-focus: #7c3aed; }
[data-section="diagnostico"] { --c-section: #f59e0b; --c-accent: #b45309; --c-accent-hover: #92400e; --c-accent-soft: #fef3c7; --c-on-accent: #ffffff; --c-focus: #b45309; }
[data-section="recursos"] { --c-section: #f43f5e; --c-accent: #be123c; --c-accent-hover: #9f1239; --c-accent-soft: #ffe4e6; --c-on-accent: #ffffff; --c-focus: #be123c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-section="herramientas"], :root:not([data-theme="light"]) [data-section="herramientas"] { --c-accent: #60a5fa; --c-accent-hover: #93c5fd; --c-accent-soft: #172a4a; --c-on-accent: #0b1220; --c-focus: #93c5fd; }
  :root:not([data-theme="light"])[data-section="articulos"], :root:not([data-theme="light"]) [data-section="articulos"] { --c-accent: #2dd4bf; --c-accent-hover: #5eead4; --c-accent-soft: #123534; --c-on-accent: #0b1220; --c-focus: #5eead4; }
  :root:not([data-theme="light"])[data-section="aprende"], :root:not([data-theme="light"]) [data-section="aprende"] { --c-accent: #a78bfa; --c-accent-hover: #c4b5fd; --c-accent-soft: #2a2350; --c-on-accent: #0b1220; --c-focus: #c4b5fd; }
  :root:not([data-theme="light"])[data-section="diagnostico"], :root:not([data-theme="light"]) [data-section="diagnostico"] { --c-accent: #f59e0b; --c-accent-hover: #fbbf24; --c-accent-soft: #3a2a10; --c-on-accent: #0b1220; --c-focus: #fbbf24; }
  :root:not([data-theme="light"])[data-section="recursos"], :root:not([data-theme="light"]) [data-section="recursos"] { --c-accent: #fb7185; --c-accent-hover: #fda4af; --c-accent-soft: #3b1820; --c-on-accent: #0b1220; --c-focus: #fda4af; }
}
:root[data-theme="dark"][data-section="herramientas"], :root[data-theme="dark"] [data-section="herramientas"] { --c-accent: #60a5fa; --c-accent-hover: #93c5fd; --c-accent-soft: #172a4a; --c-on-accent: #0b1220; --c-focus: #93c5fd; }
:root[data-theme="dark"][data-section="articulos"], :root[data-theme="dark"] [data-section="articulos"] { --c-accent: #2dd4bf; --c-accent-hover: #5eead4; --c-accent-soft: #123534; --c-on-accent: #0b1220; --c-focus: #5eead4; }
:root[data-theme="dark"][data-section="aprende"], :root[data-theme="dark"] [data-section="aprende"] { --c-accent: #a78bfa; --c-accent-hover: #c4b5fd; --c-accent-soft: #2a2350; --c-on-accent: #0b1220; --c-focus: #c4b5fd; }
:root[data-theme="dark"][data-section="diagnostico"], :root[data-theme="dark"] [data-section="diagnostico"] { --c-accent: #f59e0b; --c-accent-hover: #fbbf24; --c-accent-soft: #3a2a10; --c-on-accent: #0b1220; --c-focus: #fbbf24; }
:root[data-theme="dark"][data-section="recursos"], :root[data-theme="dark"] [data-section="recursos"] { --c-accent: #fb7185; --c-accent-hover: #fda4af; --c-accent-soft: #3b1820; --c-on-accent: #0b1220; --c-focus: #fda4af; }

/* 2. Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  overflow-wrap: break-word;
}
main { flex: 1 0 auto; outline: none; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { line-height: var(--lh-tight); letter-spacing: -0.01em; margin: 0 0 var(--space-3); text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 750; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 650; }
p { margin: 0 0 var(--space-4); }
a { color: var(--c-accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--c-accent-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, kbd { font-family: var(--font-mono); font-size: 0.92em; }
code { background: var(--c-surface-2); padding: 0.1em 0.35em; border-radius: 4px; }
kbd { border: 1px solid var(--c-border-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0.05em 0.4em; background: var(--c-surface); }
hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--space-6) 0; }
[hidden] { display: none !important; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--c-accent); color: var(--c-on-accent); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-2); color: var(--c-on-accent); }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eyebrow, .card__eyebrow { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-muted); margin: 0 0 var(--space-2); letter-spacing: 0.01em; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { color: var(--c-accent); text-decoration: underline; }
.lead { font-size: var(--fs-lg); color: var(--c-text-muted); max-width: 44rem; }
.placeholder { background: var(--c-warn-bg); color: var(--c-warn-text); border: 1px dashed var(--c-warn-border); padding: 0 0.3em; border-radius: 4px; font-weight: 600; }
.section { padding-block: var(--space-7); }
.section--alt { background: var(--c-surface); border-block: 1px solid var(--c-border); }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-5); }
.section__head h2 { margin: 0; }
.section__head p { margin: 0; color: var(--c-text-muted); }
.section__link { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; text-decoration: none; }
.section__link:hover { text-decoration: underline; }

/* 3. Cabecera -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--c-surface) 92%, transparent);
  border-bottom: 1px solid var(--c-border);
  backdrop-filter: saturate(1.4) blur(8px);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header { background: var(--c-surface); }
}
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "brand actions" "search search" "nav nav";
  align-items: center;
  column-gap: var(--space-3);
  min-height: var(--header-h);
}
.brand { grid-area: brand; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--c-text); text-decoration: none; font-weight: 750; font-size: 1.125rem; letter-spacing: -0.015em; padding-block: var(--space-2); width: max-content; }
.brand:hover { color: var(--c-text); }
.brand__mark { width: 30px; height: 30px; }
/* El logotipo mantiene el color de la marca en todas las secciones. */
.brand__mark rect { fill: #0a6a70; }
.brand__mark path { fill: none; stroke: #ffffff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.site-header__search { grid-area: search; padding-bottom: var(--space-3); }
.site-header__actions { grid-area: actions; display: flex; gap: var(--space-1); }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--c-text);
  transition: background var(--transition), border-color var(--transition);
}
.icon-btn:hover { background: var(--c-surface-2); border-color: var(--c-border); }
.icon-btn .icon { width: 22px; height: 22px; }
.theme-toggle .icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon--sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon--moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon--sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon--moon { display: none; }
}
/* Sin JavaScript el selector de tema y el botón de menú no funcionarían: se ocultan. */
:root:not(.js) .theme-toggle, :root:not(.js) .nav-toggle { display: none; }
.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }

/* Marca con lema (el lema solo cabe a partir de tableta). */
.brand__text { display: grid; line-height: 1.15; }
.brand__tagline { display: none; font-size: 0.75rem; font-weight: 550; letter-spacing: 0; color: var(--c-text-muted); }
@media (min-width: 560px) { .brand__tagline { display: block; } }

/* Menú principal: una fila propia bajo el logotipo y el buscador, con el icono de cada sección en su
   color. La sección actual se marca con una barra de su color. */
.site-nav__list { list-style: none; margin: 0; padding: 0; }
.site-nav__item { position: relative; }
.site-nav__link {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); color: var(--c-text); text-decoration: none; font-weight: 600;
}
.site-nav__link:hover { color: var(--c-text); background: var(--c-surface-2); }
.site-nav__icon {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px;
  background: color-mix(in srgb, var(--c-section) 16%, transparent); color: var(--c-accent);
}
.site-nav__icon .icon { width: 18px; height: 18px; }
.site-nav__link[aria-current="page"] { color: var(--c-accent-hover); background: var(--c-accent-soft); }
.site-nav__link[aria-current="page"] .site-nav__icon { background: var(--c-section); color: #ffffff; }
.site-nav__text, .site-nav__panel { display: none; }

/* Hasta 1000 px: botón de menú (con JavaScript; sin él, el menú se muestra siempre) y las secciones
   como fichas con su descripción, de una en una en el móvil y de dos en dos en tableta. */
@media (max-width: 999.98px) {
  .site-header__inner { padding-top: var(--space-2); row-gap: var(--space-2); }
  .site-header__search { padding-bottom: var(--space-4); }
  :root.js .site-nav { display: none; }
  :root.js .site-nav.is-open { display: block; }
  .site-nav { border-top: 1px solid var(--c-border); max-height: calc(100dvh - 8rem); overflow-y: auto; overscroll-behavior: contain; }
  .site-nav__list { display: grid; gap: var(--space-2); padding: var(--space-3) 0 var(--space-4); }
  .site-nav__item {
    padding: var(--space-2) var(--space-3); border: 1px solid var(--c-border); border-left: 4px solid var(--c-section);
    border-radius: var(--radius); background: var(--c-surface);
  }
  .site-nav__item:has([aria-current]) { background: var(--c-accent-soft); }
  .site-nav__link { gap: var(--space-3); padding: 0; font-size: var(--fs-lg); }
  .site-nav__link:hover, .site-nav__link[aria-current="page"] { background: none; }
  .site-nav__icon { width: 40px; height: 40px; border-radius: var(--radius); }
  .site-nav__icon .icon { width: 22px; height: 22px; }
  /* Toda la ficha es clicable: el enlace la cubre entera (su foco se dibuja en la ficha). */
  .site-nav__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
  .site-nav__link:focus-visible { outline: none; }
  .site-nav__link:focus-visible::after { outline: 3px solid var(--c-focus); outline-offset: 2px; }
  .site-nav__text { display: block; margin: 0; padding-left: calc(40px + var(--space-3)); font-size: var(--fs-sm); color: var(--c-text-muted); }
}
@media (min-width: 640px) and (max-width: 999.98px) { .site-nav__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 1000px) {
  .site-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand search actions"; column-gap: var(--space-6); padding-block: var(--space-1); }
  .site-header__search { padding-bottom: 0; justify-self: center; width: min(100%, 34rem); }
  .nav-toggle { display: none; }
  .site-nav { border-top: 1px solid var(--c-border); }
  .site-nav__list { display: flex; gap: var(--space-1); justify-content: space-between; }
  .site-nav__link { position: relative; padding-block: 0.55rem; font-size: 0.9688rem; }
  .site-nav__link::after {
    content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px; height: 3px;
    border-radius: 3px 3px 0 0; background: var(--c-section); opacity: 0; transform: scaleX(var(--nav-bar-scale, 0.3));
    transition: opacity 200ms ease, transform 250ms ease;
  }
  .site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after { opacity: 1; --nav-bar-scale: 1; }
  .site-nav__link[aria-current="page"] { background: none; }
}
/* Con 8 secciones, entre 1000 y 1199 px los enlaces se estrechan un poco para caber en una línea. */
@media (min-width: 1000px) and (max-width: 1199.98px) { .site-nav__link { padding-inline: var(--space-2); gap: 6px; } }
@media (min-width: 1200px) { .site-nav__list { justify-content: flex-start; gap: var(--space-2); } }

/* Panel de cada sección al pasar el ratón (solo con ratón: en pantallas táctiles el primer toque
   abriría el panel en vez de seguir el enlace). Oculto con visibility, así no recibe el foco. */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .site-nav__panel {
    display: block; position: absolute; top: calc(100% + 1px); left: 0; z-index: 70; width: 23rem;
    padding: var(--space-4); border: 1px solid var(--c-border); border-top: 3px solid var(--c-section);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--c-surface); box-shadow: var(--shadow-lg);
    visibility: hidden; opacity: 0; transform: translateY(var(--panel-shift, -6px));
    transition: opacity 180ms ease, transform 220ms ease, visibility 0s linear 220ms;
  }
  .site-nav__item:nth-last-child(-n+3) .site-nav__panel { left: auto; right: 0; }
  .site-nav__item:hover .site-nav__panel {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity 180ms ease 120ms, transform 220ms ease 120ms, visibility 0s linear 120ms;
  }
  .site-nav__panel-title { margin: 0; font-weight: 750; font-size: var(--fs-lg); color: var(--c-accent); }
  .site-nav__panel-text { margin: 0 0 var(--space-3); font-size: var(--fs-sm); color: var(--c-text-muted); }
  .site-nav__sub { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .site-nav__sub a {
    display: flex; align-items: center; gap: var(--space-2); padding: 0.4rem var(--space-2); border-radius: var(--radius-sm);
    color: var(--c-text); text-decoration: none; font-size: var(--fs-sm); font-weight: 550;
    transition: background 150ms ease, color 150ms ease;
  }
  .site-nav__sub a:hover { background: var(--c-accent-soft); color: var(--c-accent-hover); }
  .site-nav__sub .icon { width: 16px; height: 16px; flex: none; color: var(--c-accent); }
}

/* Buscador */
.search { position: relative; display: flex; gap: var(--space-2); }
.search__field { position: relative; flex: 1; min-width: 0; }
.search__icon {
  position: absolute; left: 0.85rem; top: 50%; translate: 0 -50%; color: var(--c-text-muted); pointer-events: none;
  transition: color 0.2s ease, scale 0.25s cubic-bezier(.34, 1.56, .64, 1);
}
.search__input {
  width: 100%; min-height: 44px; padding: 0.55rem 2.6rem 0.55rem 2.6rem;
  border: 1px solid var(--c-border); border-radius: 999px;
  background: color-mix(in srgb, var(--c-surface-2) 70%, var(--c-surface));
  box-shadow: inset 0 1px 2px rgb(16 24 40 / 0.06);
  appearance: none; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.25s ease;
}
.search__input:hover { border-color: var(--c-border-strong); background: var(--c-surface); }
.search__input::placeholder { color: var(--c-text-muted); opacity: 1; }
.search__input:focus-visible {
  outline: 2px solid transparent; border-color: var(--c-accent); background: var(--c-surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-focus) 28%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--c-accent) 60%, transparent);
}
.search__field:focus-within .search__icon { color: var(--c-accent); scale: var(--pop, 1.08); }
.search__input::-webkit-search-cancel-button { cursor: pointer; }
/* Atajo de teclado «/»: solo en escritorio y mientras el campo está vacío y sin foco. */
.search__kbd {
  position: absolute; right: 0.7rem; top: 50%; translate: 0 -50%; display: none;
  min-width: 1.6rem; padding: 0.05rem 0.4rem; border: 1px solid var(--c-border-strong); border-bottom-width: 2px;
  border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-text-muted);
  font: 600 0.8rem/1.4 var(--font-mono, ui-monospace, monospace); text-align: center; pointer-events: none;
  transition: opacity 0.2s ease;
}
@media (hover: hover) and (pointer: fine) { .search__kbd { display: block; } }
.search__input:focus ~ .search__kbd, .search__input:not(:placeholder-shown) ~ .search__kbd { opacity: 0; }
.search--hero .search__input, .search--page .search__input {
  min-height: 56px; font-size: var(--fs-lg); padding-left: 3rem; background: var(--c-surface);
  border-color: var(--c-border-strong); box-shadow: var(--shadow);
}
.search--hero .search__input:focus-visible, .search--page .search__input:focus-visible {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-focus) 26%, transparent), var(--shadow-lg);
}
.search--hero .search__icon, .search--page .search__icon { left: 1rem; width: 1.4em; height: 1.4em; }
.search--hero .search__submit, .search--page .search__submit { border-radius: 999px; padding-inline: var(--space-5); }
.search__panel {
  position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-2); max-height: min(70vh, 28rem); overflow-y: auto;
  animation: search-panel-in 0.18s ease-out both;
}
@keyframes search-panel-in { from { opacity: 0; translate: 0 var(--drop, -8px); } }
.search__results { list-style: none; margin: 0; padding: 0; }
.search__option {
  display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  border-left: 3px solid transparent; color: var(--c-text); text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.search__option:hover, .search__option[aria-selected="true"] { background: var(--c-accent-soft); border-left-color: var(--c-accent); color: var(--c-text); }
.search__option-title { display: block; font-weight: 600; line-height: 1.35; }
.search__option-meta { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); }
.search__message { margin: var(--space-2) var(--space-3); font-size: var(--fs-sm); color: var(--c-text-muted); }
.search__all { display: block; margin-top: var(--space-1); padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); font-weight: 600; border-top: 1px solid var(--c-border); }
mark.hl { background: color-mix(in srgb, var(--c-accent) 22%, transparent); color: inherit; border-radius: 2px; padding: 0; }

/* Pie */
.site-footer { margin-top: var(--space-8); background: var(--c-surface); border-top: 1px solid var(--c-border); font-size: 0.9375rem; }
.footer-grid { display: grid; gap: var(--space-6); padding-block: var(--space-7) var(--space-6); grid-template-columns: 1fr; }
.footer-about p { color: var(--c-text-muted); max-width: 28rem; }
.footer-note { display: flex; gap: var(--space-2); align-items: flex-start; }
.footer-note .icon { margin-top: 0.2em; color: var(--c-accent); }
.footer-nav h2 { font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-muted); margin-bottom: var(--space-3); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.footer-nav a, .link-btn { color: var(--c-text); text-decoration: none; display: inline-block; padding-block: 0.3rem; }
.footer-nav a:hover, .link-btn:hover { color: var(--c-accent); text-decoration: underline; }
.link-btn { background: none; border: 0; padding-inline: 0; text-align: left; }
.footer-bottom { border-top: 1px solid var(--c-border); padding-block: var(--space-4); color: var(--c-text-muted); font-size: var(--fs-sm); }
.footer-bottom p { margin: 0; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; } }

/* 4. Componentes ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0.55rem 1.1rem; border-radius: var(--radius);
  border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text);
  font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn:hover { background: var(--c-surface-2); color: var(--c-text); text-decoration: none; }
.btn--primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.btn--primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); color: var(--c-on-accent); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover { background: var(--c-surface-2); }
.btn--sm { min-height: 36px; padding: 0.35rem 0.75rem; font-size: var(--fs-sm); }
.btn--icon { padding: 0; width: 40px; min-height: 40px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
  content: ""; position: absolute; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 2px solid var(--c-on-accent); border-right-color: transparent; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.card-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid--tools, .card-grid--categories { grid-template-columns: repeat(3, 1fr); } }
.card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.card:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow); }
.card:focus-within { border-color: var(--c-accent); }
.card__title { margin: 0; font-size: var(--fs-h3); }
.card__link { color: var(--c-text); text-decoration: none; }
.card__link:hover { color: var(--c-accent); }
/* Toda la tarjeta es clicable, pero el enlace real (y su foco) es el título. */
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.card__text { color: var(--c-text-muted); margin: 0; }
.card__eyebrow { margin: 0; }
.card__icon, .category-card__icon, .page-hero__icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--radius); background: var(--c-accent-soft); color: var(--c-accent);
}
.card__icon .icon, .category-card__icon .icon { width: 24px; height: 24px; }
.tool-card { flex-direction: row; align-items: flex-start; gap: var(--space-4); }
.card__body { display: grid; gap: var(--space-1); }
.card__more { margin-top: auto; padding-top: var(--space-2); display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; color: var(--c-accent); font-size: var(--fs-sm); }
.category-card__count { margin: auto 0 0; font-size: var(--fs-sm); color: var(--c-text-muted); font-weight: 600; }

.notice { display: flex; gap: var(--space-3); padding: var(--space-4); border: 1px solid; border-radius: var(--radius); margin-block: var(--space-4); }
.notice p:last-child { margin-bottom: 0; }
.notice__icon { margin-top: 0.15em; }
.notice__title { font-weight: 700; margin-bottom: var(--space-1); }
.notice--info { background: var(--c-info-bg); border-color: var(--c-info-border); color: var(--c-info-text); }
.notice--warning { background: var(--c-warn-bg); border-color: var(--c-warn-border); color: var(--c-warn-text); }
.notice a { color: inherit; font-weight: 600; }

.breadcrumbs { padding-top: var(--space-4); font-size: var(--fs-sm); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); color: var(--c-text-muted); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: var(--space-1); color: var(--c-border-strong); }
.breadcrumbs a { color: var(--c-text-muted); padding-block: 0.4rem; display: inline-block; }
.breadcrumbs a:hover { color: var(--c-accent); }
.breadcrumbs [aria-current] { color: var(--c-text); }

.related { margin-top: var(--space-7); padding: var(--space-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); }
.related h2 { font-size: var(--fs-h3); }
.related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.related__list a { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0; font-weight: 600; }
.related__type { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-muted); background: var(--c-surface-2); padding: 0.1rem 0.45rem; border-radius: 4px; }

.ad-slot { margin-block: var(--space-7); padding-top: var(--space-2); border-top: 1px solid var(--c-border); min-height: 120px; }
.ad-slot__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-muted); margin-bottom: var(--space-2); }
.affiliate-link__tag { display: inline-block; margin-left: 0.4em; font-size: 0.75rem; font-weight: 600; color: var(--c-text-muted); border: 1px solid var(--c-border); border-radius: 4px; padding: 0 0.35em; vertical-align: 0.1em; }

/* 5. Páginas --------------------------------------------------------------- */
.hero { padding-block: var(--space-7) var(--space-6); }
.hero h1 { max-width: 20ch; }
.hero .hero__title { max-width: 16ch; }
.hero .lead { margin-bottom: var(--space-5); }
.hero .search { max-width: 40rem; }
.hero__shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.hero__shortcuts-label { font-size: var(--fs-sm); color: var(--c-text-muted); margin-right: var(--space-1); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0.3rem 0.85rem; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-surface); color: var(--c-text); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; }
.chip:hover { border-color: var(--c-accent); color: var(--c-accent); }
.chip .icon { width: 1.1em; height: 1.1em; color: var(--c-accent); }
@media (min-width: 900px) { .hero { padding-block: var(--space-8) var(--space-7); } }

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.steps li { counter-increment: step; position: relative; padding-left: 3.25rem; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -0.1rem; width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent); font-weight: 700;
}
.steps h3 { margin-bottom: var(--space-1); }
.steps p { margin: 0; color: var(--c-text-muted); }
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.features li { display: flex; gap: var(--space-3); }
.features .icon { color: var(--c-accent); margin-top: 0.2em; width: 1.4em; height: 1.4em; }
.features strong { display: block; }
.features span { color: var(--c-text-muted); }
.split { display: grid; gap: var(--space-7); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .steps { gap: var(--space-5); } }

.page-hero { padding-block: var(--space-5) var(--space-5); }
.page-hero__inner { display: flex; gap: var(--space-4); align-items: flex-start; }
.page-hero__icon { width: 52px; height: 52px; margin-top: 0.35rem; }
.page-hero__icon .icon { width: 28px; height: 28px; }
.page-hero .lead { margin-bottom: var(--space-3); }
.trust-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--fs-sm); color: var(--c-text-muted); font-weight: 600; }
.trust-list li { display: inline-flex; align-items: center; gap: var(--space-1); }
.trust-list .icon { color: var(--c-success-text); }
@media (max-width: 559.98px) { .page-hero__icon { display: none; } }

.hub-section { padding-top: var(--space-6); }
.hub-section > h2 { display: flex; align-items: center; gap: var(--space-2); }
.hub-section > h2 .icon { color: var(--c-accent); }
.hub-section > p { color: var(--c-text-muted); max-width: 44rem; }

/* Artículos */
.article__header { padding-block: var(--space-5) var(--space-3); }
.article-meta { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }
.prose { font-size: var(--fs-base); }
.prose > * + h2 { margin-top: var(--space-7); }
.prose > * + h3 { margin-top: var(--space-5); }
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 var(--space-4); }
.prose li + li { margin-top: var(--space-2); }
.prose blockquote { margin: var(--space-5) 0; padding: var(--space-3) var(--space-4); border-left: 4px solid var(--c-accent); background: var(--c-surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.prose blockquote p:last-child { margin: 0; }
.prose pre { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--space-4); overflow-x: auto; font-size: 0.9rem; line-height: 1.5; }
.prose pre code { background: none; padding: 0; }
.table-wrap { position: relative; overflow-x: auto; margin: 0 0 var(--space-5); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.prose table, .data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td, .data-table th, .data-table td { text-align: left; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.prose thead th, .data-table thead th { background: var(--c-surface-2); font-weight: 650; white-space: nowrap; }
.prose tbody tr:last-child td, .data-table tbody tr:last-child td { border-bottom: 0; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.prose .formula { display: block; font-family: var(--font-mono); background: var(--c-surface); border: 1px solid var(--c-border); border-left: 4px solid var(--c-accent); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin-bottom: var(--space-4); overflow-x: auto; white-space: nowrap; }
.sources { margin-top: var(--space-7); font-size: 0.9375rem; }
.sources h2 { font-size: var(--fs-h3); }
.sources ul { padding-left: 1.2rem; }
.sources li + li { margin-top: var(--space-2); }
.sources__publisher { color: var(--c-text-muted); }
.legal-note { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Página 404 y búsqueda */
.error-page { padding-block: var(--space-8) var(--space-6); }
.error-page__code { font-size: var(--fs-sm); font-weight: 700; color: var(--c-accent); letter-spacing: 0.08em; text-transform: uppercase; }
.search-page__results { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.search-page__results .card { padding: var(--space-4) var(--space-5); }
.search-page__status { margin-top: var(--space-4); color: var(--c-text-muted); }

/* 6. Herramientas ------------------------------------------------------------ */
.tool-shell { margin-bottom: var(--space-6); }
.tool-panel {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: var(--space-4);
}
@media (min-width: 640px) { .tool-panel { padding: var(--space-6); } }
.tool-panel > * + * { margin-top: var(--space-5); }
.tool-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .tool-grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.panel-title { font-size: var(--fs-h3); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.panel-title .icon { color: var(--c-accent); flex: none; }

.dropzone {
  position: relative; display: grid; place-items: center; text-align: center; gap: var(--space-2);
  padding: var(--space-6) var(--space-4); min-height: 13rem;
  border: 2px dashed var(--c-border-strong); border-radius: var(--radius-lg); background: var(--c-surface-2);
  transition: border-color var(--transition), background var(--transition);
}
.dropzone.is-dragover { border-color: var(--c-accent); background: var(--c-accent-soft); }
.dropzone:focus-within { border-color: var(--c-accent); }
.dropzone__icon { width: 2.5rem; height: 2.5rem; color: var(--c-accent); }
.dropzone__title { font-weight: 700; font-size: var(--fs-lg); margin: 0; }
.dropzone__hint { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.dropzone__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dropzone__input:focus-visible + .btn { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.dropzone--compact { min-height: auto; padding: var(--space-4); grid-template-columns: auto; }

.file-info { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-2); }
.file-info__name { font-weight: 650; margin: 0; overflow-wrap: anywhere; }
.file-info__meta { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.file-info__body { min-width: 0; flex: 1; }

.field { display: grid; gap: var(--space-1); }
.field + .field, .field + fieldset, fieldset + .field { margin-top: var(--space-4); }
.field label, .field__label, legend { font-weight: 650; }
.field__hint { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }
.field__error { font-size: var(--fs-sm); color: var(--c-danger-text); font-weight: 600; margin: 0; }
.input, .select {
  width: 100%; min-height: 44px; padding: 0.5rem 0.75rem; border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm); background: var(--c-surface);
}
.input:focus-visible, .select:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 0; border-color: var(--c-accent); }
.input[aria-invalid="true"] { border-color: var(--c-danger-text); box-shadow: 0 0 0 1px var(--c-danger-text); }
.input--num { font-variant-numeric: tabular-nums; }
.input--lg { font-size: 1.25rem; min-height: 52px; }
.select { appearance: auto; }
.input-group { display: flex; gap: var(--space-2); align-items: stretch; }
.input-group > * { min-width: 0; }
.input-group .input { flex: 1; }
.input-group .select { flex: 0 1 11rem; width: auto; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: var(--space-2); }
.segmented { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.45rem 1rem;
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); background: var(--c-surface);
  font-weight: 600; cursor: pointer; transition: background var(--transition), border-color var(--transition);
}
.segmented span:hover { border-color: var(--c-accent); }
.segmented input:checked + span { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.segmented input:focus-visible + span { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.segmented input:disabled + span { opacity: 0.5; cursor: not-allowed; }
.check { display: flex; gap: var(--space-2); align-items: flex-start; font-weight: 600; cursor: pointer; }
.check input { width: 1.2rem; height: 1.2rem; margin: 0.2rem 0 0; accent-color: var(--c-accent); flex: none; }
.range-row { display: flex; align-items: center; gap: var(--space-3); }
.range-row input[type="range"] { flex: 1; accent-color: var(--c-accent); min-height: 44px; }
.range-row output { min-width: 3.2ch; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.color-input { width: 52px; height: 44px; padding: 2px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); background: var(--c-surface); }
.dims { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-2); align-items: end; }
.dims__x { padding-bottom: 0.65rem; color: var(--c-text-muted); font-weight: 700; }
.quick-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.status { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); min-height: 1.5em; }
.alert { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius); border: 1px solid; font-weight: 550; }
.alert p { margin: 0; }
.alert--error { background: var(--c-danger-bg); border-color: var(--c-danger-border); color: var(--c-danger-text); }
.alert--warning { background: var(--c-warn-bg); border-color: var(--c-warn-border); color: var(--c-warn-text); }
.alert--success { background: var(--c-success-bg); border-color: var(--c-success-border); color: var(--c-success-text); }
.alert .icon { margin-top: 0.15em; }
.alert ul { margin: var(--space-1) 0 0; padding-left: 1.2rem; }

.preview { display: grid; gap: var(--space-2); margin: 0; }
.preview__frame {
  display: grid; place-items: center; min-height: 10rem; max-height: 26rem; overflow: hidden;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background-color: var(--c-checker-a);
  background-image: conic-gradient(var(--c-checker-b) 25%, transparent 0 50%, var(--c-checker-b) 0 75%, transparent 0);
  background-size: 20px 20px;
}
.preview__frame img { max-height: 26rem; width: auto; object-fit: contain; }
.preview figcaption { font-size: var(--fs-sm); color: var(--c-text-muted); }

.result { border: 1px solid var(--c-success-border); background: var(--c-surface); border-radius: var(--radius-lg); padding: var(--space-4); }
@media (min-width: 640px) { .result { padding: var(--space-5); } }
.result__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-h3); color: var(--c-success-text); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.stat { background: var(--c-surface-2); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.stat dt { font-size: var(--fs-sm); color: var(--c-text-muted); font-weight: 600; }
.stat dd { margin: 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat--good dd { color: var(--c-success-text); }
.stat--bad dd { color: var(--c-danger-text); }

.big-result { background: var(--c-accent-soft); border-radius: var(--radius-lg); padding: var(--space-5); text-align: center; }
.big-result__label { margin: 0 0 var(--space-1); font-weight: 600; color: var(--c-text-muted); }
.big-result__value { margin: 0; font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); font-weight: 750; color: var(--c-accent); font-variant-numeric: tabular-nums; line-height: 1.15; word-break: break-all; }
.big-result__detail { margin: var(--space-2) 0 0; color: var(--c-text-muted); font-family: var(--font-mono); font-size: 0.9375rem; word-break: break-word; }
.calc-grid { display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.calc-card { border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.calc-card legend { font-size: var(--fs-h3); }
.compare-verdict { font-weight: 650; text-align: center; margin: 0; }

.file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); counter-reset: file; }
.file-list__item {
  counter-increment: file; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center;
  padding: var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface);
}
.file-list__item::before { content: counter(file); width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--c-surface-2); font-weight: 700; font-size: var(--fs-sm); }
.file-list__item.is-error { border-color: var(--c-danger-border); background: var(--c-danger-bg); }
.file-list__name { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.file-list__meta { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
.file-list__item.is-error .file-list__meta { color: var(--c-danger-text); }
.file-list__actions { display: flex; gap: var(--space-1); }
.download-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.download-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius); }
.download-list .meta { font-size: var(--fs-sm); color: var(--c-text-muted); }
.page-summary { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }

.tool-content { padding-top: var(--space-5); }
.tool-content h2 { margin-top: var(--space-6); }
.tool-content h2:first-child { margin-top: 0; }

/* 7. Movimiento reducido e impresión ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Con «reducir movimiento» no se anulan todas las animaciones: se quita el movimiento (desplazar,
     girar, escalar) y se conservan los fundidos y los cambios de color, que no marean. Cada animación
     con movimiento lo toma de variables (--rise, --lift…) que aquí valen 0; ver la sección 24. */
  html { scroll-behavior: auto !important; }
  .btn.is-busy::after { animation: none; border-right-color: var(--c-on-accent); opacity: 0.6; }
  .page-card__thumb img, .level-meter__bar { transition: none; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print {
  .site-header, .site-footer, .skip-link, .ad-slot, .tool-shell, .related { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; }
}

/* Ajustes de formularios y tabla de equivalencias */
.check + .check { margin-top: var(--space-2); }
fieldset > .check { padding-block: 0.35rem; }
.equivalences { margin-top: var(--space-5); }
.equivalences summary { cursor: pointer; font-weight: 650; color: var(--c-accent); padding-block: var(--space-2); width: max-content; max-width: 100%; }
.equivalences .table-wrap { margin-top: var(--space-3); }
.tool-panel > .check { margin-top: var(--space-4); }
.big-result + .actions, .field + .actions, fieldset + .actions, .field + .field, .actions + .field { margin-top: var(--space-4); }
.calc-card[hidden] { display: none; }
/* Los títulos de resultado reciben el foco para que los lectores de pantalla los anuncien; no necesitan contorno. */
[data-result-title]:focus { outline: none; }

/* 8. Herramientas añadidas en octubre de 2026 ---------------------------------- */
.mono { font-family: var(--font-mono); }
.btn[aria-pressed="true"] { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-text); }

/* Listas con miniatura (imágenes a PDF) */
.file-list--thumbs .file-list__item { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.file-list__thumb { width: 3.25rem; height: 3.25rem; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--c-border); background: var(--c-surface-2); }
/* Varias imágenes a la vez en el conversor, el compresor y el redimensionador */
.batch-list { max-height: 28rem; overflow-y: auto; align-content: start; padding-right: var(--space-1); }
.result [data-result-list] { margin-bottom: var(--space-4); }
@media (max-width: 599.98px) {
  .result [data-result-list] .file-list__item { grid-template-columns: auto minmax(0, 1fr); }
  .result [data-result-list] .file-list__actions { grid-column: 2; }
}
@media (max-width: 479.98px) {
  .file-list--thumbs .file-list__item { grid-template-columns: auto minmax(0, 1fr); }
  .file-list--thumbs .file-list__item::before { display: none; }
  .file-list--thumbs .file-list__actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Cuadrícula de páginas (ordenar PDF, PDF a imágenes) */
.page-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.page-card { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-2); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.page-card__thumb { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--c-surface-2); }
.page-card__thumb img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; box-shadow: var(--shadow-sm); background: #fff; transition: transform var(--transition); }
.page-card__thumb[data-rotation="90"] img { transform: rotate(90deg); }
.page-card__thumb[data-rotation="180"] img { transform: rotate(180deg); }
.page-card__thumb[data-rotation="270"] img { transform: rotate(270deg); }
.page-card__placeholder { font-size: 1.5rem; font-weight: 700; color: var(--c-text-muted); }
.page-card__label { margin: 0; font-size: var(--fs-sm); font-weight: 650; text-align: center; }
.page-card__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.page-card__actions .btn--icon { min-width: 36px; min-height: 36px; padding: 0.3rem; }
.page-card__actions .icon--up, .page-card__actions .icon--down { transform: rotate(-90deg); }
.page-card.is-deleted .page-card__thumb { opacity: 0.35; }
.page-card.is-deleted .page-card__label { text-decoration: line-through; color: var(--c-danger-text); }
.page-card .check { justify-content: center; font-size: var(--fs-sm); }
/* Arrastrar páginas: el asa (seis puntos) también sirve en pantallas táctiles. */
.page-card { position: relative; }
.page-grid:not(.is-sorting) .page-card { cursor: grab; }
.page-card__grip { position: absolute; top: 4px; left: 4px; z-index: 1; width: 28px; height: 28px; border-radius: var(--radius-sm); touch-action: none; cursor: grab;
  box-sizing: border-box; padding: 5px 6px; background: radial-gradient(circle, var(--c-text-muted) 1.6px, transparent 2px) 0 0 / 8px 6px repeat content-box; }
.page-grid.is-sorting, .page-grid.is-sorting * { cursor: grabbing; user-select: none; }
.page-card.is-dragging { opacity: 0.6; outline: 2px dashed var(--c-accent); outline-offset: 2px; }
.page-card .btn { cursor: pointer; }

/* Separación entre grupos de botones y resultados */
.actions + .quick-actions, .quick-actions + .actions { margin-top: var(--space-3); }
.actions + .stats, .actions + .actions { margin-top: var(--space-3); }
.file-info + .actions, .actions + .page-summary, .page-summary + .page-grid, .page-grid + .actions,
.field__hint + .actions, .actions + .file-list, .file-list + .page-summary, .page-summary + .tool-grid, .tool-grid + .actions { margin-top: var(--space-4); }

/* Barra de progreso */
.progress { width: 100%; height: 0.75rem; accent-color: var(--c-accent); }

/* Teclado */
.kb-capture { display: block; width: 100%; padding: var(--space-4); border: 2px dashed var(--c-border-strong); border-radius: var(--radius-lg); background: var(--c-surface-2); color: var(--c-text); text-align: center; font-weight: 650; cursor: pointer; }
.kb-capture:focus-visible, .kb-capture.is-active { outline: none; border-style: solid; border-color: var(--c-accent); background: var(--c-accent-soft); }
.kb-wrap { overflow-x: auto; padding-bottom: var(--space-2); }
.kb { display: flex; gap: 0.9rem; width: max-content; font-size: 0.75rem; }
.kb__block { display: grid; gap: 0.25rem; align-content: start; }
.kb__row { display: flex; gap: 0.25rem; }
.kb__row--gap { margin-bottom: 0.5rem; }
.kb__key {
  display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; padding: 0 0.15rem; border: 1px solid var(--c-border-strong);
  border-radius: 5px; background: var(--c-surface); color: var(--c-text); font-weight: 600; line-height: 1.1; text-align: center; white-space: nowrap; overflow: hidden;
}
.kb__key--spacer { visibility: hidden; }
.kb__key--small { font-size: 0.6rem; white-space: normal; line-height: 1.05; }
.kb__key--w125 { width: 3.05rem; }
.kb__key--w15 { width: 3.7rem; }
.kb__key--w175 { width: 4.35rem; }
.kb__key--w2 { width: 5.05rem; }
.kb__key--w225 { width: 5.7rem; }
.kb__key--w275 { width: 7rem; }
.kb__key--w625 { width: 15.95rem; }
.kb__key--tall { height: 5.05rem; }
.kb__key.is-tested { background: var(--c-success-bg); border-color: var(--c-success-border); color: var(--c-success-text); }
.kb__key.is-down { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.key-log { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 2.25rem; }
.key-log li { padding: 0.2rem 0.55rem; border-radius: var(--radius-sm); background: var(--c-surface-2); font-family: var(--font-mono); font-size: var(--fs-sm); }

/* Ratón */
.test-area { display: grid; place-items: center; min-height: 14rem; padding: var(--space-4); border: 2px dashed var(--c-border-strong); border-radius: var(--radius-lg); background: var(--c-surface-2); text-align: center; touch-action: none; user-select: none; }
.test-area:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.test-area p { margin: 0; }
.mouse-buttons { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); margin: 0; }
.mouse-button { padding: var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.mouse-button dt { font-weight: 650; }
.mouse-button dd { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
.mouse-button dd strong { font-size: 1.25rem; color: var(--c-text); font-variant-numeric: tabular-nums; }
.mouse-button.is-down { border-color: var(--c-accent); background: var(--c-accent-soft); }
.mouse-button.is-warning { border-color: var(--c-danger-border); background: var(--c-danger-bg); }
.mouse-button.is-warning dd { color: var(--c-danger-text); }

/* Prueba de monitor a pantalla completa */
.screen-test { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: end center; padding: var(--space-6); cursor: none; }
.screen-test[hidden] { display: none; }
.screen-test__hint { margin: 0; padding: var(--space-2) var(--space-4); border-radius: var(--radius); background: rgb(0 0 0 / 0.7); color: #fff; font-size: var(--fs-sm); transition: opacity 600ms ease; }
.screen-test__hint.is-faded { opacity: 0; }
.swatch--black { background: #000; }
.swatch--white { background: #fff; }
.swatch--red { background: #f00; }
.swatch--green { background: #0f0; }
.swatch--blue { background: #00f; }
.swatch--gray { background: #808080; }
.swatch--gradient { background: linear-gradient(90deg, #000, #fff); }
.swatch-btn__chip { width: 1.1rem; height: 1.1rem; border-radius: 4px; border: 1px solid var(--c-border-strong); }

/* Medidor de nivel de audio */
.level-meter { position: relative; height: 1.25rem; border-radius: 999px; background: var(--c-surface-2); border: 1px solid var(--c-border); overflow: hidden; }
.level-meter__bar { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: var(--c-accent); }
.audio-player { width: 100%; }

/* Contraseñas y hashes */
.secret-output { display: block; width: 100%; padding: var(--space-4); border: 1px solid var(--c-border-strong); border-radius: var(--radius); background: var(--c-surface-2); font-family: var(--font-mono); font-size: clamp(1rem, 0.9rem + 0.8vw, 1.375rem); overflow-wrap: anywhere; word-break: break-all; min-height: 3.5rem; margin: 0; }
.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.strength span { height: 0.4rem; border-radius: 999px; background: var(--c-surface-2); border: 1px solid var(--c-border); }
.strength[data-level="1"] span:nth-child(-n+1) { background: var(--c-danger-text); }
.strength[data-level="2"] span:nth-child(-n+2) { background: var(--c-warn-border); }
.strength[data-level="3"] span:nth-child(-n+3) { background: var(--c-success-border); }
.strength[data-level="4"] span { background: var(--c-success-text); }
.secret-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.secret-list li { display: flex; gap: var(--space-2); align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius); }
.secret-list code { overflow-wrap: anywhere; word-break: break-all; min-width: 0; }
.hash-results { display: grid; gap: var(--space-3); margin: 0; }
.hash-results > div { padding: var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-2); }
.hash-results dt { font-weight: 650; display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.hash-results dd { margin: var(--space-1) 0 0; font-family: var(--font-mono); overflow-wrap: anywhere; word-break: break-all; }

/* Metadatos */
.meta-list { display: grid; gap: var(--space-1) var(--space-4); grid-template-columns: minmax(0, max-content) minmax(0, 1fr); margin: 0; font-size: 0.9375rem; }
.meta-list dt { font-weight: 650; }
.meta-list dd { margin: 0; overflow-wrap: anywhere; }
.meta-cards { display: grid; gap: var(--space-3); }
.meta-card { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.meta-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); }
.meta-card__name { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.meta-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.meta-card__tags li { padding: 0.1rem 0.55rem; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; background: var(--c-warn-bg); color: var(--c-warn-text); border: 1px solid var(--c-warn-border); }
.meta-card__tags li.is-kept { background: var(--c-success-bg); color: var(--c-success-text); border-color: var(--c-success-border); }
.meta-card p { margin: 0; }

/* 9. Herramientas añadidas el 21 de octubre de 2026 ---------------------------- */
/* Separación uniforme entre bloques dentro de las zonas de trabajo y tarjetas de cálculo. */
[data-workspace] > * + *, [data-panel] > * + *, .calc-card > * + * { margin-top: var(--space-4); }
.tool-grid + .stats, .field + .stats { margin-top: var(--space-4); }
/* Recorte */
.crop-wrap { display: grid; place-items: center; padding: var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius); background-color: var(--c-checker-a); background-image: conic-gradient(var(--c-checker-b) 25%, transparent 0 50%, var(--c-checker-b) 0 75%, transparent 0); background-size: 20px 20px; }
.crop-stage { position: relative; display: inline-block; max-width: 100%; overflow: hidden; touch-action: none; user-select: none; line-height: 0; }
.crop-stage canvas { display: block; max-width: 100%; max-height: 65vh; width: auto; height: auto; }
.crop-box { position: absolute; outline: 2px solid #fff; box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.45); cursor: move; }
.crop-box:focus-visible { outline: 3px solid var(--c-focus); }
/* Los tiradores quedan dentro del recuadro para poder agarrarlos aunque el recorte toque el borde de la imagen. */
.crop-handle { position: absolute; width: 20px; height: 20px; border-radius: 4px; background: #fff; border: 2px solid #0a6a70; }
.crop-handle--nw { left: -2px; top: -2px; cursor: nwse-resize; }
.crop-handle--ne { right: -2px; top: -2px; cursor: nesw-resize; }
.crop-handle--sw { left: -2px; bottom: -2px; cursor: nesw-resize; }
.crop-handle--se { right: -2px; bottom: -2px; cursor: nwse-resize; }
.crop-fields { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .crop-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.crop-fields .field + .field { margin-top: 0; }

/* Vista previa de iconos */
.icon-previews { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; margin: 0; }
.icon-previews figure { margin: 0; display: grid; gap: var(--space-1); justify-items: center; font-size: var(--fs-sm); color: var(--c-text-muted); }
.icon-previews img { background-color: var(--c-checker-a); background-image: conic-gradient(var(--c-checker-b) 25%, transparent 0 50%, var(--c-checker-b) 0 75%, transparent 0); background-size: 8px 8px; border: 1px solid var(--c-border); }

/* Vista previa de páginas (marca de agua, numeración, firma) */
.page-preview-wrap { display: grid; place-items: center; padding: var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-2); }
.page-preview { position: relative; display: inline-block; max-width: 100%; line-height: 0; box-shadow: var(--shadow); }
.page-preview canvas { display: block; max-width: 100%; max-height: 75vh; width: auto; height: auto; background: #fff; }
.page-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sig-overlay { position: absolute; cursor: move; outline: 2px dashed #0a6a70; outline-offset: 2px; touch-action: none; }
.sig-overlay:focus-visible { outline: 3px solid var(--c-focus); }
.sig-overlay img { display: block; width: 100%; height: 100%; pointer-events: none; }
.sig-overlay--placed { outline-style: solid; outline-color: var(--c-success-border); cursor: default; }
.sig-pad { display: block; width: 100%; max-width: 40rem; aspect-ratio: 5 / 2; border: 2px dashed var(--c-border-strong); border-radius: var(--radius); background: #fff; touch-action: none; cursor: crosshair; }
.sig-preview { display: grid; place-items: center; min-height: 5rem; max-width: 40rem; padding: var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius); background: #fff; }
.sig-preview img { max-width: 100%; max-height: 8rem; }

/* Filas de aparatos (consumo eléctrico) */
.device-rows { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.device-row { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; padding: var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius); }
.device-row .field + .field { margin-top: 0; }
.device-row__name { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .device-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; padding: var(--space-2) var(--space-3); }
  .device-row__name { grid-column: auto; }
}

/* Cámara */
.video-frame { display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #000; }
.video-frame video { width: 100%; height: 100%; object-fit: contain; }
.video-frame.is-mirrored video { transform: scaleX(-1); }

/* Mandos */
.pad-sticks { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.pad-stick { display: grid; gap: var(--space-2); justify-items: center; margin: 0; }
.stick { position: relative; width: 9rem; height: 9rem; border-radius: 50%; border: 2px solid var(--c-border-strong); background: var(--c-surface-2); }
.stick__zone { position: absolute; left: 42.5%; top: 42.5%; width: 15%; height: 15%; border-radius: 50%; border: 1px dashed var(--c-text-muted); }
.stick__dot { position: absolute; left: 50%; top: 50%; width: 1.25rem; height: 1.25rem; margin: -0.625rem 0 0 -0.625rem; border-radius: 50%; background: var(--c-accent); }
.stick.is-pressed { border-color: var(--c-accent); }
.pad-stick figcaption { font-size: var(--fs-sm); font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; }
.pad-buttons { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.pad-buttons li { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; }
.pad-buttons li.is-down { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.pad-buttons li.is-tested:not(.is-down) { background: var(--c-success-bg); border-color: var(--c-success-border); color: var(--c-success-text); }

/* Código QR */
.qr-output { display: grid; place-items: center; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--c-border); border-radius: var(--radius); background: #fff; color: #17202b; }
.qr-output canvas { width: min(100%, 18rem); height: auto; image-rendering: pixelated; }
.qr-output p { margin: 0; font-size: var(--fs-sm); text-align: center; overflow-wrap: anywhere; }

/* 10. Herramientas añadidas el 22 de octubre de 2026 ---------------------------- */
/* Ocultar datos en una imagen */
.redact-stage { cursor: crosshair; }
.redact-zone { position: absolute; outline: 2px dashed #fff; box-shadow: 0 0 0 1px #0a6a70, inset 0 0 0 1px #0a6a70; cursor: move; }
.redact-zone:focus-visible { outline: 3px solid var(--c-focus); }
.redact-zone__remove { position: absolute; top: -2px; right: -2px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 2px solid #0a6a70; border-radius: 4px; background: #fff; color: #17202b; font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer; }
.redact-zone__remove:focus-visible { outline: 3px solid var(--c-focus); }
.redact-zone .crop-handle--se { right: -2px; bottom: -2px; }

/* Escanear documentos */
.scan-editor { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .scan-editor { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.scan-stage canvas { max-height: 70vh; }
.scan-handle { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; border: 3px solid #0a6a70; border-radius: 50%; background: rgb(255 255 255 / 0.85); cursor: grab; touch-action: none; }
.scan-handle:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.scan-result { margin: 0; display: grid; gap: var(--space-2); justify-items: center; padding: var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-2); }
.scan-result canvas { display: block; max-width: 100%; max-height: 60vh; background: #fff; box-shadow: var(--shadow); }
.scan-result figcaption { font-size: var(--fs-sm); color: var(--c-text-muted); }
.file-list__item.is-current { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }
.file-list__actions .btn--sm { white-space: nowrap; }

/* Extraer texto */
.text-output { width: 100%; min-height: 16rem; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--fs-sm); line-height: 1.5; resize: vertical; }

/* Frecuencia de refresco */
.motion-strip { display: block; width: 100%; height: 6rem; border-radius: var(--radius); }

/* Pantalla táctil */
.touch-area { position: relative; }
.touch-area canvas { display: block; width: 100%; height: min(60vh, 32rem); border: 1px solid var(--c-border); border-radius: var(--radius); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.touch-area.is-fullscreen { background: #fff; }
.touch-area.is-fullscreen canvas { width: 100vw; height: 100vh; border: 0; border-radius: 0; }
.touch-area__exit { position: absolute; top: var(--space-3); right: var(--space-3); }

/* Información del equipo */
.info-groups { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .info-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.info-list { margin: 0; display: grid; gap: 0; border: 1px solid var(--c-border); border-radius: var(--radius); }
.info-list > div { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--c-border); }
.info-list > div:first-child { border-top: 0; }
@media (min-width: 480px) { .info-list > div { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-3); } }
.info-list dt { font-weight: 650; }
.info-list dd { margin: 0; overflow-wrap: anywhere; }
.info-list__note { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Comprobador de contraseñas (cinco niveles) */
.strength--5 { grid-template-columns: repeat(5, 1fr); }
.strength--5[data-level="0"] span:nth-child(-n+1) { background: var(--c-danger-text); }
.strength--5[data-level="1"] span:nth-child(-n+2) { background: var(--c-danger-text); }
.strength--5[data-level="2"] span:nth-child(-n+3) { background: var(--c-warn-border); }
.strength--5[data-level="3"] span:nth-child(-n+4) { background: var(--c-success-border); }
.strength--5[data-level="4"] span { background: var(--c-success-text); }

/* 11. Cuarta tanda de herramientas (texto, color, subredes, códigos de barras, tests, grabador y audio) */
.text-area { min-height: 12rem; resize: vertical; line-height: 1.5; }
.select--auto { width: auto; min-width: 12rem; }
.check-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.check-row .check + .check { margin-top: 0; }
.mode-panel[hidden] { display: none; }
.stats--live .stat dd { font-size: 1.5rem; }

/* Contador de palabras */
.word-freq { display: grid; gap: var(--space-1); margin: var(--space-3) 0 0; padding-left: 1.5rem; }
.word-freq li { display: flex; justify-content: space-between; gap: var(--space-3); max-width: 24rem; }
.word-freq__count { color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.data-table tr.is-over td { color: var(--c-danger-text); font-weight: 650; }

/* Comparar textos */
.diff-result > * + * { margin-top: var(--space-4); }
.diff-legend { display: flex; gap: var(--space-4); font-size: var(--fs-sm); font-weight: 650; }
.diff-legend__del { color: var(--c-danger-text); }
.diff-legend__ins { color: var(--c-success-text); }
.diff-view { max-height: 70vh; overflow: auto; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.55; }
.diff-row { display: grid; grid-template-columns: 3.2rem 3.2rem 1.4rem minmax(0, 1fr); }
.diff-row__no { padding: 0 var(--space-2); text-align: right; color: var(--c-text-muted); user-select: none; border-right: 1px solid var(--c-border); font-variant-numeric: tabular-nums; }
.diff-row__sign { text-align: center; user-select: none; font-weight: 700; }
.diff-row__text { padding-right: var(--space-3); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.diff-row--delete { background: var(--c-danger-bg); color: var(--c-danger-text); }
.diff-row--insert { background: var(--c-success-bg); color: var(--c-success-text); }
.diff-row del, .diff-row ins { border-radius: 3px; padding: 0 1px; color: inherit; }
.diff-row del { background: var(--c-danger-border); text-decoration: line-through; text-decoration-thickness: 1px; }
.diff-row ins { background: var(--c-success-border); text-decoration: none; }
.diff-row--gap { display: block; padding: var(--space-1) var(--space-3); color: var(--c-text-muted); background: var(--c-surface-2); text-align: center; font-family: var(--font-sans); }
@media (max-width: 479.98px) { .diff-row { grid-template-columns: 2.4rem 2.4rem 1.2rem minmax(0, 1fr); } }

/* Selector de colores */
.color-row { display: flex; gap: var(--space-3); align-items: flex-start; }
.color-row__field { flex: 1; min-width: 0; }
.color-input--lg { width: 64px; height: 64px; flex: none; margin-top: 1.6rem; }
.color-formats { display: grid; gap: var(--space-1); margin: 0; }
.color-formats > div { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-2); align-items: center; }
.color-formats dt { font-weight: 650; font-size: var(--fs-sm); color: var(--c-text-muted); }
.color-formats dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.color-formats dd .mono { overflow-wrap: anywhere; min-width: 0; }
.contrast > * + * { margin-top: var(--space-4); }
.contrast__grid { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .contrast__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.contrast-preview { --preview-fg: #0a6a70; --preview-bg: #fff; display: grid; gap: var(--space-3); align-content: center; padding: var(--space-5); border: 1px solid var(--c-border); border-radius: var(--radius-lg); color: var(--preview-fg); background: var(--preview-bg); }
.contrast-preview p { margin: 0; }
.contrast-preview__large { font-size: 1.5rem; font-weight: 700; }
.contrast-preview__ui { display: flex; align-items: center; gap: var(--space-3); }
.contrast-preview__btn { display: inline-block; padding: 0.4rem 1rem; border: 2px solid var(--preview-fg); border-radius: var(--radius-sm); font-weight: 650; }
.wcag-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.wcag-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.wcag-list li.is-pass { background: var(--c-success-bg); color: var(--c-success-text); }
.wcag-list li.is-fail { background: var(--c-danger-bg); color: var(--c-danger-text); }
.alert .suggestion { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.swatch-dot { --dot: #000; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--dot); border: 1px solid var(--c-border-strong); }
.pick-canvas canvas { display: block; max-width: 100%; height: auto; cursor: crosshair; border: 1px solid var(--c-border); border-radius: var(--radius); }
.equivalences > * + * { margin-top: var(--space-3); }

/* Subredes */
.subnet-table th { width: 40%; text-align: left; font-weight: 650; }
.vlsm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.vlsm-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: var(--space-2); align-items: end; }
.vlsm-row .field + .field { margin-top: 0; }

/* Códigos de barras */
.preview__frame--plain { background: #fff; padding: var(--space-4); }
.barcode-preview img { max-width: 100%; height: auto; image-rendering: pixelated; }

/* Clics por segundo y tiempo de reacción */
.click-area, .reaction-area {
  display: grid; place-items: center; align-content: center; gap: var(--space-2); width: 100%; min-height: 16rem;
  padding: var(--space-5); border: 2px dashed var(--c-border-strong); border-radius: var(--radius-lg);
  background: var(--c-surface-2); color: var(--c-text); text-align: center; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.click-area:focus-visible, .reaction-area:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.click-area__title, .reaction-area__title { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); font-weight: 750; }
.click-area__hint, .reaction-area__hint { color: var(--c-text-muted); max-width: 32rem; }
.click-area.is-running { border-style: solid; border-color: var(--c-accent); background: var(--c-accent-soft); }
.click-area.is-done { border-style: solid; }
.reaction-area[data-state="waiting"] { background: #b3261e; border-color: #b3261e; color: #fff; }
.reaction-area[data-state="go"] { background: #1a7f37; border-color: #1a7f37; color: #fff; }
.reaction-area[data-state="waiting"] .reaction-area__hint, .reaction-area[data-state="go"] .reaction-area__hint { color: #fff; }
.attempts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.attempts li { padding: var(--space-1) var(--space-3); border-radius: 999px; background: var(--c-surface-2); border: 1px solid var(--c-border); font-variant-numeric: tabular-nums; }
.attempts .attempts__item--bad { background: var(--c-danger-bg); color: var(--c-danger-text); border-color: var(--c-danger-border); }

/* Grabador de pantalla */
.recorder-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--c-danger-border); border-radius: var(--radius); background: var(--c-danger-bg); }
.recorder-bar[hidden] { display: none; }
.recorder-bar__dot { width: 0.85rem; height: 0.85rem; border-radius: 50%; background: #d1242f; }
.recorder-bar__time { font-size: 1.375rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.recorder-bar__size { flex: 1; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.recorder-video { display: block; width: 100%; max-height: 65vh; border-radius: var(--radius); background: #000; }
@media (prefers-reduced-motion: no-preference) {
  .recorder-bar__dot { animation: rec-blink 1.2s steps(2, start) infinite; }
}
@keyframes rec-blink { to { visibility: hidden; } }

/* Recortar audio */
.waveform { border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-2); padding: var(--space-2); }
.waveform__canvas { display: block; width: 100%; height: 9rem; cursor: pointer; touch-action: none; }
.field input[type="range"] { width: 100%; accent-color: var(--c-accent); min-height: 44px; }

/* 12. Diagnóstico guiado, rutas de aprendizaje y cuestionarios ------------------ */
.hub-note { margin: var(--space-6) 0; }
.icon--flip { transform: scaleX(-1); }

/* Diagnóstico */
.diag__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.diag__bar[hidden] { display: none; }
.diag__step { margin: 0; font-weight: 700; color: var(--c-text-muted); }
.diag__path { margin: 0; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6); border-radius: var(--radius); background: var(--c-surface-2); font-size: var(--fs-sm); display: grid; gap: var(--space-1); }
.diag__path-q { color: var(--c-text-muted); }
.diag-node { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.diag-node:focus { outline: none; }
.diag:not(.is-enhanced) .diag-node + .diag-node { border-top: 1px solid var(--c-border); padding-top: var(--space-5); }
.diag-node > * + * { margin-top: var(--space-3); }
.diag-node__title { font-size: var(--fs-h2); line-height: var(--lh-tight); margin: 0; }
.diag-node__kicker { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: 700; color: var(--c-success-text); }
.diag-options { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.diag-option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 52px;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--c-border-strong); border-radius: var(--radius);
  background: var(--c-surface); color: var(--c-text); font-weight: 600; text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}
.diag-option:hover { border-color: var(--c-accent); background: var(--c-accent-soft); }
.diag-option .icon { flex: none; color: var(--c-accent); }
.diag-steps { padding-left: 1.4rem; display: grid; gap: var(--space-2); }
.diag-node__more { font-size: var(--fs-h3); margin-top: var(--space-5); }
.diag-node__restart { font-size: var(--fs-sm); }

/* Rutas */
.route { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.route > * + * { margin-top: var(--space-5); }
.route__progress { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); }
.route__progress[hidden] { display: none; }
.route__progress p { margin: 0; font-weight: 700; }
.route__progress .link-btn { justify-self: start; font-size: var(--fs-sm); }
.route-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--space-3); }
.route-step {
  counter-increment: step; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center;
  padding: var(--space-4); border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface);
}
.route-step::before {
  content: counter(step); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--c-accent-soft); color: var(--c-accent); font-weight: 750;
}
.route-step.is-done { border-color: var(--c-success-border); }
.route-step.is-done::before { content: "✓"; background: var(--c-success-bg); color: var(--c-success-text); }
.route-step__kind { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); font-weight: 600; }
.route-step__title { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-tight); }
.route-step__note { margin: var(--space-1) 0 0; color: var(--c-text-muted); }
.route-step__done[hidden] { display: none; }
@media (max-width: 559.98px) {
  .route-step { grid-template-columns: auto minmax(0, 1fr); }
  .route-step__done { grid-column: 2; }
}
.route__quiz { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--c-accent-soft); }
.route__quiz .btn { white-space: normal; text-align: center; max-width: 100%; }
.route__quiz h2 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-h3); margin: 0 0 var(--space-2); }

/* Cuestionarios */
.quiz > * + * { margin-top: var(--space-4); }
.quiz__progress { margin: 0; font-weight: 700; color: var(--c-text-muted); }
.quiz:not(.is-enhanced) .quiz-q + .quiz-q { border-top: 1px solid var(--c-border); padding-top: var(--space-5); }
.quiz-q__title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.4; margin-bottom: var(--space-3); }
.quiz-options { display: grid; gap: var(--space-2); }
.quiz-option {
  display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--c-border-strong); border-radius: var(--radius); background: var(--c-surface); cursor: pointer; font-weight: 600;
}
.quiz-option:hover { border-color: var(--c-accent); }
.quiz-option input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--c-accent); flex: none; }
.quiz-option:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-soft); }
.quiz-option:has(input:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.quiz-option.is-correct, .quiz-option.is-correct:has(input:checked) { border-color: var(--c-success-border); background: var(--c-success-bg); color: var(--c-success-text); }
.quiz-option.is-wrong, .quiz-option.is-wrong:has(input:checked) { border-color: var(--c-danger-border); background: var(--c-danger-bg); color: var(--c-danger-text); }
.quiz-option:has(input:disabled) { cursor: default; }
.quiz-feedback { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius); border: 1px solid var(--c-danger-border); background: var(--c-danger-bg); }
.quiz-feedback.is-ok { border-color: var(--c-success-border); background: var(--c-success-bg); }
.quiz-feedback p { margin: 0; }
.quiz-feedback p + p { margin-top: var(--space-2); }
.quiz-feedback__verdict { font-weight: 750; }
.quiz-result > * + * { margin-top: var(--space-4); }
.quiz-result:focus { outline: none; }
.quiz-result__score { text-align: left; }
.quiz-outcome h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-2); }
.quiz-tips { padding-left: 1.2rem; display: grid; gap: var(--space-2); }
.quiz-solutions { margin-bottom: var(--space-5); }
.quiz-solutions[hidden] { display: none; }
.quiz-solutions ol { padding-left: 1.4rem; display: grid; gap: var(--space-2); }

/* 13. Quinta tanda: vídeo, documentos e IA (22 de octubre de 2026) ------------- */
.preview__frame--media { background: #000; background-image: none; padding: 0; min-height: 0; }
.preview__frame--media video, .preview__frame--media img { display: block; width: 100%; max-height: 26rem; object-fit: contain; }
.preview__frame--media audio { width: 100%; margin: var(--space-3); }
[data-result-preview]:empty { display: none; }
.result [data-result-preview] { margin-block: var(--space-4); }
.compare { margin-top: var(--space-4); }
.compare__frames { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.compare__frames canvas { width: 100%; height: auto; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-2); }
.inpaint-stage { position: relative; margin-top: var(--space-4); touch-action: none; cursor: crosshair; user-select: none; line-height: 0; }
.inpaint-stage canvas { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.inpaint-mask { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; }
.audio-player { width: 100%; margin-block: var(--space-3); }
.stem-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.stem-list__item { display: grid; gap: var(--space-2); align-items: center; padding: var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-2); }
.stem-list__item audio { width: 100%; }
.stem-list__name { margin: 0; font-weight: 700; }
@media (min-width: 720px) { .stem-list__item { grid-template-columns: 12rem 1fr auto; } }
.translate-langs { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: end; }
.translate-langs .field { margin: 0; }
.translate-langs .btn--icon { margin-bottom: 2px; }

/* 14. Portada: las cuatro secciones, cada una con su color ---------------------- */
.sections-home { padding-top: var(--space-2); }
.section-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
/* Ocho secciones: de dos en dos y, en pantallas grandes, dos filas de cuatro (rejilla de 12
   columnas). Si algún día son impares, la última ocupa todo el ancho en la rejilla de dos. */
@media (min-width: 720px) { .section-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) and (max-width: 1099.98px) { .section-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
  .section-cards { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .section-card { grid-column: span 3; }
}
.section-card {
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5);
  background: var(--c-surface); border: 1px solid var(--c-border); border-top: 4px solid var(--c-section);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.section-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.section-card__icon {
  display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-lg);
  background: var(--c-section); color: #ffffff;
}
.section-card__icon .icon { width: 30px; height: 30px; }
.section-card__title { margin: var(--space-1) 0 0; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); }
.section-card__title a { color: var(--c-text); text-decoration: none; }
.section-card__title a:hover { color: var(--c-accent); }
.section-card__count { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--c-accent); }
.section-card__text { margin: 0; color: var(--c-text-muted); }
.section-card__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.section-card__links a {
  display: inline-block; padding: 0.3rem 0.65rem; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600;
  background: var(--c-accent-soft); color: var(--c-text); text-decoration: none;
}
.section-card__links a:hover { color: var(--c-accent); text-decoration: underline; }
.section-card__cta { margin-top: auto; align-self: flex-start; white-space: normal; text-align: left; }
@media (prefers-reduced-motion: reduce) { .section-card:hover { transform: none; } }

/* 15. Aviso de cookies ----------------------------------------------------------- */
.cookie-banner {
  position: fixed; inset: auto 0 0 0; z-index: 50; background: var(--c-surface);
  border-top: 1px solid var(--c-border-strong); box-shadow: 0 -6px 24px rgb(16 24 40 / 0.14);
  padding-block: var(--space-4);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner { display: grid; gap: var(--space-3); align-items: center; }
.cookie-banner__title { font-size: var(--fs-lg); margin: 0 0 var(--space-1); }
.cookie-banner p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
.cookie-banner a { color: var(--c-accent); font-weight: 600; }
/* «Rechazar» y «Aceptar» con el mismo aspecto: rechazar debe ser tan fácil como aceptar (AEPD). */
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cookie-banner__actions .btn { flex: 1 1 8rem; justify-content: center; }
@media (min-width: 800px) {
  .cookie-banner__inner { grid-template-columns: 1fr auto; gap: var(--space-5); }
  .cookie-banner__actions .btn { flex: 0 0 9rem; }
}

/* 16. Botón de tema: borde fino visible (≥ 3:1 con el fondo) y fondo oscuro translúcido. */
.theme-toggle { border-color: #8391a7; background: rgb(15 23 42 / 0.07); }
.theme-toggle:hover { border-color: #64748b; background: rgb(15 23 42 / 0.12); }
:root[data-theme="dark"] .theme-toggle { border-color: #7d8899; background: rgb(0 0 0 / 0.28); }
:root[data-theme="dark"] .theme-toggle:hover { border-color: #a8b3c2; background: rgb(0 0 0 / 0.4); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle { border-color: #7d8899; background: rgb(0 0 0 / 0.28); }
  :root:not([data-theme="light"]) .theme-toggle:hover { border-color: #a8b3c2; background: rgb(0 0 0 / 0.4); }
}

/* 17. «Tus herramientas más usadas» */
.chip--more { border-style: dashed; color: var(--c-accent); }
.chip--more .icon { color: currentColor; }
.most-used__actions { margin-top: var(--space-5); }
.most-used__about { margin-top: var(--space-7); max-width: var(--container-narrow); }

/* 18. Diálogo de confirmación de descargas grandes (móviles y ahorro de datos) */
.confirm-dialog { max-width: min(30rem, calc(100vw - 2rem)); padding: var(--space-5); border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow-lg); }
.confirm-dialog::backdrop { background: rgb(15 23 42 / 0.55); }
.confirm-dialog__body { display: flex; gap: var(--space-3); align-items: flex-start; }
.confirm-dialog__body > .icon { width: 28px; height: 28px; flex: none; color: var(--c-accent); }
.confirm-dialog__title { font-size: var(--fs-h3); margin: 0 0 var(--space-2); }
.confirm-dialog p { margin: 0; color: var(--c-text-muted); }
.confirm-dialog__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }

/* 19. Portada: título grande con degradado, fondo con los colores de las secciones y demostración */
.hero {
  --hero-blue: #2563eb; --hero-teal: #0f766e; --hero-violet: #7c3aed; --hero-amber: #b45309; --hero-rose: #be123c;
  --hero-glow: 0.09;
  --hero-extend: 0rem; /* cuánto continúa la luz por debajo de la portada */
  /* Sin isolation: así el desplegable del buscador (z-index 60) queda por encima de las tarjetas de
     secciones, y la luz (z-index -1) sigue por debajo de todo, sobre el fondo del body. */
  position: relative; overflow: hidden;
}
/* Las luces se colocan respecto a la altura de la portada (100% - --hero-extend), así conservan
   su tamaño y su sitio aunque la capa se alargue por debajo. */
.hero::before {
  content: ""; position: absolute; inset: 0 0 calc(-1 * var(--hero-extend)); z-index: -1; pointer-events: none;
  --h: calc(100% - var(--hero-extend));
  background:
    radial-gradient(38rem 26rem at 8% 0%, rgb(59 130 246 / var(--hero-glow)), transparent 70%),
    radial-gradient(30rem 22rem at 55% calc(var(--h) * 0.1), rgb(20 184 166 / var(--hero-glow)), transparent 70%),
    radial-gradient(34rem 24rem at 95% calc(var(--h) * 0.35), rgb(167 139 250 / var(--hero-glow)), transparent 70%),
    radial-gradient(30rem 20rem at 70% var(--h), rgb(245 158 11 / calc(var(--hero-glow) * 0.8)), transparent 70%),
    radial-gradient(28rem 20rem at 20% var(--h), rgb(244 63 94 / calc(var(--hero-glow) * 0.7)), transparent 70%);
}
/* Donde se puede recortar solo en horizontal, la luz naranja del borde inferior no se corta: sigue
   por debajo de la portada (la luz se apaga antes de 16rem) y se ve en los huecos entre las
   tarjetas de secciones, que van en una capa superior. */
@supports (overflow: clip) {
  .hero { overflow: visible; overflow-x: clip; --hero-extend: 16rem; }
}
.sections-home { position: relative; z-index: 1; }
:root[data-theme="dark"] .hero { --hero-blue: #60a5fa; --hero-teal: #2dd4bf; --hero-violet: #a78bfa; --hero-amber: #f59e0b; --hero-rose: #fb7185; --hero-glow: 0.14; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero { --hero-blue: #60a5fa; --hero-teal: #2dd4bf; --hero-violet: #a78bfa; --hero-amber: #f59e0b; --hero-rose: #fb7185; --hero-glow: 0.14; }
}
.hero__grid { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-7); } }
.hero__title {
  max-width: 16ch; font-size: clamp(2.25rem, 1.55rem + 3.1vw, 3.75rem); line-height: 1.05;
  letter-spacing: -0.03em; font-weight: 800; margin-bottom: var(--space-4);
}
.hero__accent { display: block; color: var(--hero-teal); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__accent {
    background: linear-gradient(90deg, var(--hero-blue), var(--hero-teal) 30%, var(--hero-violet) 55%, var(--hero-amber) 80%, var(--hero-rose));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    /* El degradado solo se pinta dentro de la caja de la línea: con el interlineado ajustado del
       titular, los rasgos que bajan (g, j, p, y) se cortaban. Se amplía la caja sin mover nada. */
    padding-bottom: 0.3em; margin-bottom: -0.3em;
  }
}

/* Demostración animada */
.hero-demo {
  position: relative; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-5); display: grid; gap: var(--space-4);
}
.hero-demo__scene { margin: 0; display: grid; gap: var(--space-4); }
.hero-demo__scene[hidden] { display: none; }
.hero-demo figcaption { display: grid; gap: var(--space-2); justify-items: start; }
.hero-demo__title { margin: 0; font-size: var(--fs-lg); font-weight: 750; }
.hero-demo__text { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.demo-art {
  height: 12rem; border-radius: var(--radius); background: var(--c-surface-2); border: 1px solid var(--c-border);
  display: grid; place-items: center; overflow: hidden;
}
.hero-demo__controls { display: flex; align-items: center; gap: var(--space-3); }
.hero-demo__controls[hidden] { display: none; }
.hero-demo__pause .icon--play, .hero-demo.is-paused .hero-demo__pause .icon--pause { display: none; }
.hero-demo.is-paused .hero-demo__pause .icon--play { display: block; }
.hero-demo__dots { display: flex; gap: var(--space-1); }
.hero-demo__dot { width: 44px; height: 44px; border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: pointer; }
.hero-demo__dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-border-strong); transition: width var(--transition), background var(--transition); }
.hero-demo__dot[aria-pressed="true"]::before { width: 26px; border-radius: 999px; background: var(--c-accent); }
.hero-demo__dot:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -6px; border-radius: var(--radius-sm); }

/* Escena 1: quitar el fondo (el fondo se desvanece y aparece la cuadrícula de transparencia) */
.demo-cutout {
  position: relative; width: 11rem; height: 9rem; border-radius: var(--radius);
  background-color: var(--c-checker-a);
  background-image: conic-gradient(var(--c-checker-b) 25%, transparent 0 50%, var(--c-checker-b) 0 75%, transparent 0);
  background-size: 16px 16px; overflow: hidden;
}
.demo-cutout__bg { position: absolute; inset: 0; background: linear-gradient(160deg, #7dd3fc, #34d399 60%, #15803d); }
.demo-cutout__subject { position: absolute; inset: 0; width: 100%; height: 100%; fill: #b45309; }
.is-active .demo-cutout__bg { animation: demo-fade-out 6s ease-in-out both; }
.is-active .demo-cutout__subject { animation: demo-pop 6s ease-in-out both; }

/* Escena 2: comprimir PDF (el tamaño baja y la barra se llena) */
.demo-pdf { display: grid; justify-items: center; gap: var(--space-2); width: 12rem; }
.demo-pdf__doc { width: 3.6rem; height: 4.5rem; fill: var(--c-surface); stroke: #dc2626; stroke-width: 3; }
.demo-pdf__doc .demo-pdf__fold { fill: none; }
.demo-pdf__doc text { fill: #dc2626; stroke: none; font: 800 15px var(--font-sans); }
.demo-pdf__sizes { position: relative; height: 1.6rem; width: 100%; text-align: center; font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.demo-pdf__sizes span { position: absolute; inset: 0; }
.demo-pdf__after { color: #15803d; opacity: 0; }
.demo-pdf__bar { width: 100%; height: 8px; border-radius: 999px; background: var(--c-border); overflow: hidden; }
.demo-pdf__bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #3b82f6, #14b8a6); transform-origin: left; transform: scaleX(0); }
.is-active .demo-pdf__bar span { animation: demo-grow 6s ease-in-out both; }
.is-active .demo-pdf__before { animation: demo-fade-out 6s ease-in-out both; }
.is-active .demo-pdf__after { animation: demo-fade-in 6s ease-in-out both; }

/* Escena 3: transcribir (las barras de la onda se mueven y aparece el texto) */
.demo-voice { display: grid; gap: var(--space-3); justify-items: center; padding-inline: var(--space-4); }
.demo-voice__wave { display: flex; align-items: center; gap: 4px; height: 4rem; }
.demo-voice__wave span { width: 6px; height: 30%; border-radius: 3px; background: #7c3aed; }
.demo-voice__wave span:nth-child(3n) { height: 70%; }
.demo-voice__wave span:nth-child(4n + 1) { height: 50%; }
.demo-voice__wave span:nth-child(5n + 2) { height: 90%; }
.demo-voice__text { margin: 0; font-size: var(--fs-sm); font-weight: 600; text-align: center; clip-path: inset(0 100% 0 0); }
.is-active .demo-voice__wave span { animation: demo-wave 0.9s ease-in-out infinite alternate; }
.is-active .demo-voice__wave span:nth-child(2n) { animation-delay: -0.3s; }
.is-active .demo-voice__wave span:nth-child(3n) { animation-delay: -0.6s; }
.is-active .demo-voice__text { animation: demo-type 6s steps(28, end) both; }

/* Escena 4: HEIC a JPG (el archivo cambia de extensión) */
.demo-heic { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: center; padding: var(--space-3); }
.demo-heic__file { padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); background: var(--c-surface); border: 1px solid var(--c-border-strong); font-family: var(--font-mono); font-size: var(--fs-sm); }
.demo-heic__file b { color: #b45309; }
.demo-heic__file--to b { color: #15803d; }
.demo-heic__arrow { width: 22px; height: 22px; color: var(--c-text-muted); }
.is-active .demo-heic__file--from { animation: demo-fade-half 6s ease-in-out both; }
.is-active .demo-heic__file--to { animation: demo-slide-in 6s ease-in-out both; }

@keyframes demo-fade-out { 0%, 30% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes demo-fade-in { 0%, 30% { opacity: 0; } 55%, 100% { opacity: 1; } }
@keyframes demo-fade-half { 0%, 35% { opacity: 1; } 60%, 100% { opacity: 0.45; } }
@keyframes demo-pop { 0%, 40% { transform: scale(1); } 55% { transform: scale(1.06); } 70%, 100% { transform: scale(1); } }
@keyframes demo-grow { 0%, 15% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); } }
@keyframes demo-wave { from { transform: scaleY(0.4); } to { transform: scaleY(1); } }
@keyframes demo-type { 0%, 25% { clip-path: inset(0 100% 0 0); } 80%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes demo-slide-in { 0%, 30% { opacity: 0; transform: translateX(-12px); } 55%, 100% { opacity: 1; transform: none; } }
.hero-demo.is-paused .is-active * { animation-play-state: paused; }

/* Con «reducir movimiento», la demostración sigue animada pero solo con fundidos: nada se mueve,
   crece ni se escribe letra a letra; cada cambio aparece o desaparece suavemente. */
@media (prefers-reduced-motion: reduce) {
  .is-active .demo-cutout__subject { animation: none; }
  .demo-pdf__bar span { transform: none; }
  .is-active .demo-pdf__bar span { animation: demo-fade-in 6s ease-in-out both; }
  .is-active .demo-voice__wave span { animation: demo-pulse 1.4s ease-in-out infinite alternate; }
  .demo-voice__text { clip-path: none; }
  .is-active .demo-voice__text { animation: demo-fade-in 6s ease-in-out both; }
  .is-active .demo-heic__file--to { animation: demo-fade-in 6s ease-in-out both; }
}
@keyframes demo-pulse { from { opacity: 0.35; } to { opacity: 1; } }

/* 20. Herramientas de la sexta tanda */
.tool-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.tool-divider::before, .tool-divider::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }
.qr-camera { position: relative; margin-top: var(--space-3); border-radius: var(--radius); overflow: hidden; background: #000; max-width: 32rem; }
.qr-camera[hidden] { display: none; }
.qr-camera video { display: block; width: 100%; height: auto; }
.qr-camera__frame { position: absolute; inset: 18%; border: 3px solid rgb(255 255 255 / 0.85); border-radius: var(--radius); box-shadow: 0 0 0 999px rgb(0 0 0 / 0.25); }
.qr-camera__stop { position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%); }
.stats--wide { grid-template-columns: 1fr; }
.qr-value { overflow-wrap: anywhere; white-space: pre-wrap; }
.result__title--bad { color: var(--c-danger-text); }
.result__title--warn { color: var(--c-warn-text); }
.signal-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.signal { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius); border: 1px solid; }
.signal .icon { flex: none; margin-top: 0.15em; }
.signal--ok { background: var(--c-success-bg); border-color: var(--c-success-border); color: var(--c-success-text); }
.signal--warn { background: var(--c-warn-bg); border-color: var(--c-warn-border); color: var(--c-warn-text); }
.signal--bad { background: var(--c-danger-bg); border-color: var(--c-danger-border); color: var(--c-danger-text); }
.hop-list { margin: 0; padding-left: 1.4rem; display: grid; gap: var(--space-2); }
.hop__main { margin: 0; font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.hop__meta { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
.regex-input__row { display: flex; align-items: center; gap: var(--space-1); }
.regex-input__row .input { flex: 1; min-width: 0; }
.regex-input__row .regex-input__flags { flex: 0 0 5.5rem; }
.regex-input__slash { font-family: var(--font-mono); font-size: 1.4rem; color: var(--c-text-muted); }
.regex-out { margin-top: var(--space-4); }
.regex-out__title { font-size: var(--fs-h3); }
.regex-highlight { margin: 0 0 var(--space-4); padding: var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-2); white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--fs-sm); max-height: 22rem; overflow: auto; }
.regex-mark { background: #fde68a; color: #1f2937; border-radius: 3px; padding: 0 1px; }
.regex-mark--alt { background: #bfdbfe; }
.regex-table td { vertical-align: top; overflow-wrap: anywhere; }
.regex-explain { padding-left: 1.4rem; display: grid; gap: var(--space-1); }
.regex-explain__item code { font-weight: 700; }
.regex-explain__item[data-depth="1"] { margin-left: 1rem; }
.regex-explain__item[data-depth="2"] { margin-left: 2rem; }
.regex-explain__item[data-depth="3"], .regex-explain__item[data-depth="4"] { margin-left: 3rem; }
.unix-now { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--c-text-muted); }
.stat__note { display: block; font-weight: 400; margin: var(--space-1) 0 0; font-size: 0.8rem; color: var(--c-text-muted); }
.palette { list-style: none; margin: var(--space-3) 0; padding: 0; display: grid; gap: var(--space-2); }
.palette__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.palette__chip { display: inline-grid; place-items: center; min-width: 5.5rem; height: 2.5rem; border-radius: var(--radius-sm); border: 1px solid var(--c-border); background: var(--swatch); color: var(--swatch-text); font-weight: 700; font-size: var(--fs-sm); }
.recorder { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-3); text-align: center; }
.recorder__time { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 750; margin: 0; font-variant-numeric: tabular-nums; }
.recorder .level-meter { width: min(100%, 24rem); height: 12px; border-radius: 999px; background: var(--c-surface-2); border: 1px solid var(--c-border); overflow: hidden; }
.recorder .level-meter span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #16a34a, #eab308 70%, #dc2626); transform-origin: left; transform: scaleX(var(--level, 0)); transition: transform 80ms linear; }
.recorder__actions { justify-content: center; }
.btn--lg { min-height: 52px; padding-inline: 1.4rem; font-size: var(--fs-lg); }
.pdf-form { display: grid; gap: var(--space-2) var(--space-4); margin-block: var(--space-4); }
@media (min-width: 720px) { .pdf-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pdf-form .field { margin: 0; }
.pdf-form__check small { color: var(--c-text-muted); }
.image-grid { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.image-grid__item { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-2); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-2); }
.image-grid__item img, .image-grid__placeholder { width: 100%; height: 8rem; object-fit: contain; background: var(--c-surface); border-radius: var(--radius-sm); }
.image-grid__placeholder { display: grid; place-items: center; color: var(--c-text-muted); font-size: var(--fs-sm); }
.image-grid__meta { margin: 0; font-size: 0.8rem; color: var(--c-text-muted); }
.compare-slot__title { font-size: var(--fs-lg); margin: 0 0 var(--space-2); }
.compare-slot__file { margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--c-text-muted); overflow-wrap: anywhere; }

/* Página «Instalar como aplicación» */
.install-quick { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-4); margin-block: var(--space-4); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.install-quick p { margin: 0; }
.install-device { padding: var(--space-1) var(--space-4); margin-block: var(--space-4); border: 1px solid transparent; border-radius: var(--radius); }
.install-device.is-current { border-color: var(--c-accent); background: var(--c-surface); }
.install-device__mine { display: inline-block; margin: 0 0 var(--space-2); padding: 0.1rem 0.6rem; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; color: var(--c-surface); background: var(--c-accent); }

/* 21. Herramientas de la séptima tanda */
@media (min-width: 720px) { .tool-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.quality-badge { display: inline-block; padding: 0.05rem 0.5rem; border: 1px solid; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; }
.quality-badge--good { background: var(--c-success-bg); border-color: var(--c-success-border); color: var(--c-success-text); }
.quality-badge--warn { background: var(--c-warn-bg); border-color: var(--c-warn-border); color: var(--c-warn-text); }
.quality-badge--bad { background: var(--c-danger-bg); border-color: var(--c-danger-border); color: var(--c-danger-text); }
.panel-title + .tool-grid { margin-top: var(--space-3); }
.result + .panel-title { margin-top: var(--space-6); }
.check-list { display: grid; gap: var(--space-2); }
/* Escribir sobre un PDF */
.write-stage canvas { cursor: crosshair; }
.write-item { position: absolute; cursor: move; touch-action: none; line-height: 0; outline: 1px dashed rgb(10 106 112 / 0.6); outline-offset: 1px; }
.write-item:focus-visible { outline: 3px solid var(--c-focus); }
.write-item--text { line-height: 1.2; white-space: pre; font-family: Helvetica, Arial, "Liberation Sans", sans-serif; }
.write-item img { display: block; width: 100%; height: 100%; pointer-events: none; }
.write-item svg { display: block; pointer-events: none; }
/* Cambio de tema: el icono nuevo entra girando, igual de claro a oscuro que de oscuro a claro. */
.theme-toggle.is-switching .icon { animation: theme-icon-in 380ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes theme-icon-in { from { opacity: 0; transform: rotate(-90deg) scale(0.5); } to { opacity: 1; transform: none; } }

/* 22. Ilustraciones de guías y rutas (SVG generado al compilar; colores del tema) */
.fig-figure { margin: var(--space-6) 0; }
.fig-figure .fig { display: block; width: 100%; height: auto; font-family: inherit; }
/* En pantallas estrechas, la ilustración conserva un tamaño legible y se desplaza en horizontal. */
.fig-scroll {
  overflow-x: auto; border-radius: 18px; padding: 5px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-section, var(--c-accent)) 35%, transparent), transparent 45%, color-mix(in srgb, var(--c-accent) 25%, transparent));
  box-shadow: 0 12px 32px -18px color-mix(in srgb, var(--c-accent) 55%, transparent), var(--shadow-sm);
  transition: box-shadow 0.3s ease, translate 0.3s var(--ease-out, ease);
}
.fig-scroll:hover { box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--c-accent) 70%, transparent), var(--shadow); translate: 0 calc(var(--lift, -4px) / 2); }
.fig-scroll:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.fig-figure .fig--narrow { max-width: 348px; margin-inline: auto; }
@media (max-width: 599px) { .fig-figure .fig:not(.fig--narrow) { min-width: 520px; } }
.fig-figure figcaption {
  display: flex; gap: var(--space-2); align-items: baseline; justify-content: center;
  margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--c-text-muted); text-align: center;
}
.fig-figure figcaption::before {
  content: ""; flex: none; width: 0.55em; height: 0.55em; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-section, var(--c-accent)), var(--c-accent));
}
/* Fondo: degradado y dos luces difusas que respiran (sin trama: el contenido se lee mejor). */
.fig-bg-a { stop-color: var(--c-surface); }
.fig-bg-b { stop-color: color-mix(in srgb, var(--c-accent-soft) 55%, var(--c-surface-2)); }
.fig-glow-a { stop-color: var(--c-section, var(--c-accent)); stop-opacity: 0.22; }
.fig-glow-b { stop-color: var(--c-section, var(--c-accent)); stop-opacity: 0; }
.fig-glow { animation: fig-breathe 6s ease-in-out infinite alternate; }
.fig-glow--2 { animation-delay: -3s; }
@keyframes fig-breathe { from { opacity: 0.55; } to { opacity: 1; } }
.fig-frame { fill: none; stroke: var(--c-border); }
/* Degradados de acento, tarjetas, barra de ventana y teclas. */
.fig-ac-a { stop-color: var(--c-accent); }
.fig-ac-b { stop-color: var(--c-accent-hover); }
.fig-cardg-a { stop-color: var(--c-surface); }
.fig-cardg-b { stop-color: color-mix(in srgb, var(--c-surface-2) 55%, var(--c-surface)); }
.fig-barg-a { stop-color: var(--c-surface); }
.fig-barg-b { stop-color: var(--c-surface-2); }
.fig-keyg-a { stop-color: var(--c-surface); }
.fig-keyg-b { stop-color: var(--c-surface-2); }
/* Etiqueta del tipo de ilustración. */
.fig-badge { fill: var(--c-accent-soft); stroke: color-mix(in srgb, var(--c-accent) 35%, transparent); }
.fig-badge-icon { fill: none; stroke: var(--c-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fig-badge-text { fill: var(--c-accent); font-weight: 750; letter-spacing: 0.06em; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fig-badge-text { fill: var(--c-text); } }
:root[data-theme="dark"] .fig-badge-text { fill: var(--c-text); }
.fig-card, .fig-row { stroke: var(--c-border); filter: drop-shadow(0 2px 3px rgb(16 24 40 / 0.07)) drop-shadow(0 6px 12px rgb(16 24 40 / 0.05)); }
.fig-row { fill: var(--c-surface); }
.fig-card--hl, .fig-row--hl { stroke: var(--c-accent); stroke-width: 2; }
.fig-row--hl { fill: var(--c-accent-soft); }
.fig-halo { fill: none; stroke: var(--c-accent); stroke-width: 6; opacity: 0.18; animation: fig-halo 2.4s ease-in-out infinite alternate; }
@keyframes fig-halo { from { opacity: 0.08; } to { opacity: 0.32; } }
.fig-ring { fill: none; stroke: color-mix(in srgb, var(--c-accent) 25%, transparent); stroke-width: 3; }
.fig-icon-bg { fill: var(--c-accent-soft); }
.fig-icon-bg--hl { stroke: var(--c-accent); stroke-width: 1.5; }
.fig-window { fill: var(--c-bg); stroke: var(--c-border-strong); filter: drop-shadow(0 10px 18px rgb(16 24 40 / 0.12)); }
.fig-notch { fill: var(--c-text); opacity: 0.85; }
.fig-sep { fill: none; stroke: var(--c-border); }
.fig-shine { fill: none; stroke: rgb(255 255 255 / 0.45); stroke-width: 1.5; stroke-linecap: round; }
.fig-title, .fig-text { fill: var(--c-text); }
.fig-title { font-weight: 750; }
.fig-strong { font-weight: 700; }
.fig-muted { fill: var(--c-text-muted); }
.fig-muted-fill { fill: var(--c-border-strong); }
.fig-accent { fill: var(--c-accent); }
.fig-on-accent { fill: var(--c-on-accent); }
.fig-icon { fill: none; stroke: var(--c-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fig-arrow { fill: none; stroke: var(--c-text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fig-arrow--soft { stroke: color-mix(in srgb, var(--c-text-muted) 60%, transparent); stroke-dasharray: 3 4; }
/* Trazo que recorre las flechas: con «reducir movimiento» se queda quieto. */
.fig-flowline { fill: none; stroke: var(--c-accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 9; animation: fig-flow 1.2s linear infinite; }
@keyframes fig-flow { to { stroke-dashoffset: -12; } }
.fig-dot { fill: var(--c-accent); opacity: 0.7; }
.fig-ok-bg { fill: var(--c-success-bg); stroke: var(--c-success-border); }
.fig-ok-mark { fill: none; stroke: var(--c-success-text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fig-bad-bg { fill: var(--c-danger-bg); stroke: var(--c-danger-border); }
.fig-bad-mark { fill: none; stroke: var(--c-danger-text); stroke-width: 2.4; stroke-linecap: round; }
.fig-check { stroke: var(--c-border); fill: var(--c-surface); }
.fig-check--ok { fill: color-mix(in srgb, var(--c-success-bg) 55%, var(--c-surface)); }
.fig-check--bad { fill: color-mix(in srgb, var(--c-danger-bg) 55%, var(--c-surface)); }
.fig-check-bar--ok { fill: var(--c-success-border); }
.fig-check-bar--bad { fill: var(--c-danger-border); }
.fig-check-bar--neutral { fill: var(--c-accent); opacity: 0.6; }
.fig-track { fill: color-mix(in srgb, var(--c-border) 55%, transparent); }
.fig-bar { fill: color-mix(in srgb, var(--c-text-muted) 55%, var(--c-surface)); }
.fig-toggle-off { fill: var(--c-border-strong); }
.fig-knob { fill: #fff; filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.3)); }
.fig-pointer { fill: var(--c-text); stroke: var(--c-surface); stroke-width: 1.5; stroke-linejoin: round; }
.fig-ripple { fill: var(--c-accent); opacity: 0; transform-box: fill-box; transform-origin: center; animation: fig-ripple 2.2s ease-out infinite; }
@keyframes fig-ripple { 0% { opacity: 0.45; scale: calc(1 - 0.5 * var(--fig-m, 1)); } 70%, 100% { opacity: 0; scale: calc(1 + 0.5 * var(--fig-m, 1)); } }
.fig-key { fill: var(--c-border-strong); }
.fig-key-top { stroke: var(--c-border); }
.fig-plus { fill: var(--c-surface); stroke: var(--c-border); }
.fig-layer { stroke: var(--c-border); }
.fig-layer-edge { fill: var(--c-border-strong); opacity: 0.6; }
.fig-layer--0 { fill: var(--c-surface); }
.fig-layer--1 { fill: color-mix(in srgb, var(--c-accent-soft) 70%, var(--c-surface)); }
.fig-layer--2 { fill: var(--c-surface-2); }
.fig-layer--hl { fill: var(--c-accent-soft); stroke: var(--c-accent); stroke-width: 2; }
.fig-layer-tab { opacity: 0.45; }
.fig-layer-tab--hl { opacity: 1; }
.fig-term { fill: #0f172a; stroke: #334155; filter: drop-shadow(0 10px 18px rgb(2 6 23 / 0.28)); }
.fig-term-bar { fill: #1e293b; }
.fig-term-text { fill: #e2e8f0; }
.fig-term-muted { fill: #94a3b8; }
.fig-term-prompt { fill: #5ccac5; }
/* Cursor que parpadea unas veces (no indefinidamente) y se queda visible. */
.fig-cursor { fill: #5ccac5; animation: fig-blink 1s steps(1) 5; }
@keyframes fig-blink { 50% { opacity: 0; } }
/* Sin aparición gradual: las ilustraciones se ven con opacidad completa desde el principio. */
@media (prefers-reduced-motion: reduce) {
  :root { --fig-m: 0; }
  .fig-flowline { animation: none; }
}

/* 23. Categorías de herramientas: una tarjeta y un color por categoría */
[data-cat="imagenes"] { --cat: #be185d; --cat-soft: #fce7f3; }
[data-cat="pdf"] { --cat: #b91c1c; --cat-soft: #fee2e2; }
[data-cat="texto"] { --cat: #6d28d9; --cat-soft: #ede9fe; }
[data-cat="calculadoras"] { --cat: #1d4ed8; --cat-soft: #dbeafe; }
[data-cat="diagnostico"] { --cat: #0e7490; --cat-soft: #cffafe; }
[data-cat="multimedia"] { --cat: #c2410c; --cat-soft: #ffedd5; }
[data-cat="seguridad"] { --cat: #15803d; --cat-soft: #dcfce7; }
[data-cat="habilidad"] { --cat: #a16207; --cat-soft: #fef9c3; }
:root[data-theme="dark"] [data-cat="imagenes"] { --cat: #f472b6; --cat-soft: rgb(244 114 182 / 0.14); }
:root[data-theme="dark"] [data-cat="pdf"] { --cat: #f87171; --cat-soft: rgb(248 113 113 / 0.14); }
:root[data-theme="dark"] [data-cat="texto"] { --cat: #a78bfa; --cat-soft: rgb(167 139 250 / 0.14); }
:root[data-theme="dark"] [data-cat="calculadoras"] { --cat: #60a5fa; --cat-soft: rgb(96 165 250 / 0.14); }
:root[data-theme="dark"] [data-cat="diagnostico"] { --cat: #22d3ee; --cat-soft: rgb(34 211 238 / 0.14); }
:root[data-theme="dark"] [data-cat="multimedia"] { --cat: #fb923c; --cat-soft: rgb(251 146 60 / 0.14); }
:root[data-theme="dark"] [data-cat="seguridad"] { --cat: #4ade80; --cat-soft: rgb(74 222 128 / 0.14); }
:root[data-theme="dark"] [data-cat="habilidad"] { --cat: #facc15; --cat-soft: rgb(250 204 21 / 0.14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-cat="imagenes"] { --cat: #f472b6; --cat-soft: rgb(244 114 182 / 0.14); }
  :root:not([data-theme="light"]) [data-cat="pdf"] { --cat: #f87171; --cat-soft: rgb(248 113 113 / 0.14); }
  :root:not([data-theme="light"]) [data-cat="texto"] { --cat: #a78bfa; --cat-soft: rgb(167 139 250 / 0.14); }
  :root:not([data-theme="light"]) [data-cat="calculadoras"] { --cat: #60a5fa; --cat-soft: rgb(96 165 250 / 0.14); }
  :root:not([data-theme="light"]) [data-cat="diagnostico"] { --cat: #22d3ee; --cat-soft: rgb(34 211 238 / 0.14); }
  :root:not([data-theme="light"]) [data-cat="multimedia"] { --cat: #fb923c; --cat-soft: rgb(251 146 60 / 0.14); }
  :root:not([data-theme="light"]) [data-cat="seguridad"] { --cat: #4ade80; --cat-soft: rgb(74 222 128 / 0.14); }
  :root:not([data-theme="light"]) [data-cat="habilidad"] { --cat: #facc15; --cat-soft: rgb(250 204 21 / 0.14); }
}
.tool-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .tool-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tool-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tool-cat {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5);
  background: var(--c-surface); border: 1px solid var(--c-border); border-top: 4px solid var(--cat);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition);
}
.tool-cat:hover, .tool-cat:focus-within { box-shadow: var(--shadow); transform: translateY(-2px); }
.tool-cat:target { outline: 3px solid var(--cat); outline-offset: 3px; }
.tool-cat__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--cat-soft); color: var(--cat); }
.tool-cat__icon .icon { width: 28px; height: 28px; }
.tool-cat__title { margin: var(--space-1) 0 0; font-size: 1.375rem; }
.tool-cat__title a { color: var(--c-text); text-decoration: none; }
.tool-cat__title a:hover { color: var(--cat); }
.tool-cat__count { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--cat); }
.tool-cat__text { margin: 0; color: var(--c-text-muted); }
.tool-cat__examples { margin: auto 0 0; padding: var(--space-2) 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.tool-cat__examples li { padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--cat-soft); font-size: var(--fs-sm); }
.tool-cats__more { margin-top: var(--space-5); text-align: center; }
.tool-cat-hero { display: flex; gap: var(--space-4); align-items: flex-start; }
.tool-cat-hero .tool-cat__icon { flex: none; width: 64px; height: 64px; }
[data-cat] .card-grid--tools .card__icon { background: var(--cat-soft); color: var(--cat); }
.tool-cat-nav { margin-top: var(--space-7); }
.tool-cat-nav ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tool-cat-nav a { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--c-border); border-left: 4px solid var(--cat); border-radius: var(--radius); color: var(--c-text); text-decoration: none; font-weight: 600; background: var(--c-surface); }
.tool-cat-nav a:hover { border-color: var(--cat); }
.tool-cat-nav .icon { color: var(--cat); }
@media (prefers-reduced-motion: reduce) { .tool-cat:hover, .tool-cat:focus-within { transform: none; } }

/* 24. Habilidad y reflejos: mecanografía, puntería, memoria y lectura */
.typing-box { display: grid; gap: var(--space-3); }
.typing-words {
  margin: 0; height: calc(3 * 2.2em + 2 * var(--space-3)); overflow: hidden; padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 2.2; color: var(--c-text-muted); background: var(--c-surface-2); border: 1px solid var(--c-border);
  border-radius: var(--radius); cursor: text; user-select: none; -webkit-user-select: none; scroll-behavior: auto;
}
.tw { border-radius: 4px; padding: 0.05em 0.1em; }
.tw.is-current { color: var(--c-text); background: var(--c-accent-soft); }
.tw.is-ok { color: var(--c-success-text); }
.tw.is-bad { color: var(--c-danger-text); text-decoration: underline wavy; text-underline-offset: 0.2em; }
.tl--ok { color: var(--c-success-text); }
.tl--bad { color: var(--c-danger-text); background: var(--c-danger-bg); border-radius: 2px; }
.tl--extra { color: var(--c-danger-text); text-decoration: line-through; }
.typing-input {
  width: 100%; min-height: 52px; padding: var(--space-2) var(--space-4); font-size: var(--fs-lg);
  font-family: var(--font-mono);
  border: 1px solid var(--c-border-strong); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text);
}
.typing-input:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 0; border-color: var(--c-accent); }
.typing-next { margin: var(--space-3) 0 var(--space-2); font-weight: 600; min-height: 1.5em; }
.kb { --kb-gap: clamp(3px, 1vw, 6px); display: grid; gap: var(--kb-gap); justify-content: center; user-select: none; -webkit-user-select: none; }
.kb-row { display: flex; gap: var(--kb-gap); justify-content: center; }
.kb-row:nth-child(2) { margin-left: clamp(0.6rem, 2.5vw, 1.2rem); }
.kb-row:nth-child(3) { margin-left: clamp(1.4rem, 6vw, 2.6rem); }
.kb-key {
  display: grid; place-items: center; width: clamp(1.3rem, 6vw, 2.6rem); height: clamp(1.9rem, 8vw, 2.6rem);
  border: 1px solid var(--c-border); border-bottom-width: 3px; border-radius: 6px; background: var(--c-surface);
  color: var(--c-text-muted); font-weight: 700; font-size: var(--fs-sm); opacity: 0.45;
}
.kb-key.is-active { opacity: 1; color: var(--c-text); }
.kb-key--home { text-decoration: underline; text-underline-offset: 0.25em; }
.kb-key--space { width: min(18rem, 60vw); }
.kb-key.is-next { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); opacity: 1; }
.kb.is-wrong .kb-key.is-next { background: var(--c-danger-border); border-color: var(--c-danger-border); }
.aim-area {
  position: relative; display: grid; place-items: center; height: clamp(18rem, 55vh, 28rem); overflow: hidden;
  border: 2px dashed var(--c-border-strong); border-radius: var(--radius-lg); background: var(--c-surface-2);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.aim-area.is-running { border-style: solid; border-color: var(--c-accent); cursor: crosshair; }
.aim-start[hidden] { display: none; }
.aim-target {
  position: absolute; padding: 0; border: 0; border-radius: 50%; cursor: crosshair;
  background: radial-gradient(circle, #fff 0 18%, #d1242f 19% 42%, #fff 43% 62%, #d1242f 63%);
  box-shadow: 0 0 0 2px #7f1d1d;
}
.aim-target:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.aim-target[hidden] { display: none; }
.memory-phase { min-height: 1.5em; margin: 0 0 var(--space-3); font-weight: 600; text-align: center; }
.memory-grid + .actions { justify-content: center; }
.memory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); width: min(100%, 22rem); margin: 0 auto var(--space-4); }
.memory-cell {
  aspect-ratio: 1; border: 2px solid var(--c-border-strong); border-radius: var(--radius); background: var(--c-surface-2);
  cursor: pointer; transition: background 120ms ease, transform 120ms ease; touch-action: manipulation;
}
.memory-cell:disabled { cursor: default; }
.memory-cell:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.memory-cell.is-lit { background: var(--c-accent); border-color: var(--c-accent); transform: scale(0.96); }
.memory-cell.is-wrong { background: var(--c-danger-border); border-color: var(--c-danger-border); }
.reading-text { padding: var(--space-5); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); max-width: 42rem; margin: 0 auto var(--space-4); }
.reading-text:focus { outline: none; }
.reading-text__title { margin-top: 0; }
.reading-q { margin-bottom: var(--space-4); }
.reading-q legend { font-weight: 700; margin-bottom: var(--space-2); }
.reading-q .check { font-weight: 400; margin-top: var(--space-2); }
@media (prefers-reduced-motion: reduce) { .memory-cell { transition: none; } .memory-cell.is-lit { transform: none; } }
/* Test de mecanografía sobre texto: se escribe encima del texto, sin barra visible */
.typing-progress { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-2); font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-muted); }
.typing-progress progress { flex: 1; height: 0.6rem; accent-color: var(--c-accent); }
.typing-text-box { position: relative; border: 2px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-2); cursor: text; }
.typing-text-box.is-active { border-color: var(--c-accent); }
.typing-text {
  /* Sin relleno propio: la zona que se desplaza mide exactamente 4 líneas y nunca muestra medias líneas. */
  margin: var(--space-4) var(--space-5); height: calc(4 * 1.9em); overflow: hidden; padding: 0;
  font-family: var(--font-mono); font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); line-height: 1.9;
  color: var(--c-text-muted); white-space: pre-wrap; overflow-wrap: break-word; user-select: none; -webkit-user-select: none;
}
.tc.is-ok { color: var(--c-success-text); }
.tc.is-bad { color: var(--c-danger-text); background: var(--c-danger-bg); border-radius: 2px; }
.tc.is-caret { color: var(--c-text); box-shadow: inset 0 -3px 0 var(--c-accent); }
.typing-text-box.is-active .tc.is-caret { animation: typing-caret 1s steps(1) infinite; }
@keyframes typing-caret { 50% { box-shadow: inset 0 -3px 0 transparent; } }
.typing-overlay {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: var(--space-4); text-align: center;
  font-weight: 700; font-size: var(--fs-lg); color: var(--c-text); background: color-mix(in srgb, var(--c-surface) 82%, transparent);
  border-radius: var(--radius); pointer-events: none;
}
.typing-overlay[hidden] { display: none; }
/* El campo que recibe las pulsaciones no se ve, pero puede tener el foco (y abre el teclado del móvil). */
.typing-capture { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: 16px; caret-color: transparent; }
.typing-actions { justify-content: center; margin-top: var(--space-4); }
.typing-actions [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .typing-text-box.is-active .tc.is-caret { animation: none; } }

/* 25. Recursos: diccionario, códigos de error, comandos y atajos */
.list-filter { max-width: 34rem; margin-bottom: var(--space-5); display: grid; gap: var(--space-2); }
.list-filter .field__hint:empty { display: none; }
.res-group { margin-block: var(--space-6); }
.res-group__title { font-size: var(--fs-h3); margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 2px solid var(--c-accent-soft); }
.res-group__intro { margin: 0 0 var(--space-3); color: var(--c-text-muted); max-width: 70ch; }
.res-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
@media (min-width: 800px) { .res-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.res-item { padding: var(--space-3) var(--space-4); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.res-item__title { font-weight: 700; overflow-wrap: anywhere; }
.res-item__title code { font-weight: 700; }
.res-item__text { margin: var(--space-1) 0 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
.res-item__meta { margin: var(--space-1) 0 0; font-size: var(--fs-sm); }
.err-code { display: block; font-family: var(--font-mono); font-size: 0.55em; color: var(--c-accent); letter-spacing: 0.02em; }
.article__header h1 code { font-size: 0.85em; overflow-wrap: anywhere; }
.cmd-facts { display: grid; gap: var(--space-2); margin: 0 0 var(--space-5); padding: var(--space-4); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-2); }
.cmd-facts div { display: grid; gap: var(--space-1); }
@media (min-width: 640px) { .cmd-facts div { grid-template-columns: 11rem minmax(0, 1fr); } }
.cmd-facts dt { font-weight: 700; }
.cmd-facts dd { margin: 0; }
.cmd-risk--alto { color: var(--c-danger-text); font-weight: 650; }
.cmd-example { margin-block: var(--space-4); }
.cmd-example p { margin-top: var(--space-2); }
.cmd-example__code { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.cmd-example__code code { flex: 1 1 14rem; overflow-wrap: anywhere; font-size: 0.95rem; }
.shortcuts-tools { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); justify-content: space-between; }
.shortcuts-tools .list-filter { flex: 1 1 18rem; margin-bottom: 0; }
.shortcuts-tools .btn { margin-bottom: var(--space-5); }
.shortcuts { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.shortcuts th, .shortcuts td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--c-border); vertical-align: top; overflow-wrap: anywhere; }
.shortcuts th { font-size: var(--fs-sm); color: var(--c-text-muted); }
.shortcuts__keys { width: 40%; }
@media (max-width: 479.98px) { .shortcuts th, .shortcuts td { padding: var(--space-2); } .shortcuts__keys { width: 45%; } }
@media print {
  .list-filter, .shortcuts-tools, .breadcrumbs, .sources { display: none !important; }
  .shortcuts-group { break-inside: avoid; margin-block: 0.6rem; }
  .shortcuts th, .shortcuts td { padding: 0.2rem 0.4rem; }
  .shortcuts-page .lead { font-size: 1rem; }
}

/* 26. Programación e Inteligencia artificial: colores, categorías de guías y páginas de sección ---- */
[data-section="programacion"] { --c-section: #84cc16; --c-accent: #4d7c0f; --c-accent-hover: #3f6212; --c-accent-soft: #ecfccb; --c-on-accent: #ffffff; --c-focus: #4d7c0f; }
[data-section="proyectos"] { --c-section: #f97316; --c-accent: #c2410c; --c-accent-hover: #9a3412; --c-accent-soft: #ffedd5; --c-on-accent: #ffffff; --c-focus: #c2410c; }
[data-section="ia"] { --c-section: #d946ef; --c-accent: #a21caf; --c-accent-hover: #86198f; --c-accent-soft: #fae8ff; --c-on-accent: #ffffff; --c-focus: #a21caf; }
:root[data-theme="dark"][data-section="programacion"], :root[data-theme="dark"] [data-section="programacion"] { --c-accent: #a3e635; --c-accent-hover: #bef264; --c-accent-soft: #233016; --c-on-accent: #0b1220; --c-focus: #bef264; }
:root[data-theme="dark"][data-section="proyectos"], :root[data-theme="dark"] [data-section="proyectos"] { --c-accent: #fb923c; --c-accent-hover: #fdba74; --c-accent-soft: #3a2010; --c-on-accent: #0b1220; --c-focus: #fdba74; }
:root[data-theme="dark"][data-section="ia"], :root[data-theme="dark"] [data-section="ia"] { --c-accent: #e879f9; --c-accent-hover: #f0abfc; --c-accent-soft: #3a1840; --c-on-accent: #0b1220; --c-focus: #f0abfc; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-section="programacion"], :root:not([data-theme="light"]) [data-section="programacion"] { --c-accent: #a3e635; --c-accent-hover: #bef264; --c-accent-soft: #233016; --c-on-accent: #0b1220; --c-focus: #bef264; }
  :root:not([data-theme="light"])[data-section="proyectos"], :root:not([data-theme="light"]) [data-section="proyectos"] { --c-accent: #fb923c; --c-accent-hover: #fdba74; --c-accent-soft: #3a2010; --c-on-accent: #0b1220; --c-focus: #fdba74; }
  :root:not([data-theme="light"])[data-section="ia"], :root:not([data-theme="light"]) [data-section="ia"] { --c-accent: #e879f9; --c-accent-hover: #f0abfc; --c-accent-soft: #3a1840; --c-on-accent: #0b1220; --c-focus: #f0abfc; }
}

/* Categorías de guías: mismo diseño de tarjeta que las de herramientas, con su propio color. */
[data-cat="basicos"] { --cat: #6d28d9; --cat-soft: #ede9fe; }
[data-cat="hardware"] { --cat: #1d4ed8; --cat-soft: #dbeafe; }
[data-cat="windows"] { --cat: #0e7490; --cat-soft: #cffafe; }
[data-cat="redes"] { --cat: #0f766e; --cat-soft: #ccfbf1; }
[data-cat="ciberseguridad"] { --cat: #15803d; --cat-soft: #dcfce7; }
[data-cat="movil"] { --cat: #be185d; --cat-soft: #fce7f3; }
[data-cat="documentos"] { --cat: #b91c1c; --cat-soft: #fee2e2; }
[data-cat="gaming"] { --cat: #c2410c; --cat-soft: #ffedd5; }
[data-cat="programacion"] { --cat: #4d7c0f; --cat-soft: #ecfccb; }
[data-cat="ia"] { --cat: #a21caf; --cat-soft: #fae8ff; }
:root[data-theme="dark"] [data-cat="basicos"] { --cat: #a78bfa; --cat-soft: rgb(167 139 250 / 0.14); }
:root[data-theme="dark"] [data-cat="hardware"] { --cat: #60a5fa; --cat-soft: rgb(96 165 250 / 0.14); }
:root[data-theme="dark"] [data-cat="windows"] { --cat: #22d3ee; --cat-soft: rgb(34 211 238 / 0.14); }
:root[data-theme="dark"] [data-cat="redes"] { --cat: #2dd4bf; --cat-soft: rgb(45 212 191 / 0.14); }
:root[data-theme="dark"] [data-cat="ciberseguridad"] { --cat: #4ade80; --cat-soft: rgb(74 222 128 / 0.14); }
:root[data-theme="dark"] [data-cat="movil"] { --cat: #f472b6; --cat-soft: rgb(244 114 182 / 0.14); }
:root[data-theme="dark"] [data-cat="documentos"] { --cat: #f87171; --cat-soft: rgb(248 113 113 / 0.14); }
:root[data-theme="dark"] [data-cat="gaming"] { --cat: #fb923c; --cat-soft: rgb(251 146 60 / 0.14); }
:root[data-theme="dark"] [data-cat="programacion"] { --cat: #a3e635; --cat-soft: rgb(163 230 53 / 0.14); }
:root[data-theme="dark"] [data-cat="ia"] { --cat: #e879f9; --cat-soft: rgb(232 121 249 / 0.14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-cat="basicos"] { --cat: #a78bfa; --cat-soft: rgb(167 139 250 / 0.14); }
  :root:not([data-theme="light"]) [data-cat="hardware"] { --cat: #60a5fa; --cat-soft: rgb(96 165 250 / 0.14); }
  :root:not([data-theme="light"]) [data-cat="windows"] { --cat: #22d3ee; --cat-soft: rgb(34 211 238 / 0.14); }
  :root:not([data-theme="light"]) [data-cat="redes"] { --cat: #2dd4bf; --cat-soft: rgb(45 212 191 / 0.14); }
  :root:not([data-theme="light"]) [data-cat="ciberseguridad"] { --cat: #4ade80; --cat-soft: rgb(74 222 128 / 0.14); }
  :root:not([data-theme="light"]) [data-cat="movil"] { --cat: #f472b6; --cat-soft: rgb(244 114 182 / 0.14); }
  :root:not([data-theme="light"]) [data-cat="documentos"] { --cat: #f87171; --cat-soft: rgb(248 113 113 / 0.14); }
  :root:not([data-theme="light"]) [data-cat="gaming"] { --cat: #fb923c; --cat-soft: rgb(251 146 60 / 0.14); }
  :root:not([data-theme="light"]) [data-cat="programacion"] { --cat: #a3e635; --cat-soft: rgb(163 230 53 / 0.14); }
  :root:not([data-theme="light"]) [data-cat="ia"] { --cat: #e879f9; --cat-soft: rgb(232 121 249 / 0.14); }
}
[data-cat] .card-grid--articles .article-card { border-top: 3px solid var(--cat); }

/* Página de sección (Programación, IA): cabecera, saltos a cada nivel y el camino numerado. */
.topic-hero { display: flex; gap: var(--space-5); align-items: flex-start; }
.topic-hero__icon {
  display: inline-grid; place-items: center; width: 72px; height: 72px; flex: none; border-radius: 20px;
  background: var(--c-section); color: #ffffff; box-shadow: 0 10px 30px color-mix(in srgb, var(--c-section) 35%, transparent);
}
.topic-hero__icon .icon { width: 36px; height: 36px; }
.topic-hero__stats { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.topic-hero__stats li { padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--c-accent-soft); font-size: var(--fs-sm); }
.topic-hero__stats strong { color: var(--c-accent-hover); font-size: 1rem; }
@media (max-width: 559.98px) { .topic-hero { flex-direction: column; gap: var(--space-3); } }
.topic-levels-nav ol { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.topic-levels-nav a {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.45rem 0.9rem 0.45rem 0.45rem; border-radius: 999px;
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); font-weight: 650; text-decoration: none;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.topic-levels-nav a:hover { border-color: var(--c-accent); background: var(--c-accent-soft); }
.topic-levels-nav span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-section); color: #ffffff; font-size: var(--fs-sm); }
.topic-level { margin-bottom: var(--space-7); scroll-margin-top: 8rem; }
.topic-level__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-4); }
.topic-level__head h2 { margin: 0; }
.topic-level__head p { margin: 0; color: var(--c-text-muted); }
/* El camino: una línea vertical del color de la sección que une los números. */
.topic-path { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); position: relative; }
.topic-path::before {
  content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 3px; border-radius: 3px;
  background: linear-gradient(var(--c-section), color-mix(in srgb, var(--c-section) 20%, transparent));
}
.topic-path__item {
  position: relative; display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-radius: var(--radius-lg); transition: background-color 200ms ease;
}
.topic-path__item:hover { background: color-mix(in srgb, var(--c-accent-soft) 70%, transparent); }
.topic-path__num {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--c-surface); border: 3px solid var(--c-section); color: var(--c-accent-hover); font-weight: 800;
  transition: background-color 200ms ease, color 200ms ease, scale 250ms var(--ease-out);
}
.topic-path__item:hover .topic-path__num { background: var(--c-section); color: #ffffff; scale: var(--pop, 1.08); }
.topic-path__body { display: grid; gap: var(--space-1); padding-top: 0.45rem; }
.topic-path__title { margin: 0; font-size: var(--fs-lg); }
.topic-path__note { margin: 0; color: var(--c-text-muted); }
.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Portada: los colores de Programación (lima) e IA (fucsia) se suman a la luz y al degradado. */
.hero { --hero-lime: #4d7c0f; --hero-fuchsia: #a21caf; }
:root[data-theme="dark"] .hero { --hero-lime: #a3e635; --hero-fuchsia: #e879f9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero { --hero-lime: #a3e635; --hero-fuchsia: #e879f9; } }
.hero::before {
  background:
    radial-gradient(38rem 26rem at 8% 0%, rgb(59 130 246 / var(--hero-glow)), transparent 70%),
    radial-gradient(30rem 22rem at 55% calc(var(--h) * 0.1), rgb(20 184 166 / var(--hero-glow)), transparent 70%),
    radial-gradient(34rem 24rem at 95% calc(var(--h) * 0.35), rgb(167 139 250 / var(--hero-glow)), transparent 70%),
    radial-gradient(26rem 20rem at 38% calc(var(--h) * 0.6), rgb(217 70 239 / calc(var(--hero-glow) * 0.6)), transparent 70%),
    radial-gradient(30rem 20rem at 70% var(--h), rgb(245 158 11 / calc(var(--hero-glow) * 0.8)), transparent 70%),
    radial-gradient(28rem 20rem at 20% var(--h), rgb(244 63 94 / calc(var(--hero-glow) * 0.7)), transparent 70%),
    radial-gradient(26rem 18rem at 92% calc(var(--h) * 0.85), rgb(132 204 22 / calc(var(--hero-glow) * 0.7)), transparent 70%);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__accent {
    background-image: linear-gradient(90deg, var(--hero-blue), var(--hero-teal) 16%, var(--hero-lime) 32%, var(--hero-violet) 48%, var(--hero-fuchsia) 64%, var(--hero-rose) 80%, var(--hero-amber), var(--hero-blue));
    background-size: 200% 100%;
  }
}

/* 27. Animaciones ---------------------------------------------------------------------------------
   Todas usan opacidad, color o sombra, y el movimiento sale de estas variables. Con «reducir
   movimiento» (Windows: Configuración > Accesibilidad > Efectos visuales) las variables valen 0, así
   que las mismas animaciones siguen viéndose como fundidos y cambios de color, sin desplazamientos. */
:root { --rise: 22px; --lift: -4px; --pop: 1.08; --nudge: 4px; --drop: -8px; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
  :root { --rise: 0px; --lift: 0px; --pop: 1; --nudge: 0px; --drop: 0px; --panel-shift: 0px; }
  .site-nav__link::after { transform: none; }
  .theme-toggle.is-switching .icon { animation-name: fade-in; }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes reveal-up { from { opacity: 0; translate: 0 var(--rise); } }
@keyframes glow-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes glow-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--rise) * -0.8); } }
@keyframes gradient-flow { to { background-position: 200% 0; } }
@keyframes header-shadow { to { box-shadow: 0 6px 24px rgb(16 24 40 / 0.12); border-bottom-color: transparent; } }
@keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Entre páginas: fundido suave al navegar, con la cabecera fija en su sitio (navegadores compatibles). */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: 160ms ease both reverse fade-in; }
::view-transition-new(root) { animation: 260ms ease both fade-in; }

/* Al cargar: la cabecera de cada página y la portada aparecen escalonadas. */
.page-hero > *, .article__header > *, .hero__main > *, .hero-demo, .breadcrumbs {
  animation: reveal-up 600ms var(--ease-out) both;
}
.page-hero > :nth-child(2), .article__header > :nth-child(2), .hero__main > :nth-child(2) { animation-delay: 80ms; }
.page-hero > :nth-child(3), .article__header > :nth-child(3), .hero__main > :nth-child(3) { animation-delay: 160ms; }
.page-hero > :nth-child(n+4), .article__header > :nth-child(n+4), .hero__main > :nth-child(n+4), .hero-demo { animation-delay: 240ms; }
.section-card { animation: reveal-up 700ms var(--ease-out) both; }
.section-card:nth-child(2) { animation-delay: 70ms; }
.section-card:nth-child(3) { animation-delay: 140ms; }
.section-card:nth-child(4) { animation-delay: 210ms; }
.section-card:nth-child(5) { animation-delay: 280ms; }
.section-card:nth-child(6) { animation-delay: 350ms; }
.section-card:nth-child(7) { animation-delay: 420ms; }
.section-card:nth-child(8) { animation-delay: 490ms; }

/* La luz de la portada «respira» (opacidad) y, si se permite el movimiento, flota despacio; el titular
   recorre los colores de todas las secciones. */
.hero::before { animation: glow-breathe 9s ease-in-out infinite, glow-drift 14s ease-in-out infinite; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) { .hero__accent { animation: gradient-flow 12s linear infinite; } }
}

/* Al desplazarte, el contenido aparece al entrar en pantalla (animación ligada al scroll, sin
   JavaScript; donde no hay soporte, todo se ve directamente). */
/* En las páginas de herramientas no: ahí nada interactivo debe moverse mientras se usa. */
@supports (animation-timeline: view()) {
  :root:not([data-tool-slug]) :is(.card, .tool-cat, .topic-path__item, .route-step, .prose > h2, .prose > .table-wrap,
  .sources, .related, .hub-section > h2, .footer-nav, .footer-about, .section__head, .steps > li, .features > li) {
    animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 0% entry 55%;
  }
  .section-card { animation-timeline: auto; }
  /* La sombra de la cabecera aparece al bajar los primeros píxeles. */
  .site-header { animation: header-shadow linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
}

/* Barra de lectura en las guías, ligada al desplazamiento (la mueve el usuario, así que se mantiene). */
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--c-section); transform-origin: left; transform: scaleX(0); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .read-progress { animation: read-progress linear both; animation-timeline: scroll(root); }
}
@supports not (animation-timeline: scroll()) { .read-progress { display: none; } }

/* Interacciones: las tarjetas se elevan, sus iconos crecen y las flechas avanzan. Con «reducir
   movimiento» quedan la sombra, el borde y el color. */
.card, .tool-cat, .section-card {
  transition: box-shadow 250ms ease, border-color 250ms ease, translate 300ms var(--ease-out), background-color 250ms ease;
}
.card:hover, .tool-cat:hover, .section-card:hover { translate: 0 var(--lift); transform: none; }
.card__icon, .tool-cat__icon, .section-card__icon, .site-nav__icon {
  transition: scale 300ms var(--ease-out), background-color 250ms ease, color 250ms ease, box-shadow 250ms ease;
}
.card:hover .card__icon, .tool-cat:hover .tool-cat__icon, .section-card:hover .section-card__icon, .site-nav__link:hover .site-nav__icon {
  scale: var(--pop);
}
.card:hover .card__icon { background: var(--c-accent); color: var(--c-on-accent); }
[data-cat] .card:hover .card__icon, .tool-cat:hover .tool-cat__icon { background: var(--cat); color: #ffffff; }
.section-card:hover .section-card__icon { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-section) 22%, transparent); }
.site-nav__link:hover .site-nav__icon { background: var(--c-section); color: #ffffff; }
.card__more .icon, .section__link .icon, .btn .icon--arrow-right, .chip--more .icon { transition: translate 250ms var(--ease-out); }
.card:hover .card__more .icon, .section__link:hover .icon, .btn:hover .icon--arrow-right, .chip--more:hover .icon { translate: var(--nudge) 0; }
.btn { transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, scale 150ms ease; }
.btn--primary:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--c-accent) 30%, transparent); }
.btn:active:not([disabled]) { scale: calc(1 - (var(--pop) - 1) * 0.4); }
.chip { transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease, translate 250ms var(--ease-out); }
.chip:hover { border-color: var(--c-accent); background: var(--c-accent-soft); translate: 0 calc(var(--lift) / 2); }
.section-card__links a, .related__list a, .footer-nav a, .breadcrumbs a { transition: color 200ms ease, background-color 200ms ease; }

/* Luz que sigue al ratón en las tarjetas grandes (la posición la pone ui/motion.js). */
.section-card, .tool-cat { position: relative; isolation: isolate; }
.section-card::after, .tool-cat::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c-section, var(--cat)) 14%, transparent), transparent 60%);
  transition: opacity 300ms ease;
}
.tool-cat::after { background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--cat) 14%, transparent), transparent 60%); }
.section-card:hover::after, .tool-cat:hover::after { opacity: 1; }

/* Menú móvil: se despliega con un fundido (y desde arriba si se permite el movimiento). */
@media (max-width: 999.98px) {
  .site-nav.is-open .site-nav__item { animation: reveal-up 380ms var(--ease-out) both; }
  .site-nav.is-open .site-nav__item:nth-child(2) { animation-delay: 30ms; }
  .site-nav.is-open .site-nav__item:nth-child(3) { animation-delay: 60ms; }
  .site-nav.is-open .site-nav__item:nth-child(4) { animation-delay: 90ms; }
  .site-nav.is-open .site-nav__item:nth-child(5) { animation-delay: 120ms; }
  .site-nav.is-open .site-nav__item:nth-child(6) { animation-delay: 150ms; }
  .site-nav.is-open .site-nav__item:nth-child(7) { animation-delay: 180ms; }
}
@media (min-width: 1000px) { :root { --header-h: 6.75rem; } }

/* La línea de colores de todas las secciones en lo alto de la cabecera. */
.site-header::before {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, #3b82f6, #14b8a6, #84cc16, #a78bfa, #d946ef, #f43f5e, #f59e0b, #3b82f6);
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) { .site-header::before { animation: gradient-flow 16s linear infinite; } }

/* El cambio de tema claro/oscuro se funde en lugar de saltar. */
.site-header, .site-footer, .card, .tool-cat, .section-card, .hero-demo { transition-property: background-color, color, border-color, box-shadow, translate; transition-duration: 300ms; }
.card, .tool-cat, .section-card { transition-timing-function: ease, ease, ease, ease, var(--ease-out); }

@media print { .read-progress, .site-header::before { display: none; } }

/* 28. Fotos de las guías y las rutas (dominio público, alojadas en la propia web) -------------------- */
.photo { margin: var(--space-6) 0; }
.photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg);
  background: var(--c-surface-2); box-shadow: var(--shadow);
}
.photo figcaption { margin-top: var(--space-2); font-size: 0.75rem; text-align: right; }
.photo figcaption a { color: var(--c-text-muted); text-decoration: none; }
.photo figcaption a:hover { color: var(--c-accent); text-decoration: underline; }
/* La primera foto de cada guía, como portada apaisada bajo el título. */
.photo--cover { margin: var(--space-2) 0 var(--space-5); }
.photo--cover img { aspect-ratio: 21 / 9; }
/* Las rutas: tres fotos en fila (una sola columna en el móvil). */
/* Zoom suave al pasar el ratón (con «reducir movimiento», solo se aclara un poco). */
.photo { overflow: visible; }
.photo img { transition: scale 600ms var(--ease-out), filter 400ms ease; }
.photo:hover img { scale: calc(1 + (var(--pop) - 1) * 0.25); filter: saturate(1.08) brightness(1.03); }
@supports (animation-timeline: view()) {
  :root:not([data-tool-slug]) .photo { animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  .photo--cover { animation: reveal-up 700ms var(--ease-out) both; animation-timeline: auto; }
}

/* 29. Programación: un color por lenguaje, tarjetas, lecciones y ejercicios --------------------------
   --lang es el color vivo (decoración); --lang-l y --lang-d, los tonos para texto y botones en tema
   claro y oscuro, con contraste suficiente sobre las superficies. */
[data-lang="javascript"] { --lang: #eab308; --lang-l: #854d0e; --lang-d: #fde047; }
[data-lang="sql"] { --lang: #10b981; --lang-l: #047857; --lang-d: #6ee7b7; }
[data-lang="html-css"] { --lang: #f97316; --lang-l: #c2410c; --lang-d: #fdba74; }
[data-lang="python"] { --lang: #3b82f6; --lang-l: #1d4ed8; --lang-d: #93c5fd; }
[data-lang="bash"] { --lang: #84cc16; --lang-l: #3f6212; --lang-d: #bef264; }
[data-lang="typescript"] { --lang: #6366f1; --lang-l: #4338ca; --lang-d: #a5b4fc; }
[data-lang="java"] { --lang: #ef4444; --lang-l: #b91c1c; --lang-d: #fca5a5; }
[data-lang="csharp"] { --lang: #8b5cf6; --lang-l: #6d28d9; --lang-d: #c4b5fd; }
[data-lang="powershell"] { --lang: #0ea5e9; --lang-l: #0369a1; --lang-d: #7dd3fc; }
[data-lang="cpp"] { --lang: #14b8a6; --lang-l: #0f766e; --lang-d: #5eead4; }
[data-lang="c"] { --lang: #64748b; --lang-l: #334155; --lang-d: #cbd5e1; }
[data-lang="rust"] { --lang: #d97706; --lang-l: #92400e; --lang-d: #fcd34d; }
[data-lang="php"] { --lang: #d946ef; --lang-l: #a21caf; --lang-d: #f0abfc; }
[data-lang="go"] { --lang: #06b6d4; --lang-l: #0e7490; --lang-d: #67e8f9; }
[data-lang="kotlin"] { --lang: #ec4899; --lang-l: #be185d; --lang-d: #f9a8d4; }
[data-lang] {
  --c-section: var(--lang); --c-accent: var(--lang-l); --c-accent-hover: color-mix(in srgb, var(--lang-l) 82%, #000);
  --c-accent-soft: color-mix(in srgb, var(--lang) 12%, #ffffff); --c-on-accent: #ffffff; --c-focus: var(--lang-l);
}
:root[data-theme="dark"] [data-lang] {
  --c-accent: var(--lang-d); --c-accent-hover: color-mix(in srgb, var(--lang-d) 75%, #ffffff);
  --c-accent-soft: color-mix(in srgb, var(--lang) 16%, #1f2937); --c-on-accent: #0b1220; --c-focus: var(--lang-d);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-lang] {
    --c-accent: var(--lang-d); --c-accent-hover: color-mix(in srgb, var(--lang-d) 75%, #ffffff);
    --c-accent-soft: color-mix(in srgb, var(--lang) 16%, #1f2937); --c-on-accent: #0b1220; --c-focus: var(--lang-d);
  }
}

/* Insignia con las siglas del lenguaje, sobre su color (texto claro u oscuro según el tema). */
.lang-badge {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px;
  background: linear-gradient(145deg, var(--c-accent), var(--c-accent-hover));
  color: var(--c-on-accent); font: 800 1.05rem/1 var(--font-mono); letter-spacing: -0.02em;
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--lang) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.25);
  overflow: hidden;
}
/* Brillo que cruza la insignia al pasar el ratón. */
.lang-badge::after {
  content: ""; position: absolute; inset: -40% auto -40% -60%; width: 40%; rotate: 20deg;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.45), transparent); opacity: 0;
}
.lang-badge--xl { width: 88px; height: 88px; border-radius: 26px; font-size: 1.6rem; }
.lang-badge--sm { width: 30px; height: 30px; border-radius: 9px; font-size: 0.7rem; box-shadow: none; }
@keyframes badge-shine { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 380% 0; } }

/* Portada de Programación: rejilla de lenguajes. */
.lang-hub { margin-bottom: var(--space-7); }
.lang-hub__head { margin-bottom: var(--space-4); }
.lang-hub__head h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); }
.lang-hub__head p { margin: 0; color: var(--c-text-muted); max-width: 60ch; }
.lang-hub__head--fund { margin-top: var(--space-2); }
.lang-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }
.lang-card {
  position: relative; isolation: isolate; display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) var(--space-4) var(--space-5);
  border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); box-shadow: var(--shadow-sm); overflow: hidden;
  transition: box-shadow 250ms ease, border-color 250ms ease, translate 300ms var(--ease-out);
}
/* Franja superior y halo del color del lenguaje. */
.lang-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--lang), color-mix(in srgb, var(--lang) 35%, transparent)); }
.lang-card::after {
  content: ""; position: absolute; z-index: -1; width: 12rem; height: 12rem; right: -5rem; top: -6rem; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--lang) 22%, transparent), transparent 70%); opacity: 0.55; transition: opacity 300ms ease, scale 400ms var(--ease-out);
}
.lang-card:hover { translate: 0 var(--lift); border-color: color-mix(in srgb, var(--lang) 55%, var(--c-border)); box-shadow: 0 14px 34px -16px color-mix(in srgb, var(--lang) 60%, transparent), var(--shadow); }
.lang-card:hover::after { opacity: 1; scale: 1.25; }
.lang-card:hover .lang-badge { scale: var(--pop); rotate: -4deg; }
.lang-card:hover .lang-badge::after { animation: badge-shine 700ms ease-out; }
.lang-card .lang-badge { transition: scale 300ms var(--ease-out), rotate 300ms var(--ease-out); }
.lang-card__body { display: grid; gap: var(--space-1); min-width: 0; flex: 1; }
.lang-card__rank { margin: 0; font-size: var(--fs-sm); font-weight: 650; color: var(--c-text-muted); }
.lang-card__rank span { display: inline-block; margin-right: 0.3rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--c-accent-soft); color: var(--c-text); font-weight: 800; }
.lang-card__title { margin: 0; font-size: 1.25rem; }
.lang-card__text { margin: 0; color: var(--c-text-muted); font-size: 0.95rem; }
.lang-card__meta { margin: var(--space-1) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--fs-sm); font-weight: 600; }
.lang-card__meta [data-lang-done] { color: var(--c-accent); }
.lang-card__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: transparent; }
.lang-card__bar span { display: block; height: 100%; width: calc(var(--done, 0) * 100%); background: var(--lang); transition: width 600ms var(--ease-out); }

/* Página de un lenguaje: cabecera, índice lateral y lecciones. */
.lang-hero { display: flex; gap: var(--space-5); align-items: center; padding-block: var(--space-6) var(--space-5); }
.lang-hero__body > * { animation: reveal-up 600ms var(--ease-out) both; }
.lang-hero__body > :nth-child(2) { animation-delay: 80ms; }
.lang-hero__body > :nth-child(n+3) { animation-delay: 160ms; }
.lang-hero .lang-badge--xl { animation: badge-pop 700ms var(--ease-out) both; }
@keyframes badge-pop { from { opacity: 0; scale: calc(1 - (var(--pop) - 1) * 3); rotate: calc((var(--pop) - 1) * -150deg); } }
.lang-hero h1 { margin-bottom: var(--space-2); }
.lang-hero__stats { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lang-hero__stats li { padding: 0.3rem 0.85rem; border-radius: 999px; background: var(--c-accent-soft); border: 1px solid color-mix(in srgb, var(--lang) 30%, transparent); font-size: var(--fs-sm); }
.lang-hero__stats strong { font-size: 1rem; }
.lang-hero__stats a { margin-left: 1px; color: inherit; text-decoration: none; }
@media (max-width: 559.98px) { .lang-hero { flex-direction: column; align-items: flex-start; gap: var(--space-3); } }

.lang-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-bottom: var(--space-7); }
@media (min-width: 1000px) { .lang-layout { grid-template-columns: 17rem minmax(0, 1fr); align-items: start; } }
.lang-toc__inner { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); }
@media (min-width: 1000px) { .lang-toc { position: sticky; top: calc(var(--header-h) + var(--space-4)); max-height: calc(100vh - var(--header-h) - var(--space-6)); overflow: auto; } }
@media (max-width: 999.98px) { .lang-toc__list, .lang-toc__level { display: none; } }
.lang-toc__level { margin: var(--space-2) 0 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-muted); }
.lang-toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lang-toc__list a {
  display: flex; gap: var(--space-2); align-items: center; padding: 0.35rem 0.5rem; border-radius: var(--radius-sm);
  color: var(--c-text); text-decoration: none; font-size: 0.92rem; line-height: 1.3; transition: background-color 200ms ease, color 200ms ease;
}
.lang-toc__list a:hover { background: var(--c-accent-soft); }
.lang-toc__list a[aria-current] { background: var(--c-accent-soft); font-weight: 700; box-shadow: inset 3px 0 0 var(--lang); }
.lang-toc__num {
  display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--lang) 60%, var(--c-border)); font-size: 0.75rem; font-weight: 800;
  transition: background-color 250ms ease, color 250ms ease, scale 250ms var(--ease-out);
}
.lang-toc__list a.is-done .lang-toc__num { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.lang-progress { display: grid; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--c-border); }
.lang-progress__text { margin: 0; font-weight: 650; font-size: var(--fs-sm); }

.lang-intro { padding: var(--space-5); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--c-accent-soft), var(--c-surface) 70%); border: 1px solid var(--c-border); }
.lang-intro h2 { margin-top: 0; }
.lang-uses { list-style: none; margin: var(--space-3) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lang-uses li { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-border); font-size: var(--fs-sm); font-weight: 600; }
.lang-uses .icon { width: 16px; height: 16px; color: var(--c-accent); }
.lang-start { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; }
.lang-start .icon { flex: none; margin-top: 0.2rem; color: var(--c-accent); }

.lang-level { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-7) 0 var(--space-4); scroll-margin-top: 8rem; }
.lang-level::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--lang), transparent); }
.lang-level__tag { padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); font-size: var(--fs-sm); font-weight: 800; }

/* Cada lección es una tarjeta; al completarla, su número se vuelve una marca de verificación. */
.lesson {
  position: relative; margin-bottom: var(--space-5); padding: var(--space-5); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  background: var(--c-surface); box-shadow: var(--shadow-sm); scroll-margin-top: 7rem; transition: border-color 300ms ease, box-shadow 300ms ease;
}
.lesson::before { content: ""; position: absolute; left: -1px; top: var(--space-5); bottom: var(--space-5); width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(var(--lang), color-mix(in srgb, var(--lang) 15%, transparent)); }
.lesson:target { border-color: var(--c-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lang) 20%, transparent); }
.lesson.is-done { border-color: color-mix(in srgb, var(--c-success-border) 70%, var(--c-border)); }
.lesson__head { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.lesson__num {
  display: inline-grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px;
  background: var(--c-accent-soft); border: 2px solid color-mix(in srgb, var(--lang) 55%, transparent); font-weight: 800; font-size: 1.1rem;
}
.lesson__kind { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-muted); }
.lesson__title { margin: 0; font-size: 1.3rem; }
.lesson__done-mark { margin-left: auto; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-success-bg); color: var(--c-success-text); opacity: 0; scale: 0.5; transition: opacity 300ms ease, scale 400ms var(--ease-out); }
.lesson.is-done .lesson__done-mark { opacity: 1; scale: 1; }
.lesson__text p { margin: 0 0 var(--space-3); }

/* Bloque de código con aspecto de editor (oscuro en los dos temas). */
.code-block { margin: var(--space-4) 0; border-radius: var(--radius); overflow: hidden; background: #0f172a; border: 1px solid #1e293b; box-shadow: 0 10px 24px -14px rgb(2 6 23 / 0.5); }
.code-block__bar { display: flex; align-items: center; gap: var(--space-3); padding: 0.45rem 0.75rem; background: #1e293b; color: #cbd5e1; font-size: 0.8rem; font-weight: 650; }
.code-block__dots { display: inline-flex; gap: 6px; }
.code-block__dots::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #f87171; box-shadow: 16px 0 0 #fbbf24, 32px 0 0 #4ade80; margin-right: 32px; }
.code-block__copy {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; border-radius: 6px; cursor: pointer;
  border: 1px solid #475569; background: transparent; color: #e2e8f0; font: inherit; transition: background-color 200ms ease, border-color 200ms ease;
}
.code-block__copy:hover { background: #334155; border-color: #64748b; }
.code-block__copy .icon { width: 15px; height: 15px; }
.code-block pre { margin: 0; padding: var(--space-4); overflow-x: auto; background: none; border: 0; color: #e2e8f0; font-size: 0.9rem; line-height: 1.6; tab-size: 4; }
.code-block code { background: none; padding: 0; color: inherit; font-size: inherit; }
.code-block pre:focus-visible { outline: 3px solid var(--lang-d, #93c5fd); outline-offset: -3px; }

/* Ejercicio: marco punteado del color del lenguaje; acierto en verde y fallo con una sacudida. */
.exercise {
  margin: var(--space-4) 0; padding: var(--space-4); border-radius: var(--radius); border: 2px dashed color-mix(in srgb, var(--lang) 55%, var(--c-border));
  background: color-mix(in srgb, var(--c-accent-soft) 55%, var(--c-surface)); transition: border-color 300ms ease, background-color 300ms ease;
}
.exercise.is-solved { border-style: solid; border-color: var(--c-success-border); background: color-mix(in srgb, var(--c-success-bg) 60%, var(--c-surface)); }
.exercise.is-wrong { animation: shake 400ms ease; }
@keyframes shake { 20%, 60% { translate: calc(var(--nudge) * -1.5) 0; } 40%, 80% { translate: calc(var(--nudge) * 1.5) 0; } }
.exercise__label { display: flex; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-1); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.exercise__label .icon { width: 16px; height: 16px; color: var(--c-accent); }
.exercise__q { margin: 0 0 var(--space-3); font-weight: 650; }
.exercise__options { display: grid; gap: var(--space-2); }
.exercise__option {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text); font: inherit; text-align: left;
  transition: border-color 200ms ease, background-color 200ms ease, translate 250ms var(--ease-out), box-shadow 200ms ease;
}
.exercise__option:hover:not(:disabled) { border-color: var(--c-accent); translate: calc(var(--nudge) / 2) 0; box-shadow: var(--shadow-sm); }
.exercise__option:disabled { cursor: default; }
.exercise__option:disabled:not(.is-right) { opacity: 0.6; }
.exercise__letter { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--c-accent-soft); font: 800 0.85rem/1 var(--font-mono); transition: background-color 200ms ease, color 200ms ease; }
.exercise__option.is-right { border-color: var(--c-success-border); background: var(--c-success-bg); color: var(--c-success-text); }
.exercise__option.is-right .exercise__letter { background: var(--c-success-text); color: var(--c-success-bg); animation: pop-in 400ms var(--ease-out); }
.exercise__option.is-wrong { border-color: var(--c-danger-border); background: var(--c-danger-bg); color: var(--c-danger-text); }
@keyframes pop-in { 50% { scale: calc(1 + (var(--pop) - 1) * 3); } }
.exercise__code { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: #0f172a; color: #e2e8f0; overflow-x: auto; font-size: 0.92rem; line-height: 1.7; }
.exercise__code code { background: none; padding: 0; color: inherit; }
.exercise__input {
  min-width: 3ch; padding: 0.05rem 0.35rem; border: 0; border-bottom: 2px solid var(--lang-d, #93c5fd); border-radius: 4px 4px 0 0;
  background: #1e293b; color: #f8fafc; font: inherit; transition: border-color 200ms ease, background-color 200ms ease;
}
.exercise__input:focus { outline: 2px solid var(--lang-d, #93c5fd); outline-offset: 2px; }
.exercise__input.is-right { border-bottom-color: #4ade80; background: #14532d; }
.exercise__input.is-wrong { border-bottom-color: #f87171; background: #450a0a; }
.exercise__actions { margin-bottom: var(--space-2); }
.exercise__feedback { margin: var(--space-2) 0 0; min-height: 1.5em; font-weight: 700; }
.exercise__feedback.is-ok { color: var(--c-success-text); }
.exercise__feedback.is-bad { color: var(--c-danger-text); }
.exercise__solution { margin-top: var(--space-2); font-size: 0.95rem; }
.exercise__solution summary { cursor: pointer; font-weight: 650; color: var(--c-text-muted); width: fit-content; }
.exercise__solution summary:hover { color: var(--c-accent); }
.exercise__solution p { margin: var(--space-2) 0 0; }
.exercise__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Editor de código (ui/code-editor.js): números de línea a la izquierda y las líneas con error en rojo. */
.code-editor {
  display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0 0 var(--space-2); border-radius: var(--radius-sm);
  background: #0f172a; border: 2px solid #1e293b; overflow: hidden; transition: border-color 250ms ease, box-shadow 250ms ease;
}
.code-editor:focus-within { border-color: var(--lang-d, #93c5fd); }
.code-editor__gutter { display: flex; flex-direction: column; padding: var(--space-3) 0; overflow: hidden; background: #111a2e; border-right: 1px solid #1e293b; user-select: none; }
.code-editor__line { display: block; min-width: 2.6em; padding: 0 0.55em; text-align: right; color: #94a3b8; font: 0.92rem/1.6 var(--font-mono); }
.code-editor__line.is-error { color: #fecaca; background: #7f1d1d; box-shadow: inset 3px 0 0 #f87171; }
.code-editor__input,
.exercise__textarea {
  --lines: 6;
  display: block; width: 100%; min-width: 0; height: calc(var(--lines) * 1.6 * 0.92rem + 2 * var(--space-3)); margin: 0; padding: var(--space-3);
  border: 0; outline: 0; resize: vertical; background: transparent; color: #e2e8f0; caret-color: #f8fafc;
  font: 0.92rem/1.6 var(--font-mono); tab-size: 4; white-space: pre; overflow: auto;
}
.exercise__textarea:not(.code-editor__input) { border-radius: var(--radius-sm); background: #0f172a; margin-bottom: var(--space-2); }
.exercise.is-solved .code-editor { border-color: #22c55e; box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 30%, transparent); }
.exercise__keys { margin: 0 0 var(--space-2); color: var(--c-text-muted); font-size: 0.8rem; }
.exercise:not(.is-ready) .exercise__keys { display: none; }
.exercise__errors { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); list-style: none; border-radius: var(--radius-sm); border: 1px solid var(--c-danger-border); background: var(--c-danger-bg); color: var(--c-danger-text); font-size: 0.92rem; }
.exercise__errors-title { font-weight: 800; margin-bottom: var(--space-1); }
.exercise__error { padding: 0.15rem 0; }
.exercise__error-line {
  padding: 0.05rem 0.45rem; border-radius: 6px; border: 1px solid currentColor; background: transparent; color: inherit;
  font: 700 0.8rem/1.4 var(--font-mono); cursor: pointer;
}
.exercise__error-line:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.exercise__solution-box { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--c-border); background: var(--c-surface); animation: pop-in 300ms var(--ease-out); }
.exercise__solution-box:focus { outline: none; }
.exercise__solution-title { margin: 0 0 var(--space-2); font-weight: 800; }
.exercise__solution-box p:last-child { margin-bottom: 0; }

/* «Encuentra los errores»: cada línea es un botón; las halladas en verde, las que estaban bien en rojo. */
.bug-code { margin: 0 0 var(--space-3); padding: var(--space-2) 0; list-style: none; border-radius: var(--radius-sm); background: #0f172a; overflow-x: auto; }
.bug-line {
  display: flex; gap: var(--space-3); width: 100%; min-width: max-content; padding: 0.1rem var(--space-3) 0.1rem 0; border: 0; border-left: 3px solid transparent;
  background: transparent; color: #e2e8f0; font: 0.92rem/1.6 var(--font-mono); text-align: left; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease;
}
.bug-line:disabled { cursor: default; }
.bug-line:hover:not(:disabled) { background: #1e293b; }
.bug-line:focus-visible { outline: 2px solid var(--lang-d, #93c5fd); outline-offset: -2px; }
.bug-line__n { min-width: 2.6em; padding-right: 0.55em; text-align: right; color: #64748b; user-select: none; }
.bug-line code { background: none; padding: 0; color: inherit; white-space: pre; }
.bug-line[aria-pressed="true"] { background: #312e81; border-left-color: #a5b4fc; }
.bug-line.is-found { background: #14532d; border-left-color: #4ade80; }
.bug-line.is-wrong-pick { background: #450a0a; border-left-color: #f87171; }
.bug-line.is-missed { background: #422006; border-left-color: #fbbf24; }
.bug-list { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--space-2); }
.bug-list__fix { display: block; color: var(--c-text-muted); }

/* ---- Proyectos ---------------------------------------------------------------------------------- */
/* Código de cada paso: nombre del archivo en la barra y las líneas nuevas resaltadas. */
.code-block__file { font-family: var(--font-mono); color: #f8fafc; }
.code-block__legend { display: inline-flex; align-items: center; gap: 0.35rem; color: #bef264; font-weight: 600; }
.code-block__legend::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: #365314; box-shadow: inset 3px 0 0 #a3e635; }
.code-line { display: block; min-height: 1.6em; }
.code-line.is-new { margin-inline: calc(var(--space-4) * -1); padding-inline: calc(var(--space-4) - 3px) var(--space-4); background: rgb(101 163 13 / 0.22); border-left: 3px solid #a3e635; }
.code-block__copy { margin-left: auto; }
.code-block__legend + .code-block__copy { margin-left: auto; }

/* Lo que muestra un programa de consola al ejecutarlo. */
.terminal { margin: var(--space-4) 0; border-radius: var(--radius); overflow: hidden; background: #020617; border: 1px solid #1e293b; }
.terminal pre { margin: 0; padding: var(--space-3) var(--space-4); overflow-x: auto; background: none; border: 0; color: #a7f3d0; font-size: 0.88rem; line-height: 1.6; }
.terminal code { background: none; padding: 0; color: inherit; }

.project-intro { margin-bottom: var(--space-6); }
.project-learn, .project-prereq { margin-top: var(--space-4); }
.project-prereq__lang { color: var(--c-text-muted); font-size: var(--fs-sm); }
.project-result { margin: var(--space-5) 0 0; border-radius: var(--radius); overflow: hidden; border: 1px solid #1e293b; box-shadow: 0 16px 32px -20px rgb(2 6 23 / 0.5); }
.project-result__frame { display: block; width: 100%; height: clamp(320px, 60vh, 520px); border: 0; background: #ffffff; }
.project-result__nojs { margin: 0; padding: var(--space-4); }
.project-step__try { margin: 0 0 var(--space-2); }
.project-step__foot { grid-template-columns: 1fr; }
.project-challenges { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding-left: 1.3rem; }

/* Editor en vivo: archivos a la izquierda y resultado con su consola a la derecha. */
.project-editor { margin-top: var(--space-7); padding: var(--space-5); border-radius: var(--radius-lg); border: 2px solid color-mix(in srgb, var(--lang) 45%, var(--c-border)); background: var(--c-surface); scroll-margin-top: 5rem; }
.project-editor h2 { display: flex; align-items: center; gap: var(--space-2); margin-top: 0; }
.project-editor__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.project-editor__tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.project-editor__tab {
  padding: 0.4rem 0.85rem; border: 1px solid var(--c-border); border-radius: 8px 8px 0 0; background: var(--c-surface-2);
  color: var(--c-text-muted); font: 600 0.88rem/1.3 var(--font-mono); cursor: pointer;
}
.project-editor__tab[aria-selected="true"] { background: #0f172a; border-color: #0f172a; color: #f8fafc; }
.project-editor__tab:focus-visible { outline: 3px solid var(--lang-d, var(--c-focus)); outline-offset: 2px; }
.project-editor__step { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.project-editor__step select { max-width: 16rem; padding: 0.3rem 0.5rem; border-radius: 8px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); }
.project-editor__grid { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .project-editor__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.project-editor__code .code-editor { margin: 0; border-top-left-radius: 0; }
.project-editor__view { display: grid; grid-template-rows: minmax(300px, 1fr) auto; gap: var(--space-2); min-width: 0; }
.project-editor__frame { width: 100%; height: 100%; min-height: 300px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: #ffffff; }
.project-editor__console { max-height: 160px; overflow: auto; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: #020617; color: #cbd5e1; font: 0.82rem/1.5 var(--font-mono); }
.project-editor__console-title { margin: 0 0 var(--space-1); color: #94a3b8; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.project-editor__console ol { margin: 0; padding: 0; list-style: none; }
.project-editor__log { padding: 0.1rem 0; border-bottom: 1px solid #0f172a; white-space: pre-wrap; overflow-wrap: anywhere; }
.project-editor__log.is-error { color: #fca5a5; }
.project-editor__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* Portada de Proyectos: filtro por lenguaje. */
.project-filter { margin-bottom: var(--space-5); }
.project-filter__label { margin: 0 0 var(--space-2); font-weight: 800; font-size: var(--fs-sm); }
.project-filter__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.project-filter .chip { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.project-filter .chip[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.project-level + .project-level { margin-top: var(--space-6); }
.lang-hub__projects {
  display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--c-section) 45%, var(--c-border));
  background: linear-gradient(120deg, var(--c-accent-soft), var(--c-surface) 70%); color: var(--c-text); text-decoration: none;
  transition: border-color 200ms ease, translate 200ms ease;
}
.lang-hub__projects:hover { border-color: var(--c-section); translate: 0 calc(var(--lift) / 2); }
.lang-hub__projects > .icon { flex: none; color: var(--c-accent); }
.lang-hub__projects-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--c-section); color: #ffffff; }
.lang-end__projects { margin-bottom: var(--space-4); }

.lesson__foot { display: grid; gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--c-border); }
@media (min-width: 700px) { .lesson__foot { grid-template-columns: 1fr 1fr; } .lesson__done { grid-column: 1 / -1; } }
.lesson__foot-title { display: flex; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-2); font-size: var(--fs-sm); font-weight: 800; }
.lesson__foot-title .icon { width: 16px; height: 16px; color: var(--c-accent); }
.chip--term { font-size: var(--fs-sm); }
.lesson__guide-list { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--space-1); font-size: 0.95rem; }
.lesson__done { width: fit-content; padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface-2); transition: background-color 200ms ease, border-color 200ms ease; }
.lesson__done:hover { border-color: var(--c-accent); }
.lesson.is-done .lesson__done { background: var(--c-success-bg); border-color: var(--c-success-border); color: var(--c-success-text); }

.lang-end { margin-top: var(--space-7); padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--c-border); background: linear-gradient(160deg, var(--c-accent-soft), var(--c-surface) 60%); }
.lang-end h2 { display: flex; align-items: center; gap: var(--space-2); margin-top: 0; }
.lang-sources { margin-top: var(--space-5); }
.lang-others { margin-top: var(--space-6); }
.lang-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lang-chips a {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.3rem 0.8rem 0.3rem 0.3rem; border-radius: 999px;
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); font-weight: 650; text-decoration: none;
  transition: border-color 200ms ease, translate 250ms var(--ease-out), box-shadow 200ms ease;
}
.lang-chips a:hover { border-color: var(--lang); translate: 0 calc(var(--lift) / 2); box-shadow: 0 6px 16px -10px var(--lang); }
@supports (animation-timeline: view()) {
  :root:not([data-tool-slug]) :is(.lesson, .lang-card, .lang-intro) { animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 0px entry 140px; }
}

/* 30. Portada: «Recomendación del día» -------------------------------------------------------------
   Seis tarjetas con el color de su sección, una luz de fondo que flota, un borde de colores que gira
   en la tarjeta principal y entrada escalonada al llegar (con «reducir movimiento», solo fundidos). */
@property --daily-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.daily { position: relative; isolation: isolate; overflow: hidden; }
.daily__glow {
  position: absolute; z-index: -1; inset: -20% -10% auto; height: 120%; pointer-events: none;
  background:
    radial-gradient(30rem 20rem at 15% 20%, rgb(59 130 246 / 0.12), transparent 70%),
    radial-gradient(26rem 18rem at 85% 10%, rgb(217 70 239 / 0.1), transparent 70%),
    radial-gradient(28rem 20rem at 60% 90%, rgb(132 204 22 / 0.1), transparent 70%);
  animation: glow-breathe 10s ease-in-out infinite, glow-drift 16s ease-in-out infinite;
}
.daily__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-5); }
.daily__intro { max-width: 46rem; }
.daily__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.daily__spark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #ffffff; background: linear-gradient(135deg, #2563eb, #a21caf); box-shadow: 0 6px 16px -6px rgb(162 28 175 / 0.6); }
.daily__spark .icon { width: 17px; height: 17px; animation: spark-spin 6s linear infinite; }
@keyframes spark-spin { to { rotate: calc((var(--pop) - 1) * 4500deg); } }
.daily__date { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-text-muted); }
.daily__date:not(:empty)::before { content: "·"; margin-right: var(--space-2); }
@media (max-width: 559.98px) { .daily__date { flex-basis: 100%; } .daily__date:not(:empty)::before { content: none; } }
.daily__title { margin: 0 0 var(--space-2); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); }
.daily__theme { background-image: linear-gradient(transparent 62%, color-mix(in srgb, #a78bfa 35%, transparent) 62%); background-repeat: no-repeat; background-size: 100% 100%; }
.daily__text { margin: 0; color: var(--c-text-muted); font-size: var(--fs-lg); }
.daily__renew { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface); font-size: var(--fs-sm); font-weight: 650; }
.daily__renew .icon { width: 16px; height: 16px; }

.daily__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
@media (min-width: 900px) {
  /* Principal a la izquierda (dos filas), cuatro tarjetas en 2 × 2 y el extra como franja final. */
  .daily__grid { grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: auto auto auto; }
  .daily__grid .daily-card--herramienta { grid-row: span 2; justify-content: center; }
  .daily__grid .daily-card--extra { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: auto auto 1fr auto; grid-template-rows: auto auto; column-gap: var(--space-4); align-items: center; padding-block: var(--space-4); }
  .daily__grid .daily-card--extra .daily-card__icon { grid-row: span 2; }
  .daily__grid .daily-card--extra .daily-card__kind { grid-column: 2; margin: 0; }
  .daily__grid .daily-card--extra .daily-card__title { grid-column: 2; }
  .daily__grid .daily-card--extra .daily-card__text { grid-column: 3; grid-row: 1 / span 2; }
  .daily__grid .daily-card--extra .daily-card__go { grid-column: 4; grid-row: 1 / span 2; margin: 0; align-self: center; }
}
.daily-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--space-2); min-height: 11rem; padding: var(--space-5);
  border-radius: var(--radius-lg); border: 1px solid var(--c-border); background: var(--c-surface); box-shadow: var(--shadow-sm); overflow: hidden;
  transition: box-shadow 250ms ease, border-color 250ms ease, translate 300ms var(--ease-out), opacity 400ms ease;
}
/* Mancha de color de la sección en la esquina y luz que sigue al ratón (ui/motion.js). */
.daily-card::before {
  content: ""; position: absolute; z-index: -1; width: 14rem; height: 14rem; right: -6rem; top: -7rem; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-section) 26%, transparent), transparent 70%); transition: scale 500ms var(--ease-out), opacity 300ms ease; opacity: 0.7;
}
.daily-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; border-radius: inherit;
  background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c-section) 14%, transparent), transparent 60%);
  transition: opacity 300ms ease;
}
.daily-card:hover { translate: 0 var(--lift); border-color: color-mix(in srgb, var(--c-section) 50%, var(--c-border)); box-shadow: 0 16px 36px -18px color-mix(in srgb, var(--c-section) 65%, transparent), var(--shadow); }
.daily-card:hover::before { scale: 1.3; opacity: 1; }
.daily-card:hover::after { opacity: 1; }
.daily-card__icon {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: var(--c-on-accent);
  background: linear-gradient(140deg, var(--c-accent), var(--c-accent-hover));
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--c-section) 80%, transparent); transition: scale 300ms var(--ease-out), rotate 300ms var(--ease-out);
}
.daily-card:hover .daily-card__icon { scale: var(--pop); rotate: -6deg; }
.daily-card__alt { display: none; }
[data-section="diagnostico"] > .daily-card__icon > [data-alt="diagnostico"], [data-section="recursos"] > .daily-card__icon > [data-alt="recursos"], [data-section="proyectos"] > .daily-card__icon > [data-alt="proyectos"] { display: contents; }
.daily-card__kind { margin: var(--space-1) 0 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--c-text-muted); }
.daily-card__title { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.daily-card__text { margin: 0; color: var(--c-text-muted); font-size: 0.95rem; }
.daily-card__go { margin-top: auto; align-self: flex-end; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--c-border); color: var(--c-accent); transition: background-color 250ms ease, color 250ms ease, translate 250ms var(--ease-out), border-color 250ms ease; }
.daily-card:hover .daily-card__go { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); translate: var(--nudge) 0; }

/* Tarjeta principal: más grande, con un borde de colores que gira despacio. */
.daily-card--herramienta { padding: var(--space-6); }
.daily-card--herramienta .daily-card__icon { width: 64px; height: 64px; border-radius: 20px; margin: 18px 0 14px 18px; }
.daily-card--herramienta .daily-card__icon .icon { width: 30px; height: 30px; }
.daily-card--herramienta .daily-card__title { font-size: 1.5rem; }
.daily-card--herramienta .daily-card__text { font-size: 1.02rem; }
.daily-card--herramienta {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--c-surface), var(--c-surface)) padding-box,
    conic-gradient(from var(--daily-angle), #3b82f6, #14b8a6, #84cc16, #f59e0b, #f43f5e, #d946ef, #3b82f6) border-box;
}
@media (prefers-reduced-motion: no-preference) { .daily-card--herramienta { animation: daily-spin 9s linear infinite; } }
@keyframes daily-spin { to { --daily-angle: 360deg; } }
/* Órbitas decorativas detrás del icono principal. */
.daily-card--herramienta .daily-card__icon { position: relative; }
.daily-card--herramienta .daily-card__icon::before, .daily-card--herramienta .daily-card__icon::after {
  content: ""; position: absolute; inset: -12px; border-radius: 26px; border: 1px dashed color-mix(in srgb, var(--c-section) 55%, transparent); pointer-events: none;
}
.daily-card--herramienta .daily-card__icon::after { inset: -24px; border-radius: 32px; opacity: 0.5; }
@media (prefers-reduced-motion: no-preference) {
  .daily-card--herramienta .daily-card__icon::before { animation: orbit 14s linear infinite; }
  .daily-card--herramienta .daily-card__icon::after { animation: orbit 22s linear infinite reverse; }
}
@keyframes orbit { to { rotate: 360deg; } }

/* Entrada escalonada (solo con JavaScript; sin él, todo se ve desde el principio) y cambio de tema. */
.js .daily.is-armed:not(.is-visible) .daily-card { opacity: 0; translate: 0 var(--rise); }
.daily.is-visible .daily-card { animation: reveal-up 650ms var(--ease-out) both; }
.daily.is-visible .daily-card:nth-child(2) { animation-delay: 80ms; }
.daily.is-visible .daily-card:nth-child(3) { animation-delay: 160ms; }
.daily.is-visible .daily-card:nth-child(4) { animation-delay: 240ms; }
.daily.is-visible .daily-card:nth-child(5) { animation-delay: 320ms; }
.daily.is-visible .daily-card:nth-child(6) { animation-delay: 400ms; }
@media (prefers-reduced-motion: no-preference) { .daily.is-visible .daily-card--herramienta { animation: reveal-up 650ms var(--ease-out) both, daily-spin 9s linear 650ms infinite; } }
.daily.is-swapping .daily-card, .daily.is-swapping .daily__theme, .daily.is-swapping .daily__text { opacity: 0; transition: opacity 200ms ease; }
.daily__theme, .daily__text { transition: opacity 300ms ease; }

/* Textos con código largo (rutas, comandos, nombres de excepciones) que no deben ensanchar la página en móvil. */
.exercise__options { grid-template-columns: minmax(0, 1fr); }
.exercise__option > span, .lang-start span { min-width: 0; }
.exercise__option code, .lang-start code { overflow-wrap: anywhere; }
.project-editor__step { min-width: 0; flex-wrap: wrap; }
.project-editor__step select { max-width: min(16rem, 100%); min-width: 0; }

/* Herramientas nuevas: muestra de color, temporizador, listas y subtítulos de panel */
.color-swatch { width: 100%; height: 4rem; margin-top: var(--space-2); border-radius: 8px; border: 1px solid var(--c-border-strong); }
.timer-face { text-align: center; padding: var(--space-4) 0; }
.timer-time { font-size: clamp(3.5rem, 15vw, 6rem); font-weight: 700; line-height: 1; margin: var(--space-2) 0; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.tool-subtitle { font-size: 1.1rem; margin: var(--space-4) 0 var(--space-2); }

/* Mi panel y listas de comprobación */
.panel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.panel-item { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); }
.panel-item a { font-weight: 700; }
.panel-item__detail, .panel-empty { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.check-level { margin: 0; }
@media print {
  .route__progress .actions, .route-step__done, .site-nav, .site-header, .site-footer, .breadcrumbs { display: none !important; }
  .route-step { break-inside: avoid; }
}

/* Analizador de equipo */
.steps-inline { margin: 0 0 var(--space-4); padding-left: 1.25rem; display: grid; gap: var(--space-2); }
.check-results { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.check-result { padding: var(--space-3) var(--space-4); border: 1px solid var(--c-border); border-left-width: 4px; border-radius: var(--radius-lg); background: var(--c-surface); }
.check-result p { margin: 0 0 var(--space-1); }
.check-result--ok { border-left-color: var(--c-success-text); }
.check-result--warn { border-left-color: #b45309; }
.check-result--bad { border-left-color: #b91c1c; }
.check-result--unknown { border-left-color: var(--c-text-muted); }
.badge { display: inline-block; padding: 0 var(--space-2); border: 1px solid var(--c-border); border-radius: 999px; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Simuladores dentro de las guías */
.widget-slot { margin-block: var(--space-5); }
.widget { display: grid; gap: var(--space-3); }
.widget__title { margin: 0; font-size: var(--fs-h3); }
.widget__grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.widget__checks { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.widget__out { margin: 0; font-weight: 700; }
.bit-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-1); }
.bit-btn { display: grid; gap: 2px; justify-items: center; padding: var(--space-2) 0; border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); color: var(--c-text); font: inherit; cursor: pointer; }
.bit-btn__value { font-size: var(--fs-sm); color: var(--c-text-muted); }
.bit-btn__digit { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bit-btn.is-on { background: var(--c-accent-soft); border-color: var(--c-accent); }
.tool-panel > * { min-width: 0; }
.steps-inline code { overflow-wrap: anywhere; }