/* ============================================================
   Tokens de diseño del ecosistema Social Ecom — ÚNICA FUENTE.
   Lo enlazan los cuatro espacios: /, /org, /sf y /tareas.

   html[data-tema]   preset elegido por el perfil (claro, oscuro, negro-neon,
                     carbon-rojo, noche-lima, grafito, blanco-rojo, lavanda)
   html[data-theme]  polaridad light|dark que calcula theme.js a partir del
                     preset — así siguen valiendo los overrides
                     [data-theme="dark"] que ya existen en cada espacio.
   html[data-acento] "tema" = el acento propio del preset; o un override
                     explícito (mint, verde, azul, violeta, ambar, rosa).

   Orden de cascada (misma especificidad, gana el último):
   base :root → [data-theme="dark"] → presets [data-tema] → acentos.
   La tipografía es Poppins en todos los espacios (manual de marca).
   ============================================================ */

@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap;
  src: url("/static/fonts/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap;
  src: url("/static/fonts/Poppins-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap;
  src: url("/static/fonts/Poppins-Bold.ttf") format("truetype"); }

/* ── base: claro (preset "claro") ── */
:root {
  --accent: #7BEDC3; --accent-ink: #0E9E77; --on-accent: #0A2C20;
  --bg: #f5f6f8; --card: #ffffff; --border: #e4e7ec; --border-soft: #eef0f4;
  --text: #14181f; --muted: #6b7280; --head: #fafbfc;
  --hover: #fafbfd; --group-bg: #eef1f5; --subgroup-bg: #f6f8fa;
  --accent-text: var(--accent-ink);
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --ok: #16803c; --ok-soft: #dcfce7; --warn: #b45309; --warn-soft: #fef3c7;
  --bad: #b91c1c; --bad-soft: #fee2e2; --gray: #64748b;
  /* etapa RODAJE de Tareas (mismo azul de SocialTask): lo que se graba */
  --grabar: #0ea5e9;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --sidebar-w: 234px;
  /* estilos de tarjeta (html[data-tarjetas], abajo): el borde de vidrio es
     el acento que se apaga en diagonal; la línea fina usa --tarjeta-borde */
  --tarjeta-borde: var(--border);
  --vidrio-borde: linear-gradient(160deg, color-mix(in srgb, var(--accent) 55%, transparent), rgba(0, 0, 0, .07) 35%, rgba(0, 0, 0, .05));
  --vidrio-halo: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 8px 24px color-mix(in srgb, var(--accent) 28%, transparent);
  --flotante-sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .08);
}
[data-theme="dark"] {
  --bg: #0e1013; --card: #16191e; --border: #262b33; --border-soft: #1e232a;
  --text: #e7eaee; --muted: #98a1ad; --head: #191d23;
  --hover: #1b2027; --group-bg: #1d222a; --subgroup-bg: #191e25;
  --accent-text: var(--accent);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --ok: #4ade80; --ok-soft: #12291a; --warn: #fbbf24; --warn-soft: #2b2110;
  --bad: #f87171; --bad-soft: #2c1414;
  --shadow: none;
  --vidrio-borde: linear-gradient(160deg, color-mix(in srgb, var(--accent) 45%, transparent), rgba(255, 255, 255, .06) 35%, rgba(255, 255, 255, .03));
  --vidrio-halo: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 8px 28px color-mix(in srgb, var(--accent) 35%, transparent);
  --flotante-sombra: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 30px rgba(0, 0, 0, .55);
}

/* ── presets oscuros (van después de [data-theme="dark"]) ── */
/* Marca: negro + verde neón (el look de los informes /diagnostico).
   Desde 10/Oct/2026 = "Vidrio nocturno" del lab (Marca-luz sobre negro puro):
   el neón es LUZ (brillo de fondo, borde degradado y halo), nunca relleno
   grande. Tratamiento de componentes más abajo. DESIGN.md. */
[data-tema="negro-neon"] {
  --bg: #000000; --card: #0b0c0d; --border: #1e2022; --border-soft: #151617;
  --text: #f4f6f7; --muted: #8b9197; --head: #101112;
  --hover: #121415; --group-bg: #060707; --subgroup-bg: #050505;
  --accent: #02FEBF; --accent-ink: #00d9a4; --on-accent: #052e23;
  --accent-soft: color-mix(in srgb, #02FEBF 12%, transparent);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 30px rgba(0, 0, 0, .6);
}
/* Menta noche = "Medianoche" del lab (11/Oct/2026): azul noche, tarjetas
   planas que se separan por superficie; menta solo en lo activo */
[data-tema="oscuro"] {
  --bg: #0b0e15; --card: #121725; --border: #1f2638; --border-soft: #181e2d;
  --text: #e6e9f2; --muted: #8b93a7; --head: #151b2a;
  --hover: #171d2d; --group-bg: #0f1420; --subgroup-bg: #0d121c;
  --shadow: none;
}
/* Brasa = "Vidrio rojo" del lab (11/Oct/2026): negro puro con rojo */
[data-tema="carbon-rojo"] {
  --bg: #000000; --card: #0d0a0a; --border: #221616; --border-soft: #170f0f;
  --text: #f6f1f1; --muted: #9c9090; --head: #120d0d;
  --hover: #140f0f; --group-bg: #070505; --subgroup-bg: #060404;
  --accent: #ff2b2b; --accent-ink: #e11d2e; --on-accent: #ffffff;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 30px rgba(0, 0, 0, .6);
}
/* Musgo lima = "Vidrio lima" del lab (11/Oct/2026) */
[data-tema="noche-lima"] {
  --bg: #000000; --card: #0b0c0a; --border: #1e2019; --border-soft: #151612;
  --text: #f4f6f0; --muted: #8f978a; --head: #10110e;
  --hover: #12140f; --group-bg: #060705; --subgroup-bg: #050504;
  --accent: #c6ff00; --accent-ink: #a6d600; --on-accent: #0f1500;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 30px rgba(0, 0, 0, .6);
}
/* Pizarra = "Vidrio plata" del lab (11/Oct/2026) */
[data-tema="grafito"] {
  --bg: #050506; --card: #0e0f11; --border: #222429; --border-soft: #18191c;
  --text: #f2f3f5; --muted: #9497a0; --head: #131417;
  --hover: #141518; --group-bg: #09090a; --subgroup-bg: #070708;
  --accent: #d9dbe0; --accent-ink: #b8bcc5; --on-accent: #111318;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 30px rgba(0, 0, 0, .6);
}

/* ── presets claros ── */
/* Trazo rojo = "Suizo" del lab (11/Oct/2026): blanco puro, tarjetas con
   línea negra de 1 px, radios chicos. Las tablas conservan su gris. */
[data-tema="blanco-rojo"] {
  --bg: #ffffff; --card: #ffffff; --border: #e3e3e3; --border-soft: #eeeeee;
  --text: #0c0c0c; --muted: #555555; --head: #ffffff;
  --hover: #f6f6f6; --group-bg: #f2f2f2; --subgroup-bg: #f8f8f8;
  --tarjeta-borde: #0c0c0c;
  --accent: #e11d2e; --accent-ink: #b3111f; --on-accent: #ffffff;
  --accent-text: var(--accent-ink);
  --shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
/* Bruma lila = "Índigo" del lab (11/Oct/2026): lavanda con acento índigo */
[data-tema="lavanda"] {
  --bg: #eceaf5; --card: #ffffff; --border: #dcd8ec; --border-soft: #e6e3f1;
  --text: #1e1b33; --muted: #6b6786; --head: #f7f6fc;
  --hover: #f9f8fd; --group-bg: #e3e0f0; --subgroup-bg: #f1eff8;
  --accent: #5b4ef0; --accent-ink: #4a3ed8; --on-accent: #ffffff;
  --accent-text: var(--accent-ink);
  --accent-soft: #e4e0fd;
  --shadow: 0 1px 2px rgba(45, 42, 74, .06);
}

/* ── acentos explícitos: pisan el acento del preset ── */
[data-acento="mint"]    { --accent: #7BEDC3; --accent-ink: #0E9E77; --on-accent: #0A2C20; }
[data-acento="verde"]   { --accent: #22c55e; --accent-ink: #15803d; --on-accent: #05230f; }
[data-acento="azul"]    { --accent: #3b82f6; --accent-ink: #1d4ed8; --on-accent: #ffffff; }
[data-acento="violeta"] { --accent: #8b5cf6; --accent-ink: #6d28d9; --on-accent: #ffffff; }
[data-acento="ambar"]   { --accent: #f59e0b; --accent-ink: #b45309; --on-accent: #241303; }
[data-acento="rosa"]    { --accent: #ec4899; --accent-ink: #be185d; --on-accent: #ffffff; }
/* en oscuro el texto acentuado usa el acento vivo (ver base) */
[data-theme="dark"][data-acento] { --accent-text: var(--accent); }
[data-theme="dark"][data-acento="tema"] { --accent-text: var(--accent); }

/* ── modo (fondo) forzado por el perfil: SOLO superficies y tinta ──
   Van después de presets y acentos para pisar el fondo del preset sin
   tocar --accent: "Blanco rojo" en oscuro sigue siendo rojo sobre negro y
   "Negro neón" en claro sigue siendo verde neón sobre blanco. */
html[data-modo="oscuro"] {
  --bg: #0e1013; --card: #16191e; --border: #262b33; --border-soft: #1e232a;
  --text: #e7eaee; --muted: #98a1ad; --head: #191d23;
  --hover: #1b2027; --group-bg: #1d222a; --subgroup-bg: #191e25;
  --accent-text: var(--accent);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --ok: #4ade80; --ok-soft: #12291a; --warn: #fbbf24; --warn-soft: #2b2110;
  --bad: #f87171; --bad-soft: #2c1414;
  --shadow: none;
}
html[data-modo="claro"] {
  --bg: #f5f6f8; --card: #ffffff; --border: #e4e7ec; --border-soft: #eef0f4;
  --text: #14181f; --muted: #6b7280; --head: #fafbfc;
  --hover: #fafbfd; --group-bg: #eef1f5; --subgroup-bg: #f6f8fa;
  --accent-text: var(--accent-ink);
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --ok: #16803c; --ok-soft: #dcfce7; --warn: #b45309; --warn-soft: #fef3c7;
  --bad: #b91c1c; --bad-soft: #fee2e2;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* ── brillo de fondo (prefs.brillo; theme.js pone html[data-brillo]) ──
   Canon: informes /diagnostico. Capa fija detrás de todo con el color del
   acento: el fondo del body se pinta en el lienzo y esta capa va encima de
   él y debajo del contenido. No aplica con fondo con imagen (ya tiene capa).
   "suave" es el del Neón; "fuerte" lo sube para quien lo quiera notar. */
html[data-brillo]:not([data-brillo="no"]):not([data-fondo])::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* --b sin declarar aquí: así el "fuerte" de abajo no pierde por especificidad */
  background:
    radial-gradient(720px 420px at 12% -80px, color-mix(in srgb, var(--accent) var(--b, 8%), transparent), transparent 62%),
    radial-gradient(880px 520px at 92% 12%, color-mix(in srgb, var(--accent) calc(var(--b, 8%) * .45), transparent), transparent 60%),
    radial-gradient(760px 560px at 50% 110%, color-mix(in srgb, var(--accent) calc(var(--b, 8%) * .7), transparent), transparent 65%);
}
html[data-brillo="fuerte"] { --b: 22%; }
@media print { html::before { display: none !important; } }

/* ── alias para las SPAs (SocialFlow en /sf, SocialTask en /tareas) ──
   Solo aplican cuando theme.js puso data-tema; en el dev local sin la
   plataforma cada SPA conserva sus tokens propios. */
html[data-tema] {
  --surface: var(--card); --surface-2: var(--head); --bg-2: var(--group-bg);
  --ink: var(--text); --ink-2: var(--muted);
  --ink-3: color-mix(in srgb, var(--muted) 70%, transparent);
  --chip-ink: var(--text);
  --danger-soft: var(--bad-soft); --danger-ink: var(--bad);
  --ok-ink: var(--ok); --warn-ink: var(--warn);
  --card-ink: var(--text); --card-ink-2: var(--muted);
  --radius: 14px; --radius-sm: 10px;
  color-scheme: light;
}
html[data-tema][data-theme="dark"] { color-scheme: dark; }

/* ── esquinas: radio propio de cada plantilla y override del perfil ──
   (prefs.esquinas; theme.js pone html[data-esquinas] solo si la persona
   eligió algo distinto de "del tema"). Van después del alias de arriba. */
html[data-tema="oscuro"] { --radius: 12px; --radius-sm: 8px; }
html[data-tema="negro-neon"], html[data-tema="carbon-rojo"],
html[data-tema="noche-lima"], html[data-tema="grafito"] { --radius: 20px; --radius-sm: 14px; }
html[data-tema="blanco-rojo"] { --radius: 6px; --radius-sm: 4px; }
html[data-tema="lavanda"] { --radius: 16px; --radius-sm: 10px; }
html[data-esquinas="rectas"]   { --radius: 6px;  --radius-sm: 4px; }
html[data-esquinas="normales"] { --radius: 14px; --radius-sm: 10px; }
html[data-esquinas="redondas"] { --radius: 22px; --radius-sm: 16px; }
html[data-esquinas] .card { border-radius: var(--radius); }

/* ── estilo de tarjetas (prefs.tarjetas; theme.js pone html[data-tarjetas]
   con el de la plantilla o el que eligió la persona). Aquí la .card común;
   las tarjetas propias de cada espacio (tarea, marca) y la barra móvil
   repiten el mismo selector en su CSS. Sin atributo = el estilo clásico.
   vidrio: borde del acento que se apaga en diagonal + halo en el botón
   linea: línea fina (--tarjeta-borde) sin sombra
   flotante: sin borde, sombra suave · plana: sin borde ni sombra */
html[data-tarjetas="vidrio"] .card {
  border: 1px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--vidrio-borde) border-box;
  box-shadow: var(--shadow);
}
html[data-tarjetas="vidrio"] button.primary,
html[data-tarjetas="vidrio"] .btn-primary { box-shadow: var(--vidrio-halo); }
html[data-tarjetas="linea"] .card { border: 1px solid var(--tarjeta-borde); box-shadow: none; }
html[data-tarjetas="flotante"] .card { border: 1px solid transparent; box-shadow: var(--flotante-sombra); }
html[data-tarjetas="plana"] .card { border: 1px solid transparent; box-shadow: none; }

/* ── fondos con imagen (prefs.fondo; theme.js pone html[data-fondo]) ──
   Uno por preset, con los colores de su plantilla. Solo definen QUÉ imagen
   y QUÉ velo lleva cada fondo; la capa que los pinta (.fondo-capa) vive en
   el espacio que la use (hoy /org). El velo oscurece o aclara la foto para
   que el texto fuera de las tarjetas lea. Variantes (mismas media queries
   que SocialTema.varianteFondo): <slug>.webp 1920×1080 · <slug>-4k.webp
   3840×2160 (retina / pantallas anchas) · <slug>-m.webp 1080×1920. */
html[data-fondo="claro"]       { --fondo-img: url("/static/fondos/claro.webp?v=20261012"); }
html[data-fondo="oscuro"]      { --fondo-img: url("/static/fondos/oscuro.webp?v=20261012"); }
html[data-fondo="negro-neon"]  { --fondo-img: url("/static/fondos/negro-neon.webp?v=20261012"); }
html[data-fondo="carbon-rojo"] { --fondo-img: url("/static/fondos/carbon-rojo.webp?v=20261012"); }
html[data-fondo="noche-lima"]  { --fondo-img: url("/static/fondos/noche-lima.webp?v=20261012"); }
html[data-fondo="grafito"]     { --fondo-img: url("/static/fondos/grafito.webp?v=20261012"); }
html[data-fondo="blanco-rojo"] { --fondo-img: url("/static/fondos/blanco-rojo.webp?v=20261012"); }
html[data-fondo="lavanda"]     { --fondo-img: url("/static/fondos/lavanda.webp?v=20261012"); }
@media (min-width: 1000px) and (min-resolution: 1.5dppx), (min-width: 2200px) {
  html[data-fondo="claro"]       { --fondo-img: url("/static/fondos/claro-4k.webp?v=20261012"); }
  html[data-fondo="oscuro"]      { --fondo-img: url("/static/fondos/oscuro-4k.webp?v=20261012"); }
  html[data-fondo="negro-neon"]  { --fondo-img: url("/static/fondos/negro-neon-4k.webp?v=20261012"); }
  html[data-fondo="carbon-rojo"] { --fondo-img: url("/static/fondos/carbon-rojo-4k.webp?v=20261012"); }
  html[data-fondo="noche-lima"]  { --fondo-img: url("/static/fondos/noche-lima-4k.webp?v=20261012"); }
  html[data-fondo="grafito"]     { --fondo-img: url("/static/fondos/grafito-4k.webp?v=20261012"); }
  html[data-fondo="blanco-rojo"] { --fondo-img: url("/static/fondos/blanco-rojo-4k.webp?v=20261012"); }
  html[data-fondo="lavanda"]     { --fondo-img: url("/static/fondos/lavanda-4k.webp?v=20261012"); }
}
@media (max-width: 720px) {
  html[data-fondo="claro"]       { --fondo-img: url("/static/fondos/claro-m.webp?v=20261012"); }
  html[data-fondo="oscuro"]      { --fondo-img: url("/static/fondos/oscuro-m.webp?v=20261012"); }
  html[data-fondo="negro-neon"]  { --fondo-img: url("/static/fondos/negro-neon-m.webp?v=20261012"); }
  html[data-fondo="carbon-rojo"] { --fondo-img: url("/static/fondos/carbon-rojo-m.webp?v=20261012"); }
  html[data-fondo="noche-lima"]  { --fondo-img: url("/static/fondos/noche-lima-m.webp?v=20261012"); }
  html[data-fondo="grafito"]     { --fondo-img: url("/static/fondos/grafito-m.webp?v=20261012"); }
  html[data-fondo="blanco-rojo"] { --fondo-img: url("/static/fondos/blanco-rojo-m.webp?v=20261012"); }
  html[data-fondo="lavanda"]     { --fondo-img: url("/static/fondos/lavanda-m.webp?v=20261012"); }
}
html[data-fondo] { --fondo-velo: linear-gradient(rgba(5, 7, 9, .26), rgba(5, 7, 9, .48)); }
html[data-fondo="claro"], html[data-fondo="blanco-rojo"], html[data-fondo="lavanda"] {
  --fondo-velo: linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .38)); }
/* ── fondos animados (12/Oct/2026): 0 KB, teñidos con el acento del tema ──
   Clases que sirven igual para la capa del Inicio (.fondo-capa) y para la
   miniatura de Apariencia. Movimiento lento y nunca protagonista (Linear,
   Stripe, Vercel). Hilos y Polvo son canvas: static/fondos-animados.js.
   Sin foto no hay velo; --fx baja la intensidad en los temas claros. */
html[data-fondo="aurora"], html[data-fondo="malla"], html[data-fondo="rejilla"],
html[data-fondo="hilos"], html[data-fondo="polvo"] { --fondo-velo: none; --fondo-img: none; }
:root { --fx: 1; --fx-grano: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>"); }
[data-theme="light"] { --fx: .75; }
.fx-aurora, .fx-malla, .fx-rejilla, .fx-hilos, .fx-polvo { position: relative; overflow: hidden; background-color: var(--bg); isolation: isolate; }
/* grano sutil encima: el degradado no se ve "lavado" */
.fx-aurora::after, .fx-malla::after, .fx-rejilla::after, .fx-hilos::after, .fx-polvo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: var(--fx-grano); opacity: .06; mix-blend-mode: overlay; }

/* 1. Aurora viva: tres manchas que se desplazan en un ciclo de 40 s */
@property --ax { syntax: "<percentage>"; inherits: false; initial-value: 15% }
@property --ay { syntax: "<percentage>"; inherits: false; initial-value: 10% }
@property --bx { syntax: "<percentage>"; inherits: false; initial-value: 85% }
@property --by { syntax: "<percentage>"; inherits: false; initial-value: 80% }
.fx-aurora { background:
  radial-gradient(45% 55% at var(--ax) var(--ay), color-mix(in srgb, var(--accent) calc(26% * var(--fx)), transparent), transparent 70%),
  radial-gradient(40% 50% at var(--bx) var(--by), color-mix(in srgb, var(--accent) calc(18% * var(--fx)), transparent), transparent 70%),
  radial-gradient(35% 40% at 60% 30%, color-mix(in srgb, var(--accent) calc(10% * var(--fx)), transparent), transparent 70%), var(--bg);
  animation: fx-aurora 40s ease-in-out infinite alternate; }
@keyframes fx-aurora { 50% { --ax: 40%; --ay: 30%; --bx: 60%; --by: 95% } 100% { --ax: 10%; --ay: 45%; --bx: 90%; --by: 55% } }

/* 2. Malla de luz: degradado cónico que gira en 90 s y respira cada 16 s */
.fx-malla::before { content: ""; position: absolute; inset: -50%; z-index: 0; filter: blur(60px);
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg,
    color-mix(in srgb, var(--accent) calc(22% * var(--fx)), transparent) 60deg, transparent 140deg,
    color-mix(in srgb, var(--accent) calc(12% * var(--fx)), transparent) 230deg, transparent 320deg);
  animation: fx-girar 90s linear infinite, fx-respirar 16s ease-in-out infinite; }
@keyframes fx-girar { to { transform: rotate(1turn) } }
@keyframes fx-respirar { 50% { opacity: .7 } }

/* 3. Rejilla con barrido: puntos finos y un haz del acento cada 12 s */
.fx-rejilla { background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text) 14%, transparent) 1px, transparent 1.4px);
  background-size: 22px 22px; }
.fx-rejilla::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .55;
  background-image: radial-gradient(circle at 1px 1px, var(--accent) 1.2px, transparent 1.6px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 48%, #000 52%, transparent 70%);
  mask-image: linear-gradient(100deg, transparent 30%, #000 48%, #000 52%, transparent 70%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; animation: fx-barrido 12s ease-in-out infinite; }
@keyframes fx-barrido { from { -webkit-mask-position: 120% 0; mask-position: 120% 0 } to { -webkit-mask-position: -20% 0; mask-position: -20% 0 } }

/* 4-5. Hilos y Polvo: los pinta fondos-animados.js en un <canvas>; esta
   capa CSS es la miniatura y lo que se ve si el JS no carga */
.fx-hilos { background:
  radial-gradient(120% 60% at 50% 55%, color-mix(in srgb, var(--accent) calc(12% * var(--fx)), transparent), transparent 60%), var(--bg); }
.fx-polvo { background:
  radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--accent) 55%, transparent) 0 1px, transparent 2px),
  radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--accent) 40%, transparent) 0 1px, transparent 2px),
  radial-gradient(circle at 45% 80%, color-mix(in srgb, var(--accent) 30%, transparent) 0 1px, transparent 2px), var(--bg);
  background-size: 90px 70px, 130px 110px, 70px 90px, auto; }
.fx-hilos canvas, .fx-polvo canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

/* movimiento (prefs.movimiento): "Al entrar" anima 18 s y se queda quieto;
   "Ninguno" deja el primer cuadro; reducir movimiento lo apaga siempre */
html[data-movimiento="entrada"] .fx-aurora, html[data-movimiento="entrada"] .fx-malla::before,
html[data-movimiento="entrada"] .fx-rejilla::before {
  animation-duration: 18s; animation-iteration-count: 1; animation-fill-mode: forwards; }
html[data-movimiento="ninguno"] .fx-aurora, html[data-movimiento="ninguno"] .fx-malla::before,
html[data-movimiento="ninguno"] .fx-rejilla::before,
html.pausa .fx-aurora, html.pausa .fx-malla::before, html.pausa .fx-rejilla::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .fx-aurora, .fx-malla::before, .fx-rejilla::before { animation: none !important; } }

/* ── capa del fondo (compartida: Inicio del Organizador y Tareas) ──
   Va DESPUÉS de los .fx-* para que su position: fixed gane.
   Una capa fija detrás de todo con la foto (theme.css dice cuál) y un
   velo; entra con fundido cuando la imagen ya cargó. El movimiento es
   solo transform (compositor, CPU ≈ 0), se pausa con la pestaña oculta y
   se apaga si el sistema pide "reducir movimiento". Sin backdrop-filter:
   las superficies van al 90 % y la foto asoma igual. */
.fondo-capa { position: fixed; inset: -4%; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .8s ease; }
html[data-fondo-tipo="foto"] .fondo-capa {
  background: var(--fondo-velo, none), var(--fondo-img, none) center / cover no-repeat; }
.fondo-capa.lista { opacity: 1; }
/* paneo sistemático: la foto va un 8 % más grande (fija, nunca cambia de
   forma) y la cámara se desplaza en línea recta de lado a lado, a
   velocidad constante, ida y vuelta. Sin zoom: la imagen no "respira". */
@keyframes paseo {
  from { transform: scale(1.08) translate3d(-2.6%, -0.6%, 0); }
  to   { transform: scale(1.08) translate3d(2.6%, 0.6%, 0); } }
html[data-fondo-tipo="foto"][data-movimiento="suave"] .fondo-capa.lista {
  animation: paseo 40s linear infinite alternate; will-change: transform; }
html[data-fondo-tipo="foto"][data-movimiento="entrada"] .fondo-capa.lista.anima {
  animation: paseo 18s linear 1 forwards; will-change: transform; }
/* animados (theme.css .fx-* y fondos-animados.js): la capa ocupa justo
   la pantalla y el movimiento lo pone cada animación, no el paneo */
html[data-fondo-tipo="css"] .fondo-capa, html[data-fondo-tipo="canvas"] .fondo-capa { inset: 0; }
html.pausa .fondo-capa { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .fondo-capa { animation: none !important; } }