/* ==========================================================================
   Modo noche. Botón luna/sol [data-theme-toggle].
   En la home lo dirige la portada (reacción → vídeo que oscurece → título de noche);
   html.th-night = lo que ha pedido el visitante (el icono cambia al momento);
   html[data-theme="dark"] = colores de noche (en la home llegan a mitad del vídeo).
   ========================================================================== */
.th-btn { appearance: none; border: 0; padding: 0; background: none; color: inherit; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; transition: background .2s ease; }
.th-btn:hover { background: rgba(127, 140, 160, .16); }
.th-btn:focus-visible { outline: 2px solid var(--select, #0d99ff); outline-offset: 2px; }
.th-btn svg { grid-area: 1 / 1; width: 20px; height: 20px; transition: opacity .45s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.th-sun { opacity: 0; transform: rotate(-90deg) scale(.55); }
html.th-night .th-moon { opacity: 0; transform: rotate(90deg) scale(.55); }
html.th-night .th-sun { opacity: 1; transform: none; }
.th-m { position: absolute; right: 50px; top: 10px; width: 44px; height: 44px; color: var(--pv-ink, currentColor); }   /* móvil: a la izquierda del menú */
@media (min-width: 900px) { .th-m { display: none; } }
/* móvil: sin modo noche (de momento) */
@media (max-width: 899px) { [data-theme-toggle] { display: none !important; } }

/* el cambio de color de la interfaz de la portada acompaña al vídeo */
.pvp header.top, .pvp .pv-radio, .pv-sway img { transition: color 1.1s ease, background-color 1.1s ease, border-color 1.1s ease, filter 2s ease; }
/* fondos de la página: nunca cambian de golpe (en móvil asoman alrededor de la portada) */
html, body, .zoom, .viewport, .canvas-white, .artboard, .ios-top { transition: background-color 1.4s ease; }

/* ---------- colores de noche (del vídeo: fondo #050b18 → #0c1224) ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070d1b; --ink: #edf0f6; --muted: #a4aec2; --soft: #8f99ad; --line: #222c42; --off: #3a4560; --tint: #111a2c; --accent: #6aa8ff;
  --canvas: #050913; --panel: #101827; --panel-line: #202a3f; --panel-ink: #e5e8ef; --panel-muted: #8992a6; --field: #19223a;
  --grid: rgba(90, 170, 210, .12); --select-soft: rgba(13, 153, 255, .18);
}
html[data-theme="dark"] .page.pvp { --pv-ink: #f1f3f8; }
html[data-theme="dark"] .pv-glass { display: none; }
html[data-theme="dark"] .pv-sway img { filter: brightness(.42) saturate(.75); }
html[data-theme="dark"] .pv-radio { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .22); color: #f1f3f8; }
html[data-theme="dark"] .pv-radio:hover { background: rgba(255, 255, 255, .13); }
html[data-theme="dark"] .pv-radio.pv-float, html[data-theme="dark"] .cb-radio { background: rgba(14, 21, 38, .86) !important; border-color: rgba(255, 255, 255, .12) !important; color: #f1f3f8 !important; box-shadow: 0 6px 24px rgba(0, 0, 0, .35) !important; }
html[data-theme="dark"] .pv-radio:focus-visible { outline-color: #f1f3f8; }
html[data-theme="dark"] .pv-menu-list { background: rgba(14, 21, 38, .92); border-color: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .pv-round img, html[data-theme="dark"] .pvp .lang-btn img { filter: invert(1); }
html[data-theme="dark"] .pv-nl.sh-li path { fill: #070d1b; }
html[data-theme="dark"] .hola-n { color: #6aa8ff; }
html[data-theme="dark"] .ios-top, html[data-theme="dark"] .sub { background: var(--bg); }
html[data-theme="dark"] .foot { background: #03060d; }
html[data-theme="dark"] .lang-menu { background: #101827; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .lang-menu li:hover, html[data-theme="dark"] .lang-menu li:focus-visible,
html[data-theme="dark"] .pv-menu-list a:hover, html[data-theme="dark"] .pv-menu-list a:focus-visible { background: #1a2338; }
html[data-theme="dark"] .logo, html[data-theme="dark"] .pj-logo { filter: brightness(0) invert(1); }
html[data-theme="dark"] .gifs figure { background: #111a2c; }
html[data-theme="dark"] .toolbar { box-shadow: 0 2px 10px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06); }
html[data-theme="dark"] .note { background: #221b38; }
html[data-theme="dark"] .layer.kid { color: #b7bfcd; }
html[data-theme="dark"] .mani { --m-on: #9aa6bb; --m-off: #222c45; --m-ink: #f2f4f8; }
html[data-theme="dark"] .yb { --yb-ink: #edf0f6; --yb-mut: #a4aec2; --yb-off: #27324c; }
html[data-theme="dark"] .tg line { stroke: rgba(230, 236, 248, .55); }
html[data-theme="dark"] .tg line.dim { stroke: rgba(230, 236, 248, .14); }
html[data-theme="dark"] .tg line.kid { stroke: rgba(230, 236, 248, .42); }
html[data-theme="dark"] .tg-t { background: #161f36; }
html[data-theme="dark"] .tg-t:not(.tg-k):not(.tg-on):hover { background: #1f2943; }
html[data-theme="dark"] .tg-hub, html[data-theme="dark"] .tg-t.tg-on { color: var(--bg); }
html[data-theme="dark"] .pj-card { background: radial-gradient(1100px 290px at 243px 130px, #162039, #0e1628); }
html[data-theme="dark"] .trab-box { background: #0f1729; }
html[data-theme="dark"] .case .ph { background: repeating-linear-gradient(135deg, #111a2c 0 10px, #151e33 10px 20px); }