/* Selector de lenguaje */
.lang-switch { display: flex; align-items: center; gap: .15rem; margin: 0 .4rem; }
.lang-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem;
  border-radius: .45rem; opacity: .6; transition: opacity .15s, background .15s; color: inherit; }
.lang-btn svg { width: 1.35rem; height: 1.35rem; }
.lang-btn:hover { opacity: 1; background: rgba(255,255,255,.14); }
.lang-btn.current { opacity: 1; background: rgba(255,255,255,.22); }
@media (max-width: 44.9375em) { .lang-switch { gap: 0; margin: 0 .1rem; } .lang-btn { width: 1.6rem; height: 1.6rem; } }

/* Móvil: un solo botón con el lenguaje actual que abre la lista (la fila de iconos no cabe y empujaba la búsqueda fuera de la pantalla) */
.lang-pick { display: none; position: relative; margin: 0 .1rem; }
.lang-pick-btn { display: inline-flex; align-items: center; height: 1.9rem; padding: 0 .25rem 0 .35rem; border: 0; border-radius: .45rem;
  background: rgba(255,255,255,.18); color: inherit; cursor: pointer; }
.lang-pick-btn:hover, .lang-pick-btn[aria-expanded="true"] { background: rgba(255,255,255,.28); }
.lang-pick-btn svg { width: 1.35rem; height: 1.35rem; }
.lang-pick-btn .lang-caret { width: 1rem; height: 1rem; opacity: .8; }
.lang-menu { position: fixed; left: .5rem; top: 3rem; z-index: 10; min-width: 14rem; padding: .3rem; border-radius: .4rem;
  background: var(--md-default-bg-color); color: var(--md-default-fg-color); box-shadow: 0 4px 16px #0006;
  border: .075rem solid var(--md-default-fg-color--lightest); }
.lang-menu[hidden] { display: none; }
.lang-item { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: .3rem; font-size: .8rem; color: inherit; text-decoration: none; }
.lang-item svg { width: 1.35rem; height: 1.35rem; flex: none; }
.lang-item:hover, .lang-item:focus-visible { background: var(--md-code-bg-color); outline: none; }
.lang-item.current { font-weight: 700; box-shadow: inset .15rem 0 0 var(--md-accent-fg-color); }
.lang-pick-txt { margin: 0 .1rem 0 .3rem; font-size: .8rem; font-weight: 700; white-space: nowrap; }
/* Móvil: sin el título del sitio (no cabía y se cortaba); el botón del lenguaje lleva el nombre y empuja el resto a la derecha */
@media (max-width: 44.9375em) {
  .lang-switch { display: none; }
  .lang-pick { display: block; margin-right: auto; }
  .md-header__title { display: none; }
}

/* Soluciones bloqueadas */
details.sol { border: .075rem solid #00c85366; border-radius: .2rem; margin: 1em 0; padding: 0 .8rem; background: #00c8530d; }
details.sol > summary { font-weight: 700; cursor: pointer; padding: .5rem 0; }
details.sol .sol-aviso { margin: .2rem 0 .4rem; font-size: .8rem; opacity: .85; }
details.sol .sol-abierta { color: #00c853; opacity: 1; }
details.sol pre { margin: .4rem 0 .8rem; overflow-x: auto; padding: .7rem .9rem; border-radius: .2rem;
  background: var(--md-code-bg-color); color: var(--md-code-fg-color); font-size: .78rem; line-height: 1.5; }
details.sol pre code { font-family: var(--md-code-font-family, monospace); }
.sol-admin { position: fixed; right: 1rem; bottom: 1rem; z-index: 5; border: 0; border-radius: 2rem; padding: .45rem .9rem;
  font: inherit; font-size: .75rem; cursor: pointer; background: var(--md-primary-fg-color); color: #fff; opacity: .85;
  box-shadow: 0 2px 8px #0005; }
.sol-admin:hover { opacity: 1; }

/* Hub */
.lang-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.lang-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: 1.4rem 1rem;
  border: .075rem solid var(--md-default-fg-color--lightest); border-radius: .6rem; text-decoration: none !important;
  color: inherit !important; transition: transform .15s, border-color .15s, background .15s; }
.lang-card:hover { transform: translateY(-3px); border-color: var(--md-accent-fg-color); background: var(--md-code-bg-color); }
.lang-card svg { width: 4rem; height: 4rem; }
.lang-card strong { font-size: 1.05rem; }
.lang-card span { font-size: .75rem; opacity: .75; }
.pasar-sel { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 1rem 0; }
.pasar-sel .grupo { display: flex; align-items: center; gap: .3rem; }
.pasar-sel .grupo > b { margin-right: .3rem; }
.pasar-btn { display: inline-flex; width: 2.6rem; height: 2.6rem; border-radius: .6rem; border: .1rem solid transparent;
  background: transparent; cursor: pointer; padding: .25rem; opacity: .55; }
.pasar-btn svg { width: 100%; height: 100%; }
.pasar-btn.on { opacity: 1; border-color: var(--md-accent-fg-color); background: var(--md-code-bg-color); }
.pasar-flecha { font-size: 1.6rem; opacity: .6; }
.pasar-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; margin: .4rem 0 1.2rem; }
.pasar-fila > div { min-width: 0; }
.pasar-fila h4 { grid-column: 1 / -1; margin: .8rem 0 0; }
.pasar-fila pre { margin: 0; padding: .6rem .8rem; border-radius: .3rem; font-size: .75rem; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; overflow-x: hidden;
  background: var(--md-code-bg-color); color: var(--md-code-fg-color); }
.pasar-fila pre code { white-space: inherit; overflow-wrap: inherit; word-break: inherit; }
.pasar-fila .etq { font-size: .7rem; opacity: .7; margin-bottom: .15rem; display: flex; align-items: center; gap: .3rem; }
.pasar-fila .etq svg { width: 1rem; height: 1rem; }
@media (max-width: 44.9375em) { .pasar-fila { grid-template-columns: 1fr; } }

/* Unidades: ejercicios que se desbloquean */
.ej-oculto { display: none !important; }
.ej-gate.cerrada { border: .075rem solid #ffab4066; background: #ffab400d; border-radius: .3rem; padding: .2rem 1rem .4rem; margin: 1rem 0; }
.ej-gate.cerrada strong { font-size: .95rem; }
.md-typeset .md-button:not(.md-button--primary), .ej-gate .md-button:not(.md-button--primary) { color: var(--md-default-fg-color); border-color: var(--md-default-fg-color--light); }
.md-typeset .md-button:not(.md-button--primary):hover { color: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color); }
.ej-check { margin: .6rem 0 1rem; padding: .6rem .9rem; border: .075rem solid var(--md-default-fg-color--lightest); border-radius: .3rem; }
.ej-check label { cursor: pointer; font-weight: 600; }
.ej-check input { margin-right: .4rem; transform: scale(1.2); }
.u-estado { white-space: nowrap; font-size: .8rem; }

.lang-card.pronto { opacity: .5; cursor: default; border-style: dashed; }
.lang-card.pronto:hover { transform: none; background: transparent; border-color: var(--md-default-fg-color--lightest); }

/* Editor con vista previa */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; margin: 1rem 0 1.4rem;
  padding: .8rem; border: .075rem solid var(--md-default-fg-color--lightest); border-radius: .4rem; }
.demo > div { min-width: 0; }
.demo-etq { font-size: .72rem; font-weight: 700; opacity: .75; margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .03em; }
.demo textarea { width: 100%; box-sizing: border-box; resize: vertical; padding: .6rem .7rem; border-radius: .3rem;
  border: .075rem solid var(--md-default-fg-color--lightest); background: var(--md-code-bg-color); color: var(--md-code-fg-color);
  font: .75rem/1.5 var(--md-code-font-family, monospace); tab-size: 2; white-space: pre; overflow: auto; }
.demo iframe { width: 100%; box-sizing: border-box; border: .075rem solid var(--md-default-fg-color--lightest); border-radius: .3rem; background: #fff; }
.demo-rest { margin-top: .4rem; font: inherit; font-size: .72rem; cursor: pointer; padding: .2rem .6rem; border-radius: .3rem;
  border: .075rem solid var(--md-default-fg-color--lighter); background: transparent; color: var(--md-default-fg-color); }
@media (max-width: 44.9375em) { .demo { grid-template-columns: 1fr; } }

.pasar-fila .uso { margin-top: .6rem; }

/* Selector de tema */
.tema-pick { position: relative; margin: 0 .2rem; }
.tema-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: 0; border-radius: .45rem;
  background: transparent; color: inherit; cursor: pointer; opacity: .75; transition: opacity .15s, background .15s; }
.tema-btn:hover, .tema-btn[aria-expanded="true"] { opacity: 1; background: rgba(255,255,255,.18); }
.tema-menu { position: absolute; right: 0; top: 2.3rem; z-index: 10; min-width: 15rem; padding: .3rem; border-radius: .4rem;
  background: var(--md-default-bg-color); color: var(--md-default-fg-color); box-shadow: 0 4px 16px #0006;
  border: .075rem solid var(--md-default-fg-color--lightest); }
.tema-menu[hidden] { display: none; }
.tema-menu button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .4rem .6rem; border: 0; border-radius: .3rem;
  background: transparent; color: inherit; font: inherit; font-size: .75rem; text-align: left; cursor: pointer; }
.tema-menu button:hover, .tema-menu button:focus-visible { background: var(--md-code-bg-color); outline: none; }
.tema-menu button.on { font-weight: 700; box-shadow: inset .15rem 0 0 var(--md-accent-fg-color); }
@media (max-width: 44.9375em) { .tema-btn { width: 1.6rem; height: 1.6rem; } .tema-menu { position: fixed; right: .5rem; top: 3rem; } }

/* Temas estacionales: solo cambian variables de color (sin imágenes ni recursos extra) */
:root[data-estacion="primavera"] > * { --md-primary-fg-color: #2e7d32; --md-primary-fg-color--dark: #1b5e20; --md-primary-fg-color--light: #66bb6a; --md-accent-fg-color: #d81b60; }
:root[data-estacion="primavera"] body[data-md-color-scheme="slate"] { --md-hue: 130; --md-accent-fg-color: #f48fb1; }
:root[data-estacion="verano"] > * { --md-primary-fg-color: #0277bd; --md-primary-fg-color--dark: #01579b; --md-primary-fg-color--light: #4fc3f7; --md-accent-fg-color: #e65100; }
:root[data-estacion="verano"] body[data-md-color-scheme="slate"] { --md-hue: 200; --md-accent-fg-color: #ffd54f; }
:root[data-estacion="otono"] > * { --md-primary-fg-color: #d84315; --md-primary-fg-color--dark: #bf360c; --md-primary-fg-color--light: #ff7043; --md-accent-fg-color: #bf360c; }
:root[data-estacion="otono"] body[data-md-color-scheme="slate"] { --md-hue: 18; --md-accent-fg-color: #ffb74d; }
:root[data-estacion="invierno"] > * { --md-primary-fg-color: #37507a; --md-primary-fg-color--dark: #243656; --md-primary-fg-color--light: #6b86b3; --md-accent-fg-color: #0277bd; }
:root[data-estacion="invierno"] body[data-md-color-scheme="slate"] { --md-hue: 215; --md-accent-fg-color: #a7d8ff; }

/* Temas estacionales: transparencias (solo con tema estacional activo; el predeterminado no cambia) */
:root[data-estacion] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 0% 0%, color-mix(in srgb, var(--md-primary-fg-color) 22%, transparent), transparent 70%),
    radial-gradient(50rem 36rem at 100% 100%, color-mix(in srgb, var(--md-accent-fg-color) 16%, transparent), transparent 70%); }
:root[data-estacion] .md-header { background: linear-gradient(100deg, color-mix(in srgb, var(--md-primary-fg-color) 94%, transparent),
    color-mix(in srgb, var(--md-primary-fg-color--light, var(--md-primary-fg-color)) 78%, transparent));
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); }
:root[data-estacion] .md-typeset .admonition, :root[data-estacion] .md-typeset details:not(.sol),
:root[data-estacion] .lang-card, :root[data-estacion] .ej-check {
  background: color-mix(in srgb, var(--md-default-bg-color) 55%, transparent); }
:root[data-estacion] .lang-card { border-color: color-mix(in srgb, var(--md-accent-fg-color) 35%, transparent); }
:root[data-estacion] .md-typeset table:not([class]) { background: color-mix(in srgb, var(--md-default-bg-color) 50%, transparent); }
:root[data-estacion] .md-typeset pre > code, :root[data-estacion] .md-typeset .highlight { background-color: color-mix(in srgb, var(--md-code-bg-color) 80%, transparent); }
:root[data-estacion] details.sol { background: color-mix(in srgb, #00c853 8%, transparent); }
:root[data-estacion] .md-search__form { background: color-mix(in srgb, #fff 16%, transparent); }
:root[data-estacion] .tema-menu { background: color-mix(in srgb, var(--md-default-bg-color) 82%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); }
:root[data-estacion] ::selection { background: color-mix(in srgb, var(--md-accent-fg-color) 35%, transparent); }
:root[data-estacion] .md-sidebar__scrollwrap { scrollbar-color: color-mix(in srgb, var(--md-accent-fg-color) 55%, transparent) transparent; }
@media (prefers-reduced-transparency: reduce) {
  :root[data-estacion] .md-header, :root[data-estacion] .tema-menu { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
:root[data-estacion] body[data-md-color-scheme="slate"] { --md-typeset-a-color: var(--md-primary-fg-color--light); }

/* Detalles decorativos baratos (solo CSS) */
:root[data-estacion] .md-header { border-bottom: .12rem solid color-mix(in srgb, var(--md-accent-fg-color) 70%, transparent); }
:root[data-estacion="primavera"] body::before { background-image:
    radial-gradient(color-mix(in srgb, var(--md-primary-fg-color) 14%, transparent) 1.2px, transparent 1.4px),
    radial-gradient(60rem 40rem at 0% 0%, color-mix(in srgb, var(--md-primary-fg-color) 22%, transparent), transparent 70%),
    radial-gradient(50rem 36rem at 100% 100%, color-mix(in srgb, var(--md-accent-fg-color) 16%, transparent), transparent 70%);
  background-size: 28px 28px, auto, auto; }
:root[data-estacion="invierno"] body::before { background-image:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, #fff 16%, transparent) 1.6px, transparent 2.4px),
    radial-gradient(circle at 70% 75%, color-mix(in srgb, #fff 11%, transparent) 1.1px, transparent 1.8px),
    radial-gradient(60rem 40rem at 0% 0%, color-mix(in srgb, var(--md-primary-fg-color) 22%, transparent), transparent 70%),
    radial-gradient(50rem 36rem at 100% 100%, color-mix(in srgb, var(--md-accent-fg-color) 16%, transparent), transparent 70%);
  background-size: 83px 83px, 131px 131px, auto, auto; }
:root[data-estacion="otono"] .md-typeset .admonition { border-inline-start: .3rem solid var(--md-accent-fg-color); }
:root[data-estacion="verano"] .md-header { box-shadow: 0 .25rem 1rem color-mix(in srgb, var(--md-accent-fg-color) 28%, transparent); }

/* ---- Temas especiales ---- */
:root[data-estacion="bloques"] > * { --md-primary-fg-color: #3f7f2a; --md-primary-fg-color--dark: #2b5a1b; --md-primary-fg-color--light: #7cb342; --md-accent-fg-color: #1565c0; }
:root[data-estacion="bloques"] body[data-md-color-scheme="slate"] { --md-hue: 110; --md-accent-fg-color: #ffeb3b; }
:root[data-estacion="pixel"] > * { --md-primary-fg-color: #4527a0; --md-primary-fg-color--dark: #311b92; --md-primary-fg-color--light: #7e57c2; --md-accent-fg-color: #6a1b9a; }
:root[data-estacion="pixel"] body[data-md-color-scheme="slate"] { --md-hue: 268; --md-accent-fg-color: #ffd54f; }
:root[data-estacion="apocaliptico"] > * { --md-primary-fg-color: #8a3b12; --md-primary-fg-color--dark: #5d2509; --md-primary-fg-color--light: #c2682e; --md-accent-fg-color: #bf360c; }
:root[data-estacion="apocaliptico"] body[data-md-color-scheme="slate"] { --md-hue: 20; --md-accent-fg-color: #ff8a3d; }
:root[data-estacion="neon"] > * { --md-primary-fg-color: #311b92; --md-primary-fg-color--dark: #1a0f5c; --md-primary-fg-color--light: #5e35b1; --md-accent-fg-color: #aa00ff; }
:root[data-estacion="neon"] body[data-md-color-scheme="slate"] { --md-hue: 262; --md-accent-fg-color: #ff4fd8; }
:root[data-estacion="espacio"] > * { --md-primary-fg-color: #1a237e; --md-primary-fg-color--dark: #0d1445; --md-primary-fg-color--light: #5c6bc0; --md-accent-fg-color: #5e35b1; }
:root[data-estacion="espacio"] body[data-md-color-scheme="slate"] { --md-hue: 245; --md-accent-fg-color: #b388ff; }
:root[data-estacion="halloween"] > * { --md-primary-fg-color: #4a1a6b; --md-primary-fg-color--dark: #2d0f43; --md-primary-fg-color--light: #8e44ad; --md-accent-fg-color: #e65100; }
:root[data-estacion="halloween"] body[data-md-color-scheme="slate"] { --md-hue: 275; --md-accent-fg-color: #ff9100; }

/* Imagen decorativa bajo la cabecera: solo se descarga la del tema elegido.
   Los ajustes (--b-*) los pone lenguajes.js: posición, zoom, altura, visibilidad y desvanecido. */
:root[data-estacion] .md-main::before { --h: var(--b-alto, 7.5rem); --solape: 5.5rem;
  content: ""; display: block; height: var(--h); margin-bottom: calc(-1 * min(var(--solape), var(--h) - 1rem)); pointer-events: none;
  background-position: var(--b-x, 50%) var(--b-y, 50%);
  background-size: max(calc(var(--b-zoom, 1) * 100%), calc(var(--h) * var(--b-asp, 5.36))) auto;
  background-repeat: no-repeat; opacity: var(--b-op, .5);
  -webkit-mask-image: linear-gradient(#000 var(--b-corte, 35%), transparent); mask-image: linear-gradient(#000 var(--b-corte, 35%), transparent); }
:root[data-estacion] body[data-md-color-scheme="slate"] .md-main::before { opacity: var(--b-op, .38); }
@media (max-width: 44.9375em) { :root[data-estacion] .md-main::before { --h: calc(var(--b-alto, 7.5rem) * .667); --solape: 3.5rem; } }
:root[data-estacion="primavera"] .md-main::before { background-image: url(https://apuntes-dam.github.io/apuntes-lenguajes/assets/temas/primavera.webp); }
:root[data-estacion="verano"] .md-main::before { background-image: url(https://apuntes-dam.github.io/apuntes-lenguajes/assets/temas/verano.webp); }
:root[data-estacion="otono"] .md-main::before { background-image: url(https://apuntes-dam.github.io/apuntes-lenguajes/assets/temas/otono.webp); }
:root[data-estacion="invierno"] .md-main::before { background-image: url(https://apuntes-dam.github.io/apuntes-lenguajes/assets/temas/invierno.webp); }
:root[data-estacion="bloques"] .md-main::before { background-image: url(https://apuntes-dam.github.io/apuntes-lenguajes/assets/temas/bloques.webp); }
:root[data-estacion="pixel"] .md-main::before { background-image: url(https://apuntes-dam.github.io/apuntes-lenguajes/assets/temas/pixel.webp); }
:root[data-estacion="apocaliptico"] .md-main::before { background-image: url(https://apuntes-dam.github.io/apuntes-lenguajes/assets/temas/apocaliptico.webp); }
:root[data-estacion="neon"] .md-main::before { background-image: url(https://apuntes-dam.github.io/apuntes-lenguajes/assets/temas/neon.webp); }
:root[data-estacion="espacio"] .md-main::before { background-image: url(https://apuntes-dam.github.io/apuntes-lenguajes/assets/temas/espacio.webp); }
:root[data-estacion="halloween"] .md-main::before { background-image: url(https://apuntes-dam.github.io/apuntes-lenguajes/assets/temas/halloween.webp); }

/* Estilos propios de cada tema especial (solo CSS) */
:root[data-estacion="bloques"] .md-typeset .admonition, :root[data-estacion="bloques"] .lang-card, :root[data-estacion="bloques"] .md-typeset table:not([class]),
:root[data-estacion="bloques"] .md-typeset pre > code, :root[data-estacion="bloques"] .md-button, :root[data-estacion="bloques"] .tema-menu, :root[data-estacion="bloques"] details.sol { border-radius: 0; }
:root[data-estacion="bloques"] .md-typeset .admonition { border-width: .2rem; box-shadow: .25rem .25rem 0 color-mix(in srgb, var(--md-primary-fg-color--dark) 55%, transparent); }
:root[data-estacion="pixel"] .md-typeset h1, :root[data-estacion="pixel"] .md-typeset h2, :root[data-estacion="pixel"] .md-header__title { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .02em; }
:root[data-estacion="pixel"] .md-typeset .admonition, :root[data-estacion="pixel"] .lang-card, :root[data-estacion="pixel"] .md-typeset table:not([class]),
:root[data-estacion="pixel"] .md-typeset pre > code, :root[data-estacion="pixel"] .tema-menu { border-radius: 0; border: .15rem solid var(--md-accent-fg-color); }
:root[data-estacion="apocaliptico"] .md-typeset { filter: sepia(.18) contrast(1.03); }
:root[data-estacion="apocaliptico"] body::before { background-image:
    radial-gradient(70rem 40rem at 50% 110%, color-mix(in srgb, #ff6d00 22%, transparent), transparent 70%),
    radial-gradient(60rem 40rem at 0% 0%, color-mix(in srgb, var(--md-primary-fg-color) 24%, transparent), transparent 70%); }
:root[data-estacion="neon"] .md-header__title, :root[data-estacion="neon"] .md-typeset h1 { text-shadow: 0 0 .5rem color-mix(in srgb, var(--md-accent-fg-color) 70%, transparent); }
:root[data-estacion="neon"] .md-typeset .admonition, :root[data-estacion="neon"] .lang-card { border-color: var(--md-accent-fg-color); box-shadow: 0 0 .8rem color-mix(in srgb, var(--md-accent-fg-color) 35%, transparent); }
:root[data-estacion="espacio"] body::before { background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff8, transparent), radial-gradient(1.4px 1.4px at 38% 62%, #fff9, transparent),
    radial-gradient(1px 1px at 71% 28%, #fff7, transparent), radial-gradient(1.6px 1.6px at 88% 74%, #fff9, transparent),
    radial-gradient(1px 1px at 55% 90%, #fff7, transparent),
    radial-gradient(60rem 40rem at 0% 0%, color-mix(in srgb, var(--md-primary-fg-color) 28%, transparent), transparent 70%),
    radial-gradient(50rem 36rem at 100% 100%, color-mix(in srgb, var(--md-accent-fg-color) 18%, transparent), transparent 70%); }
:root[data-estacion="halloween"] .md-typeset .admonition, :root[data-estacion="halloween"] .lang-card { border-color: var(--md-accent-fg-color); }
:root[data-estacion="halloween"] .md-header { box-shadow: 0 .3rem 1.2rem color-mix(in srgb, var(--md-accent-fg-color) 35%, transparent); }

/* Grupos del menú de temas */
.tema-menu { max-height: min(75vh, 30rem); overflow-y: auto; }
.tema-grupo { margin: .35rem .6rem .1rem; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }

/* Menú lateral con tema activo: los títulos (nombre de la web y «Tabla de contenidos») no llevan fondo sólido
   y no se quedan fijos arriba, así no tapan el degradado ni dejan ver el texto que pasa por detrás. */
@media (min-width: 60em) { :root[data-estacion] .md-sidebar--secondary .md-nav__title { background: none; box-shadow: none; position: static; } }
@media (min-width: 76.25em) { :root[data-estacion] .md-sidebar--primary .md-nav__title { background: none; box-shadow: none; position: static; } }

/* Halloween: algo te observa (cara translúcida, siempre igual de tenue) */
.ojos { position: fixed; z-index: 4; width: 8rem; height: 9.9rem; pointer-events: none; opacity: .2;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  filter: brightness(1.7) contrast(.85) blur(.4px); mix-blend-mode: screen; transition: transform .5s ease-out; --giro: 0deg; }
/* en modo claro la cara no aparece */
body[data-md-color-scheme="default"] .ojos { display: none; }
.ojos.izq { left: -2.4rem; transform: rotate(var(--giro)); }
.ojos.der { right: -2.4rem; transform: scaleX(-1) rotate(var(--giro)); }
@media (max-width: 44.9375em) { .ojos { width: 5.6rem; height: 6.9rem; } .ojos.izq { left: -1.6rem; } .ojos.der { right: -1.6rem; } }

/* Modo avanzado */
html:not([data-avanzado]) .nav-avanzado { display: none; }
.av-btn { display: inline-flex; align-items: center; gap: .3rem; height: 1.9rem; margin: 0 .2rem; padding: 0 .6rem; border: .075rem solid rgba(255,255,255,.35);
  border-radius: 2rem; background: transparent; color: inherit; font: inherit; font-size: .65rem; cursor: pointer; opacity: .8; transition: opacity .15s, background .15s; }
.av-btn:hover { opacity: 1; background: rgba(255,255,255,.14); }
.av-btn[aria-checked="true"] { opacity: 1; background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.85); font-weight: 700; }
@media (max-width: 59.9375em) { .av-btn .av-txt { display: none; } .av-btn { padding: 0 .45rem; } }

/* Navidad y Futuro */
:root[data-estacion="navidad"] > * { --md-primary-fg-color: #9b1c31; --md-primary-fg-color--dark: #6e1223; --md-primary-fg-color--light: #d94a5e; --md-accent-fg-color: #1b5e20; }
:root[data-estacion="navidad"] body[data-md-color-scheme="slate"] { --md-hue: 350; --md-accent-fg-color: #ffd166; }
:root[data-estacion="futuro"] > * { --md-primary-fg-color: #0e6a78; --md-primary-fg-color--dark: #08444e; --md-primary-fg-color--light: #26c6da; --md-accent-fg-color: #ad1457; }
:root[data-estacion="futuro"] body[data-md-color-scheme="slate"] { --md-hue: 190; --md-accent-fg-color: #ff6ec7; }
:root[data-estacion="navidad"] .md-main::before { background-image: url(https://apuntes-dam.github.io/apuntes-lenguajes/assets/temas/navidad.webp); }
:root[data-estacion="futuro"] .md-main::before { background-image: url(https://apuntes-dam.github.io/apuntes-lenguajes/assets/temas/futuro.webp); }
:root[data-estacion="navidad"] body::before { background-image:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, #ffd166 20%, transparent) 1.6px, transparent 2.5px),
    radial-gradient(circle at 75% 70%, color-mix(in srgb, #fff 14%, transparent) 1.2px, transparent 2px),
    radial-gradient(60rem 40rem at 0% 0%, color-mix(in srgb, var(--md-primary-fg-color) 22%, transparent), transparent 70%),
    radial-gradient(50rem 36rem at 100% 100%, color-mix(in srgb, var(--md-accent-fg-color) 16%, transparent), transparent 70%);
  background-size: 97px 97px, 141px 141px, auto, auto; }
:root[data-estacion="futuro"] .md-header { box-shadow: 0 .25rem 1rem color-mix(in srgb, var(--md-accent-fg-color) 30%, transparent); }

/* Tema personal (los colores se calculan de la imagen en el navegador de cada persona) */
:root[data-estacion="personal"] > * { --md-primary-fg-color: var(--per-p); --md-primary-fg-color--dark: var(--per-pd); --md-primary-fg-color--light: var(--per-pl); --md-accent-fg-color: var(--per-al); }
:root[data-estacion="personal"] body[data-md-color-scheme="slate"] { --md-hue: var(--per-h); --md-accent-fg-color: var(--per-ad); }
:root[data-estacion="personal"] .md-main::before { background-image: var(--per-img); }
.tema-menu [hidden] { display: none !important; }
.tema-nota { margin: .4rem .6rem .2rem; font-size: .62rem; line-height: 1.35; opacity: .7; }

/* Panel «Ajustar imagen» */
.aj-panel { position: fixed; right: 1rem; bottom: 1rem; z-index: 20; width: min(21rem, calc(100vw - 2rem)); padding: .7rem .9rem .8rem;
  border-radius: .5rem; background: var(--md-default-bg-color); color: var(--md-default-fg-color);
  border: .075rem solid var(--md-default-fg-color--lightest); box-shadow: 0 6px 24px #0007; font-size: .7rem; }
.aj-panel h3 { margin: 0 0 .4rem; font-size: .8rem; }
.aj-fila { display: grid; grid-template-columns: 8.6rem 1fr 2.8rem; align-items: center; gap: .4rem; margin: .15rem 0; }
.aj-fila label { line-height: 1.2; }
.aj-fila output { text-align: right; opacity: .75; font-variant-numeric: tabular-nums; }
.aj-fila input[type=range] { width: 100%; accent-color: var(--md-accent-fg-color); }
.aj-botones { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .6rem; }
.aj-botones button { padding: .3rem .8rem; border-radius: 2rem; border: .075rem solid var(--md-default-fg-color--light); background: transparent;
  color: inherit; font: inherit; cursor: pointer; }
.aj-botones button.principal { background: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color); color: #fff; }
.aj-nota { margin: .4rem 0 0; opacity: .65; font-size: .62rem; line-height: 1.3; }