/* fondo_modulos.css — Fondo institucional de toda el área de trabajo, después del login (2026-10-04).

   Rol: estilos de la capa única que monta `fondo_modulos.js` como primer hijo de `.tz-main` (todo lo que queda a la derecha del menú y
   bajo la barra superior: portal de módulos, Circulares, Actividades, etc.). El login NO usa nada de aquí (login_fondo.css está cerrado).
   Los diez fondos (5 de noche, 5 de día) están en assets/fondos/.

   Reglas: la capa va DETRÁS del contenido y no recibe clics; cubre TODA el área (sin franjas arriba ni abajo); el velo es mínimo
   porque las tarjetas y paneles ya traen su propio cristal; la vida es un desplazamiento muy lento de la imagen y polvo dorado que
   sube. Todo se apaga con `data-mov="off"` o con prefers-reduced-motion. Reemplaza al fondo anterior (foto del portal y foto de
   montaña del modo día), que se eliminó de traza-core.css. */

/* La capa es FIJA al tamaño de la ventana y va detrás de TODO el shell (barra superior, menú lateral y área de trabajo): así el menú
   que se despliega y la barra no cortan la imagen. Vive en el contexto de apilamiento de .tz-app (z-index negativo), por eso no hace
   falta tocar la posición de ningún hijo. */
.tz-app[data-fm] { position: relative; isolation: isolate; }
.tz-app[data-fm] > .fm-fondo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #0b1020; }
:root:not([data-tz-theme="dark"]) .tz-app[data-fm] > .fm-fondo { background: #f6f3ec; }
/* Barra superior y menú lateral pasan a cristal para dejar ver la imagen; la foto de cumbre del menú sobra con el fondo nuevo. */
:root .tz-app[data-fm] .tz-header, :root .tz-app[data-fm] .tz-rail { -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); }
:root .tz-app[data-fm] .tz-header { background: rgba(236, 228, 212, .66); border-bottom-color: rgba(176, 138, 70, .28); }
:root .tz-app[data-fm] .tz-rail { background: rgba(236, 228, 212, .52); border-right-color: rgba(176, 138, 70, .22); }
:root[data-tz-theme="dark"] .tz-app[data-fm] .tz-header { background: rgba(9, 13, 30, .64); border-bottom-color: rgba(212, 162, 76, .26); }
:root[data-tz-theme="dark"] .tz-app[data-fm] .tz-rail { background: rgba(9, 13, 30, .52); border-right-color: rgba(212, 162, 76, .18); }
.tz-app[data-fm] .tz-rail-foto { display: none; }
/* El desenfoque convierte la barra en su propio contexto de apilamiento: sin z-index el menú del usuario («Mi perfil», «Salir») y lo que
   cuelga de ella quedaban por debajo del área de trabajo. Se sube por encima del contenido. */
.tz-app[data-fm] .tz-header { position: relative; z-index: 40; }
.tz-app[data-fm] .tz-header:not(.tz-header-solo-salir) { position: sticky; top: 0; }   /* la barra superior no se oculta al desplazarse */
:root:root .tz-app[data-fm] .tz-header.tz-header-solo-salir { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Fondo NEUTRO (escena 6): sin imagen; usa --color-bg y --color-accent del tema, de modo que las ambientaciones de temporada
   (Halloween, Navidad, Año Nuevo…) lo tiñen solas al cambiar esas variables. Sin polvo ni deriva: es el fondo tranquilo. */
:root:root .tz-app[data-fm] > .fm-fondo[data-escena="6"] {
  background:
    radial-gradient(70% 55% at 88% 0%, color-mix(in srgb, var(--color-accent) 11%, transparent), transparent 70%),
    radial-gradient(60% 50% at 6% 100%, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 70%),
    var(--color-bg);
}
/* Neutro de DÍA: más cuerpo de color. Tres luces pastel del acento del tema sobre un lienzo cálido, para que cada ambientación
   (Halloween, Navidad, Año Nuevo, Madre…) se note de verdad sin perder limpieza ni contraste. Sin ambientación el acento es el dorado. */
:root:not([data-tz-theme="dark"]):root .tz-app[data-fm] > .fm-fondo[data-escena="6"] {
  background:
    radial-gradient(70% 62% at 96% -8%, var(--fm-luz-a, transparent) 0%, transparent 66%),
    radial-gradient(62% 58% at 2% 106%, var(--fm-luz-b, transparent) 0%, transparent 68%),
    linear-gradient(160deg, #f5f5f3 0%, #e9e9e7 100%);
}
/* Sin ambientación el neutro de día es blanco grisáceo. Con una ambientación activa recibe sus luces (blanco con luz de color,
   como la guía de Diego): por defecto las del acento del tema; cada tema puede fijar las suyas en sus estilos. */
:root[data-tz-season] { --fm-luz-a: color-mix(in srgb, var(--color-accent) 22%, #ffffff); --fm-luz-b: color-mix(in srgb, var(--color-accent) 14%, #eef0f3); }
.fm-fondo[data-escena="6"] .fm-img, .fm-fondo[data-escena="6"] .fm-polvo, .fm-fondo[data-escena="6"] .fm-velo { display: none; }
.fm-mini[data-escena="6"] { background-image: radial-gradient(90% 80% at 85% 0%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%), linear-gradient(var(--color-bg), var(--color-bg));
  border-color: var(--color-divider); }
.fm-mini[data-escena="6"][aria-pressed="true"] { border-color: var(--color-accent); }

.fm-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none;
  transform: scale(1.07); animation: fmEntra .9s ease both; }
.fm-fondo[data-mov="on"] .fm-img { animation: fmEntra .9s ease both, fmDeriva 90s ease-in-out .9s infinite alternate; }

/* Velo mínimo: la imagen es la protagonista; el texto sobre las tarjetas lo sostiene su propio cristal. */
.fm-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 9, 22, .08) 0%, rgba(6, 9, 22, .24) 100%); }
:root:not([data-tz-theme="dark"]) .fm-velo { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .10) 100%); }

/* Polvo dorado: pocas motas lentas que suben y se apagan. */
.fm-polvo { position: absolute; inset: 0; overflow: hidden; }
.fm-mota { position: absolute; width: var(--t, 5px); height: var(--t, 5px); border-radius: 50%; opacity: 0; background: rgba(255, 216, 150, .95);
  box-shadow: 0 0 calc(var(--t, 5px) * 3) rgba(255, 200, 120, .75); filter: blur(.4px); }
:root:not([data-tz-theme="dark"]) .fm-mota { background: rgba(214, 160, 70, .85); box-shadow: 0 0 calc(var(--t, 5px) * 2.6) rgba(214, 160, 70, .55); }
.fm-fondo[data-mov="on"] .fm-mota { animation: fmAsciende var(--d, 40s) ease-in-out infinite; animation-delay: var(--r, 0s); }

.fm-fondo[data-mov="off"] .fm-img { animation: fmEntra .9s ease both; }
@media (prefers-reduced-motion: reduce) { .fm-img { animation: fmEntra .9s ease both !important; } .fm-mota { animation: none !important; } }

@keyframes fmEntra { from { opacity: 0; } to { opacity: 1; } }
@keyframes fmDeriva { from { transform: scale(1.07) translate3d(-1.4%, -.9%, 0); } to { transform: scale(1.07) translate3d(1.4%, .9%, 0); } }
@keyframes fmAsciende { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 18% { opacity: .85; } 70% { opacity: .55; }
  100% { opacity: 0; transform: translate3d(var(--sx, 0vw), -42vh, 0); } }

/* ---------- Botón y panel «Mi fondo» (fijos en la esquina; a la izquierda de la mascota de Pool) ---------- */
.fm-boton { position: fixed; left: 14px; bottom: 14px; z-index: 5; width: 38px; height: 38px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; cursor: pointer; color: var(--color-text); opacity: 0; pointer-events: none;
  background: var(--tz-panel, rgba(20, 23, 36, .7)); border: 1px solid var(--color-divider);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity .16s ease, transform .16s ease; }
.fm-boton.fm-visible, .fm-boton:focus-visible, .fm-boton[aria-expanded="true"] { opacity: 1; pointer-events: auto; }
.fm-boton:hover { transform: scale(1.06); }
@media (hover: none) { .fm-boton { opacity: .55; pointer-events: auto; } }
.fm-boton:focus-visible, .fm-opcion:focus-visible, .fm-mini:focus-visible, .fm-mov input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.fm-boton svg { width: 18px; height: 18px; display: block; }

.fm-panel { position: fixed; left: 14px; bottom: 60px; z-index: 5; width: min(318px, calc(100vw - 36px)); padding: 14px; border-radius: 14px;
  color: var(--color-text); background: var(--tz-panel, rgba(20, 23, 36, .9)); border: 1px solid var(--color-divider);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.fm-panel h2 { margin: 0; font-size: 14px; font-weight: 600; }
.fm-panel p { margin: 0; opacity: .72; font-size: 12px; }
.fm-opciones { display: flex; gap: 6px; }
.fm-opcion { cursor: pointer; font: inherit; color: inherit; padding: 6px 12px; border-radius: 999px; background: transparent; border: 1px solid var(--color-divider); }
.fm-opcion[aria-pressed="true"] { background: color-mix(in srgb, var(--color-accent) 22%, transparent); border-color: var(--color-accent); }
.fm-minis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.fm-mini { cursor: pointer; aspect-ratio: 1; border-radius: 8px; padding: 0; background-size: cover; background-position: center; border: 2px solid transparent; }
.fm-mini[aria-pressed="true"] { border-color: var(--color-accent); }
.fm-mov { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.fm-mov input { width: 16px; height: 16px; accent-color: var(--color-accent); }