/* =====================================================================
   Panel 209 · El fondo del panel (Ajustes → Fondo, y el de cada persona en «Mi cuenta»).
   ---------------------------------------------------------------------
   Lo pinta body::before (como siempre), con lo que diga js/marca.js:
     html[data-fondo] = consulta | foto | abstracto-<id> | ninguno
     --fondo-img        la foto subida (si es «foto»)
     --fondo-intensidad 0–1, lo que se ve
     --fondo-desenfoque px
   Cada estilo dice cuánto lo deja ver con --foto-factor (y su color con --foto-saturacion
   y --foto-brillo): el cristal necesita algo detrás; «Claro» lo quiere suave; «Cuaderno»
   no lo pinta nunca (es papel).
   Los abstractos son degradados en el color de la consulta y su acento: no pesan nada y
   cambian solos si cambia el color.
   ===================================================================== */

:root {
  /* Aurora: cintas de luz que cruzan en diagonal. */
  --abs-aurora:
    radial-gradient(60% 40% at 18% 22%, color-mix(in oklab, var(--marca) 60%, #fff) 0%, transparent 70%),
    radial-gradient(55% 35% at 70% 30%, color-mix(in oklab, color-mix(in oklab, var(--marca) 50%, #b9a6ff) 60%, #fff) 0%, transparent 70%),
    radial-gradient(70% 45% at 40% 78%, color-mix(in oklab, var(--acento) 70%, #fff) 0%, transparent 70%),
    radial-gradient(50% 40% at 92% 85%, color-mix(in oklab, color-mix(in oklab, var(--marca) 60%, #7fd6d0) 60%, #fff) 0%, transparent 70%),
    linear-gradient(160deg, color-mix(in oklab, var(--marca) 22%, #fff), color-mix(in oklab, var(--acento) 30%, #fff));
  /* Seda: pliegues suaves, como una tela que cae. */
  --abs-seda:
    linear-gradient(115deg, transparent 0 18%, color-mix(in oklab, var(--marca) 45%, transparent) 28%, transparent 40%,
                    color-mix(in oklab, var(--marca) 30%, #fff) 52%, transparent 64%, color-mix(in oklab, var(--acento) 55%, transparent) 76%, transparent 90%),
    linear-gradient(200deg, color-mix(in oklab, var(--marca) 18%, #fff), color-mix(in oklab, var(--marca) 40%, #fff));
  /* Ondas: capas que se solapan como olas lejanas. */
  --abs-ondas:
    radial-gradient(120% 60% at 50% 115%, color-mix(in oklab, var(--marca) 60%, #fff) 0 40%, transparent 41%),
    radial-gradient(120% 60% at 20% 100%, color-mix(in oklab, var(--marca) 50%, #fff) 0 45%, transparent 46%),
    radial-gradient(120% 60% at 85% 90%, color-mix(in oklab, var(--acento) 70%, transparent) 0 45%, transparent 46%),
    linear-gradient(180deg, color-mix(in oklab, var(--marca) 10%, #fff), color-mix(in oklab, var(--marca) 30%, #fff));
  /* Burbujas: círculos de luz desenfocados (bokeh). */
  --abs-burbujas:
    radial-gradient(9% 12% at 14% 26%, color-mix(in oklab, var(--marca) 75%, transparent) 0 60%, transparent 62%),
    radial-gradient(14% 18% at 78% 18%, color-mix(in oklab, var(--acento) 80%, transparent) 0 60%, transparent 62%),
    radial-gradient(7% 9% at 60% 62%, color-mix(in oklab, var(--marca) 60%, #fff) 0 60%, transparent 62%),
    radial-gradient(18% 24% at 30% 82%, color-mix(in oklab, var(--marca) 45%, transparent) 0 60%, transparent 62%),
    radial-gradient(11% 14% at 90% 74%, color-mix(in oklab, var(--marca) 65%, #b9a6ff) 0 60%, transparent 62%),
    linear-gradient(150deg, color-mix(in oklab, var(--marca) 14%, #fff), color-mix(in oklab, var(--acento) 22%, #fff));
  /* Atardecer: horizonte cálido con un sol bajo. */
  --abs-atardecer:
    radial-gradient(22% 30% at 70% 64%, color-mix(in oklab, var(--acento) 90%, #fff) 0 55%, transparent 58%),
    linear-gradient(180deg, color-mix(in oklab, var(--marca) 55%, #fff) 0%, color-mix(in oklab, var(--acento) 55%, #fff) 62%,
                    color-mix(in oklab, var(--marca) 55%, #fff) 63%, color-mix(in oklab, var(--marca) 30%, #fff) 100%);
}

/* La foto (de la consulta o subida). Más específico que lo de cada estilo (suave, tema oscuro…), y cargado
   antes que los estilos nuevos para que ellos puedan quitarlo (Cuaderno). */
html[data-fondo][data-estilo] body::before,
html[data-fondo] body::before {
  background: var(--fondo-img, var(--foto-fondo, url("../img/sala.webp"))) center 45% / cover no-repeat;
  opacity: calc(var(--fondo-intensidad, var(--foto-opacidad, .3)) * var(--foto-factor, 1));
  filter: blur(var(--fondo-desenfoque, var(--foto-desenfoque, 5px))) saturate(var(--foto-saturacion, .75)) brightness(var(--foto-brillo, 1));
}
html[data-theme="dark"] { --foto-brillo: .6; --foto-saturacion: .6; }
html[data-fondo="ninguno"][data-estilo] body::before, html[data-fondo="ninguno"] body::before { display: none; }

/* Los abstractos: más vivos (son decoración, no una foto) y siempre muy difuminados. */
html[data-fondo^="abstracto"][data-estilo] body::before, html[data-fondo^="abstracto"] body::before {
  opacity: calc(var(--fondo-intensidad, .55) * var(--foto-factor, 1));
  filter: blur(calc(var(--fondo-desenfoque, 0px) + 36px)) saturate(1.05) brightness(var(--foto-brillo, 1));
  -webkit-mask-image: none; mask-image: none;
}
html[data-fondo="abstracto-aurora"] body::before { background: var(--abs-aurora); }
html[data-fondo="abstracto-seda"] body::before { background: var(--abs-seda); }
html[data-fondo="abstracto-ondas"] body::before { background: var(--abs-ondas); }
html[data-fondo="abstracto-burbujas"] body::before { background: var(--abs-burbujas); filter: blur(calc(var(--fondo-desenfoque, 0px) + 18px)) brightness(var(--foto-brillo, 1)); }
html[data-fondo="abstracto-atardecer"] body::before { background: var(--abs-atardecer); }
@media (max-width: 860px) {
  html[data-fondo^="abstracto"] body::before { filter: blur(calc(var(--fondo-desenfoque, 0px) + 24px)) brightness(var(--foto-brillo, 1)); }
}

/* Las miniaturas del selector (las de antes; desde el 217 el selector usa la capa viva en pequeño). */
.fondo-abs-aurora { background: var(--abs-aurora); }
.fondo-abs-seda { background: var(--abs-seda); }
.fondo-abs-ondas { background: var(--abs-ondas); }
.fondo-abs-burbujas { background: var(--abs-burbujas); }
.fondo-abs-atardecer { background: var(--abs-atardecer); }

/* =====================================================================
   Panel 217 · Los fondos abstractos se mueven (como la web de Astra).
   Panel 220 · Más vivos y que se vean (José Carlos, 11/10): más rápidos, recorridos más largos y colores
   más llenos; las ondas fluyen de verdad y las burbujas suben meciéndose.
   ---------------------------------------------------------------------
   Una capa aparte, <div class="fondo-vivo fv-<id>"> con sus piezas (la pone js/marca.js), sustituye a
   body::before. Cada pieza solo se desplaza, gira o cambia de tamaño (transform/translate): lo hace la
   tarjeta gráfica sin repintar nada. Los tamaños van en % de la capa, así la misma capa sirve en pequeño
   para las miniaturas del selector (.fv-mini).
   Va a 24 imágenes por segundo (steps por tramo = segundos del tramo × 24): fluido para el ojo y menos de la
   mitad de dibujos que a 60, que importa porque el cristal de las tarjetas (backdrop-filter) se recalcula en
   cada dibujo. Todas las piezas saltan a la vez (tramos con segundos × 24 exactos y retrasos en segundos
   enteros): si no, cada una pediría sus propios dibujos. Medido en Chromium: 72 dibujos en 3 s cada fondo.
   Lo que se ve: su propio factor por estilo (--vivo-factor), no el de la foto (que en Medianoche y Claro lo
   dejaba casi invisible). En oscuro, una paleta oscura de verdad con las formas luminosas, en vez de
   oscurecer con un velo negro.
   Quieto con «reducir movimiento» del sistema o si se apaga «Fondo en movimiento» (html.fondo-quieto,
   por dispositivo). La intensidad y el desenfoque de Ajustes funcionan igual.
   ===================================================================== */
.fondo-vivo {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict;
  opacity: min(1, calc(var(--fondo-intensidad, .55) * var(--vivo-factor, 1.5)));
  /* Colores de las formas y del fondo, en el color de la consulta y su acento. */
  --fv-c1: color-mix(in oklab, var(--marca) 88%, #fff);
  --fv-c2: color-mix(in oklab, var(--acento) 88%, #fff);
  --fv-c3: color-mix(in oklab, color-mix(in oklab, var(--marca) 55%, #8f7bff) 88%, #fff);
  --fv-c4: color-mix(in oklab, color-mix(in oklab, var(--marca) 55%, #3fc6bd) 88%, #fff);
  --fv-b1: color-mix(in oklab, var(--marca) 10%, #fff);
  --fv-b2: color-mix(in oklab, var(--acento) 16%, #fff);
  --fv-brillo: rgb(255 255 255 / .55);
  --fv-nube: rgb(255 255 255 / .8);
  --fv-destello: rgb(255 255 255 / .75);
}
html[data-theme="dark"] .fondo-vivo {
  --vivo-factor: 1.45;
  --fv-c1: color-mix(in oklab, var(--marca) 90%, #fff);
  --fv-c2: color-mix(in oklab, var(--acento) 90%, #fff);
  --fv-c3: color-mix(in oklab, var(--marca) 50%, #8f7bff);
  --fv-c4: color-mix(in oklab, var(--marca) 50%, #3fc6bd);
  --fv-b1: color-mix(in oklab, var(--marca) 16%, #0a0e1a);
  --fv-b2: color-mix(in oklab, var(--acento) 12%, #070a12);
  --fv-brillo: rgb(255 255 255 / .22);
  --fv-nube: rgb(255 255 255 / .28);
  --fv-destello: rgb(255 255 255 / .38);
}
/* En oscuro, un velo muy ligero (antes era el de la foto y lo apagaba). */
.fondo-vivo::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / calc((1 - var(--foto-brillo, 1)) * .3)); }
html[data-fondo-blur] .fondo-vivo:not(.fv-mini) { filter: blur(var(--fondo-desenfoque, 0px)); }
.fondo-vivo i { position: absolute; display: block; will-change: transform; }
html.fondo-con-vida[data-fondo^="abstracto"][data-estilo] body::before,
html.fondo-con-vida[data-fondo^="abstracto"] body::before { display: none; }
html[data-estilo="suave"][data-tema="cuaderno"] .fondo-vivo:not(.fv-mini) { display: none; }    /* Cuaderno es papel */
/* Cuánto se ve cada estilo: Claro y Calma lo quieren más suave. */
html[data-estilo="suave"][data-tema="claro"] .fondo-vivo { --vivo-factor: 1.1; }
html[data-estilo="suave"][data-tema="calma"] .fondo-vivo { --vivo-factor: 1.15; }
html.fondo-quieto .fondo-vivo:not(.fv-mini) i, html.fondo-quieto .fondo-vivo:not(.fv-mini) i::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .fondo-vivo i, .fondo-vivo i::before { animation: none !important; } }

/* Aurora: cuatro manchas de luz grandes que cruzan media pantalla y una cinta que ondea en diagonal. */
.fv-aurora { background: linear-gradient(160deg, var(--fv-b1), var(--fv-b2)); }
.fv-aurora i:nth-child(1) { left: -14%; top: -20%; width: 72%; height: 66%; animation: fv-a1 18s steps(108) infinite alternate;
  background: radial-gradient(closest-side, var(--fv-c1), transparent); }
.fv-aurora i:nth-child(2) { right: -18%; top: -8%; width: 66%; height: 60%; animation: fv-a2 22s steps(132) infinite alternate;
  background: radial-gradient(closest-side, var(--fv-c3), transparent); }
.fv-aurora i:nth-child(3) { left: 2%; bottom: -30%; width: 80%; height: 66%; animation: fv-a3 26s steps(156) infinite alternate;
  background: radial-gradient(closest-side, var(--fv-c2), transparent); }
.fv-aurora i:nth-child(4) { right: -16%; bottom: -22%; width: 60%; height: 58%; animation: fv-a4 20s steps(120) infinite alternate;
  background: radial-gradient(closest-side, var(--fv-c4), transparent); }
.fv-aurora i:nth-child(5) { left: -25%; top: 24%; width: 150%; height: 36%; opacity: .85; animation: fv-a5 14s steps(84) infinite alternate;
  background: radial-gradient(50% 50% at 50% 50%, var(--fv-c1), transparent 72%); }
@keyframes fv-a1 { 0% { transform: translate3d(0, 0, 0) scale(1); } 25% { transform: translate3d(28%, 18%, 0) scale(1.2); }
  50% { transform: translate3d(46%, 36%, 0) scale(1.32); } 75% { transform: translate3d(22%, 52%, 0) scale(1.1); } 100% { transform: translate3d(-8%, 30%, 0) scale(.92); } }
@keyframes fv-a2 { 0% { transform: translate3d(0, 0, 0) scale(1); } 25% { transform: translate3d(-26%, 24%, 0) scale(1.18); }
  50% { transform: translate3d(-48%, 10%, 0) scale(1.3); } 75% { transform: translate3d(-30%, -18%, 0) scale(1.08); } 100% { transform: translate3d(-8%, -30%, 0) scale(.9); } }
@keyframes fv-a3 { 0% { transform: translate3d(0, 0, 0) scale(1); } 25% { transform: translate3d(30%, -20%, 0) scale(1.12); }
  50% { transform: translate3d(12%, -40%, 0) scale(1.28); } 75% { transform: translate3d(-24%, -22%, 0) scale(1.06); } 100% { transform: translate3d(-36%, 4%, 0) scale(.94); } }
@keyframes fv-a4 { 0% { transform: translate3d(0, 0, 0) scale(1); } 25% { transform: translate3d(-28%, -14%, 0) scale(1.2); }
  50% { transform: translate3d(-46%, -36%, 0) scale(1.34); } 75% { transform: translate3d(-20%, -48%, 0) scale(1.12); } 100% { transform: translate3d(8%, -22%, 0) scale(.96); } }
@keyframes fv-a5 { 0% { transform: rotate(-20deg) translate3d(-12%, 0, 0) scaleY(.8); } 25% { transform: rotate(-9deg) translate3d(-2%, 10%, 0) scaleY(1.45); }
  50% { transform: rotate(-24deg) translate3d(10%, -8%, 0) scaleY(.7); } 75% { transform: rotate(-6deg) translate3d(4%, 14%, 0) scaleY(1.3); } 100% { transform: rotate(-16deg) translate3d(-8%, 4%, 0) scaleY(1); } }

/* Seda: tres pliegues que barren la pantalla y se ondulan, como una tela al viento. */
.fv-seda { background: linear-gradient(200deg, var(--fv-b1), var(--fv-b2)); }
.fv-seda i { left: -35%; width: 170%; }
.fv-seda i:nth-child(1) { top: 4%; height: 46%; animation: fv-s1 18s steps(108) infinite alternate;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--fv-c1) 80%, transparent) 50%, transparent); }
.fv-seda i:nth-child(2) { top: 42%; height: 40%; animation: fv-s2 24s steps(144) infinite alternate;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--fv-c2) 85%, transparent) 50%, transparent); }
.fv-seda i:nth-child(3) { top: 26%; height: 20%; animation: fv-s3 14s steps(84) infinite alternate;
  background: linear-gradient(180deg, transparent, var(--fv-brillo) 50%, transparent); }
@keyframes fv-s1 { 0% { transform: rotate(-28deg) translate3d(-10%, -6%, 0) scaleY(.8); } 25% { transform: rotate(-19deg) translate3d(-2%, 14%, 0) scaleY(1.35); }
  50% { transform: rotate(-31deg) translate3d(8%, 4%, 0) scaleY(.75); } 75% { transform: rotate(-20deg) translate3d(4%, -14%, 0) scaleY(1.25); } 100% { transform: rotate(-26deg) translate3d(-6%, 2%, 0) scaleY(1); } }
@keyframes fv-s2 { 0% { transform: rotate(-36deg) translate3d(8%, 8%, 0) scaleY(.85); } 25% { transform: rotate(-26deg) translate3d(0, -14%, 0) scaleY(1.3); }
  50% { transform: rotate(-38deg) translate3d(-10%, -4%, 0) scaleY(.8); } 75% { transform: rotate(-27deg) translate3d(-4%, 14%, 0) scaleY(1.2); } 100% { transform: rotate(-33deg) translate3d(6%, 2%, 0) scaleY(1); } }
@keyframes fv-s3 { 0% { transform: rotate(-30deg) translate3d(-8%, -10%, 0) scaleY(.7); } 25% { transform: rotate(-20deg) translate3d(4%, 18%, 0) scaleY(1.5); }
  50% { transform: rotate(-33deg) translate3d(10%, 6%, 0) scaleY(.7); } 75% { transform: rotate(-22deg) translate3d(2%, -16%, 0) scaleY(1.4); } 100% { transform: rotate(-28deg) translate3d(-8%, -4%, 0) scaleY(1); } }

/* Ondas: tres olas que fluyen de verdad (sin fin, cada una a su velocidad y la del medio al revés) y suben
   y bajan. Cada ola es una tira el doble de ancha que la pantalla con la forma de la ola repetida
   (mask-image); avanzar media tira la deja igual que al empezar, así que el bucle no se nota. */
.fv-ondas { background: linear-gradient(180deg, var(--fv-b1), var(--fv-b2) 55%, color-mix(in oklab, var(--fv-c1) 30%, var(--fv-b2))); }
.fv-ondas i { left: 0; bottom: -2%; width: 200%; transform-origin: 50% 100%;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0 50Q125 0 250 50T500 50T750 50T1000 50V100H0z'/></svg>") repeat-x 0 0 / 50% 100%; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0 50Q125 0 250 50T500 50T750 50T1000 50V100H0z'/></svg>") repeat-x 0 0 / 50% 100%; }
.fv-ondas i:nth-child(1) { height: 56%; background: linear-gradient(180deg, color-mix(in oklab, var(--fv-c3) 75%, transparent), color-mix(in oklab, var(--fv-c1) 55%, transparent));
  animation: fv-ola-izq 30s steps(720) infinite, fv-vaiven 9s steps(108) infinite alternate; }
.fv-ondas i:nth-child(2) { height: 44%; background: linear-gradient(180deg, color-mix(in oklab, var(--fv-c2) 80%, transparent), color-mix(in oklab, var(--fv-c2) 55%, transparent));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'><path d='M0 50Q100 4 200 50T400 50T600 50T800 50T1000 50T1200 50V100H0z'/></svg>") repeat-x 0 0 / 50% 100%; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'><path d='M0 50Q100 4 200 50T400 50T600 50T800 50T1000 50T1200 50V100H0z'/></svg>") repeat-x 0 0 / 50% 100%;
  animation: fv-ola-der 22s steps(528) infinite, fv-vaiven 7s steps(84) infinite alternate-reverse; }
.fv-ondas i:nth-child(3) { height: 30%; background: linear-gradient(180deg, var(--fv-c1), color-mix(in oklab, var(--fv-c1) 80%, var(--fv-b2)));
  animation: fv-ola-izq 15s steps(360) infinite, fv-vaiven 5.5s steps(66) infinite alternate; }
@keyframes fv-ola-izq { from { translate: 0 0; } to { translate: -50% 0; } }
@keyframes fv-ola-der { from { translate: -50% 0; } to { translate: 0 0; } }
@keyframes fv-vaiven { 0% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-5%) scaleY(1.14); } 100% { transform: translateY(3%) scaleY(.92); } }

/* Burbujas: diez burbujas de luz que suben desde abajo meciéndose y se van por arriba, sin fin. Cada pieza
   ocupa toda la capa (así subir un 160 % es subir la pantalla entera, también en la miniatura); la burbuja es
   su ::before, que se mece de lado mientras la pieza sube. */
.fv-burbujas { background: linear-gradient(150deg, var(--fv-b1), var(--fv-b2)); }
.fv-burbujas i { inset: 0; animation-name: fv-sube; animation-iteration-count: infinite; }
.fv-burbujas i::before { content: ""; position: absolute; top: 100%; aspect-ratio: 1; border-radius: 50%; will-change: translate;
  background: radial-gradient(circle at 34% 30%, var(--fv-brillo), transparent 26%), radial-gradient(closest-side, var(--c) 0 62%, transparent);
  animation: fv-mece var(--m, 5s) steps(var(--mp, 120)) infinite alternate; }
.fv-burbujas i:nth-child(1)  { --c: color-mix(in oklab, var(--fv-c1) 85%, transparent); animation-duration: 16s; animation-timing-function: steps(384); animation-delay: -3s; }
.fv-burbujas i:nth-child(1)::before  { left: 8%;  width: 15%; --m: 4.5s; --mp: 108; }
.fv-burbujas i:nth-child(2)  { --c: color-mix(in oklab, var(--fv-c2) 85%, transparent); animation-duration: 22s; animation-timing-function: steps(528); animation-delay: -15s; }
.fv-burbujas i:nth-child(2)::before  { left: 70%; width: 22%; --m: 6s; --mp: 144; }
.fv-burbujas i:nth-child(3)  { --c: color-mix(in oklab, var(--fv-c3) 85%, transparent); animation-duration: 13s; animation-timing-function: steps(312); animation-delay: -8s; }
.fv-burbujas i:nth-child(3)::before  { left: 52%; width: 9%; --m: 3.5s; --mp: 84; }
.fv-burbujas i:nth-child(4)  { --c: color-mix(in oklab, var(--fv-c1) 60%, transparent); animation-duration: 26s; animation-timing-function: steps(624); animation-delay: -20s; }
.fv-burbujas i:nth-child(4)::before  { left: 24%; width: 26%; --m: 7s; --mp: 168; }
.fv-burbujas i:nth-child(5)  { --c: color-mix(in oklab, var(--fv-c4) 85%, transparent); animation-duration: 19s; animation-timing-function: steps(456); animation-delay: -5s; }
.fv-burbujas i:nth-child(5)::before  { left: 84%; width: 13%; --m: 5s; --mp: 120; }
.fv-burbujas i:nth-child(6)  { --c: color-mix(in oklab, var(--fv-c2) 70%, transparent); animation-duration: 15s; animation-timing-function: steps(360); animation-delay: -11s; }
.fv-burbujas i:nth-child(6)::before  { left: 38%; width: 11%; --m: 4s; --mp: 96; }
.fv-burbujas i:nth-child(7)  { --c: color-mix(in oklab, var(--fv-c1) 80%, transparent); animation-duration: 24s; animation-timing-function: steps(576); animation-delay: -2s; }
.fv-burbujas i:nth-child(7)::before  { left: 2%;  width: 8%; --m: 3.75s; --mp: 90; }
.fv-burbujas i:nth-child(8)  { --c: color-mix(in oklab, var(--fv-c3) 70%, transparent); animation-duration: 18s; animation-timing-function: steps(432); animation-delay: -13s; }
.fv-burbujas i:nth-child(8)::before  { left: 60%; width: 17%; --m: 5.5s; --mp: 132; }
.fv-burbujas i:nth-child(9)  { --c: color-mix(in oklab, var(--fv-c4) 65%, transparent); animation-duration: 28s; animation-timing-function: steps(672); animation-delay: -9s; }
.fv-burbujas i:nth-child(9)::before  { left: 88%; width: 20%; --m: 6.5s; --mp: 156; }
.fv-burbujas i:nth-child(10) { --c: color-mix(in oklab, var(--fv-c2) 80%, transparent); animation-duration: 14s; animation-timing-function: steps(336); animation-delay: -6s; }
.fv-burbujas i:nth-child(10)::before { left: 30%; width: 7%; --m: 3.25s; --mp: 78; }
@keyframes fv-sube { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, -160%, 0); } }
@keyframes fv-mece { from { translate: -40% 0; } to { translate: 40% 0; } }

/* Atardecer: el cielo cambia de tono, el sol baja y sube con su halo latiendo, dos nubes cruzan sin parar y
   el agua brilla. El cambio de tono (la primera pieza, una capa que se enciende y se apaga) es lo que más se
   nota detrás de las tarjetas. */
.fv-atardecer { background: linear-gradient(180deg, color-mix(in oklab, var(--fv-c1) 70%, var(--fv-b1)) 0%, color-mix(in oklab, var(--fv-c2) 75%, var(--fv-b1)) 58%,
                color-mix(in oklab, var(--fv-c1) 65%, var(--fv-b2)) 66%, color-mix(in oklab, var(--fv-c1) 40%, var(--fv-b2)) 100%); }
.fv-atardecer i:nth-child(1) { inset: 0 0 34% 0; animation: fv-cielo 9s steps(216) infinite alternate;
  background: linear-gradient(180deg, color-mix(in oklab, var(--fv-c3) 85%, transparent), transparent 85%); }
.fv-atardecer i:nth-child(2) { left: 30%; top: -14%; width: 80%; aspect-ratio: 1; animation: fv-halo 6s steps(144) infinite alternate;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--fv-c2) 65%, transparent), transparent); }
.fv-atardecer i:nth-child(3) { left: 52%; top: 14%; width: 34%; aspect-ratio: 1; animation: fv-sol 10s steps(240) infinite alternate;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--fv-c2) 35%, #fff) 0 30%, color-mix(in oklab, var(--fv-c2) 70%, transparent) 58%, transparent); }
.fv-atardecer i:nth-child(4) { left: 0; top: 14%; width: 60%; height: 17%; animation: fv-nube 34s steps(408) infinite; animation-delay: -10s;
  background: radial-gradient(50% 50% at 50% 50%, var(--fv-nube), transparent 72%); }
.fv-atardecer i:nth-child(5) { left: 0; top: 4%; width: 46%; height: 12%; opacity: .8; animation: fv-nube 48s steps(576) infinite; animation-delay: -36s;
  background: radial-gradient(50% 50% at 50% 50%, var(--fv-nube), transparent 72%); }
.fv-atardecer i:nth-child(6) { left: -10%; top: 60%; width: 120%; height: 12%; animation: fv-reflejo 5s steps(120) infinite alternate;
  background: linear-gradient(90deg, transparent, var(--fv-destello) 28%, transparent 46%, var(--fv-destello) 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent); }
.fv-atardecer i:nth-child(7) { left: 20%; top: 72%; width: 80%; height: 8%; animation: fv-reflejo 7s steps(168) infinite alternate-reverse;
  background: linear-gradient(90deg, transparent, var(--fv-destello) 35%, transparent 55%, var(--fv-destello) 80%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent); }
@keyframes fv-cielo { 0% { opacity: .1; } 100% { opacity: .9; } }
@keyframes fv-sol { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-6%, 16%, 0) scale(1.18); } }
@keyframes fv-halo { 0% { transform: scale(.94); opacity: .6; } 100% { transform: scale(1.2); opacity: 1; } }
@keyframes fv-nube { 0% { transform: translate3d(-110%, 0, 0); } 50% { transform: translate3d(50%, 10%, 0); } 100% { transform: translate3d(210%, 0, 0); } }
@keyframes fv-reflejo { 0% { transform: translate3d(-8%, 0, 0) scaleX(.9); opacity: .45; } 100% { transform: translate3d(8%, 0, 0) scaleX(1.1); opacity: 1; } }

/* En pequeño, en las miniaturas del selector: la misma capa, dentro de su recuadro y sin velo. */
.fondo-vivo.fv-mini { position: absolute; inset: 0; z-index: auto; opacity: 1; filter: none; }
.fondo-vivo.fv-mini::after { content: none; }

/* ---------------------------------------------------------------- el selector (Ajustes y Mi cuenta) */
.fs-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin: 10px 0 12px; }
.fs-op { display: grid; gap: 6px; padding: 6px; border-radius: 14px; border: 1.5px solid var(--divider); background: var(--vidrio-fuerte);
  cursor: pointer; text-align: center; color: var(--text-dark); transition: border-color .2s ease, transform .15s ease; }
.fs-op:hover:not(:disabled) { transform: translateY(-1px); border-color: color-mix(in oklab, var(--marca) 45%, transparent); }
.fs-op[aria-checked="true"] { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in oklab, var(--marca) 18%, transparent); }
.fs-op small { font-size: 12px; color: var(--text-muted); }
.fs-mini { display: block; height: 62px; border-radius: 9px; overflow: hidden; background: var(--dash-bg); position: relative; }
.fs-mini img, .fs-mini .fs-abs { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fs-mini .fs-abs { filter: blur(6px); transform: scale(1.15); }
.fs-texto { display: grid; place-items: center; height: 100%; padding: 4px; font-size: 11.5px; color: var(--text-muted); line-height: 1.25; }
.fs-nota { display: block; margin-top: 6px; }
.fs-mov { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--text-dark); cursor: pointer; }
.fs-mov[hidden] { display: none; }
.fs-mov input { width: 16px; height: 16px; accent-color: var(--marca); }
.fs-mov small { color: var(--text-muted); font-size: 12px; }
.fs-ajustes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 20px; margin-top: 12px; }
.fs-ajustes label { display: grid; gap: 4px; font-size: 13px; color: var(--text-muted); }
.fs-ajustes input[type="range"] { width: 100%; accent-color: var(--marca); }
/* El padding vive en .est-cuerpo (como en .marca-edit), no en el panel. */
.est-cuerpo { padding: 0 20px 20px; }
.est-cuerpo > .nota-privada:first-child { margin-top: 0; }
@media (max-width: 860px) { .est-cuerpo { padding: 0 14px 16px; } }
.est-sub { margin: 22px 0 8px; font-size: 16px; }
.est-lista-mini { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.est-lista-mini .est-previa { height: 48px; padding: 7px; gap: 4px; }
.est-lista-mini .est-previa i { margin-bottom: 12px; }
.est-lista-mini .est-previa b { width: 30px; height: 8px; bottom: 6px; right: 7px; }
.est-lista-mini .est-opcion { padding: 8px; gap: 6px; }