/* login_fondo.css — Fondos animados y personalizables del LOGIN (2026-10-04).

   Rol: estilos del escenario que `login_fondo.js` monta dentro de `.tz-auth-bg`, de sus capas de vida (aves, sol, bruma,
   brújula, nodos, motas, barrido) y del botón/panel «Mi fondo». No decide ningún color de la app: usa las variables del
   login (`--tz-auth-card-bg`, `--tz-auth-card-border`). La temporada (`themes/season.js`) NO se pinta en el login
   (2026-10-04): empieza al entrar a la app.

   Reglas de diseño: movimiento lento, pocas piezas, sin parpadeos. Todo se apaga con `data-mov="off"` (preferencia de la
   persona) o con `prefers-reduced-motion`, y se pausa con `data-pausado` (pestaña oculta o app ya abierta). */

/* El fondo original se conserva hasta que la imagen nueva carga (el JS pone data-lf-escena al terminar de cargar). */
#auth-view[data-lf-escena]:not([data-lf-escena="original"]) .tz-auth-bg { background-image: none; overflow: hidden; }

.lf-escenario { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none;
  animation: lfEntrada 900ms ease-out both; --lf-s: 1; }
.lf-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.lf-escenario[data-respira="1"] .lf-img { animation: lfRespirar 38s ease-in-out infinite alternate; }
.lf-capa { position: absolute; inset: 0; overflow: hidden; }
.lf-zona { position: absolute; overflow: hidden; }

/* ---------- Sol: un resplandor que respira ---------- */
.lf-sol { position: absolute; width: calc(var(--lf-s) * var(--t, 520) * 1px); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 226, 160, .55) 0%, rgba(255, 214, 140, .22) 38%, transparent 68%);
  mix-blend-mode: screen; animation: lfSol 8s ease-in-out infinite; }

/* ---------- Bruma: una banda de niebla que se desplaza muy despacio ---------- */
.lf-bruma { position: absolute; left: -25%; width: 150%; height: calc(var(--lf-s) * 150px);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .28) 50%, transparent 100%);
  filter: blur(calc(var(--lf-s) * 18px)); animation: lfBruma 52s ease-in-out infinite alternate; }

/* ---------- Barrido: un brillo suave que cruza la imagen y descansa ---------- */
.lf-barrido { position: absolute; inset: -10%; transform: translateX(-70%); mix-blend-mode: soft-light;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 240, 205, .34) 50%, transparent 58%);
  animation: lfBarrido 18s ease-in-out infinite; }

/* ---------- Motas doradas ---------- */
.lf-mota { position: absolute; width: calc(var(--lf-s) * 6px); height: calc(var(--lf-s) * 6px); border-radius: 50%; opacity: 0;
  background: rgba(255, 214, 140, .9); box-shadow: 0 0 calc(var(--lf-s) * 10px) rgba(255, 200, 120, .8);
  animation: lfMota var(--d, 18s) ease-in-out infinite; animation-delay: var(--r, 0s); }
.lf-mota[data-tono="claro"] { background: rgba(190, 140, 60, .85); box-shadow: 0 0 calc(var(--lf-s) * 8px) rgba(190, 140, 60, .55); }

/* ---------- Nodos del mapa: un pulso que se abre y se apaga ---------- */
.lf-nodo { position: absolute; width: calc(var(--lf-s) * 80px); height: calc(var(--lf-s) * 80px); transform: translate(-50%, -50%); }
.lf-nodo::before, .lf-nodo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0;
  border: calc(var(--lf-s) * 2px) solid rgba(190, 130, 40, .8); animation: lfPulso 6s ease-out infinite; animation-delay: var(--r, 0s); }
.lf-nodo::after { animation-delay: calc(var(--r, 0s) + 3s); }

/* ---------- Brújula: la tarjeta gira en perspectiva (la aguja apunta al sur, luego al norte) ---------- */
.lf-br-plano { position: absolute; transform: translate(-50%, -50%) scaleY(var(--k, .6));
  -webkit-mask-image: radial-gradient(circle closest-side, #000 88%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 88%, transparent 100%); }
.lf-br-disco { width: 100%; height: 100%; border-radius: 50%; background-repeat: no-repeat; animation: lfBrujula 26s infinite; }

/* ---------- Aves: poco numerosas, lentas y limpias ---------- */
.lf-ave { position: absolute; width: calc(var(--lf-s) * var(--tam, 36) * 1px); opacity: 0; color: #2a323c;
  animation: lfVuelo var(--dur, 34s) linear infinite; animation-delay: var(--ret, 0s); }
.lf-ave[data-tono="claro"] { color: #f1ead8; }
.lf-ave svg { display: block; width: 100%; overflow: visible; animation: lfOndula 5s ease-in-out infinite alternate; animation-delay: var(--ret, 0s); }
.lf-ala-i, .lf-ala-d { fill: currentColor; transform-box: view-box; transform-origin: 20px 10px; }
.lf-ala-i { animation: lfAleteoI var(--ale, 1.1s) ease-in-out infinite alternate; }
.lf-ala-d { animation: lfAleteoD var(--ale, 1.1s) ease-in-out infinite alternate; }
.lf-cuerpo { fill: currentColor; }

/* ---------- Movimiento apagado o en pausa ---------- */
.lf-escenario[data-mov="off"], .lf-escenario[data-mov="off"] * { animation: none !important; }
.lf-escenario[data-pausado], .lf-escenario[data-pausado] * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .lf-escenario, .lf-escenario * { animation: none !important; } }

@keyframes lfEntrada { from { opacity: 0; } to { opacity: 1; } }
@keyframes lfRespirar { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes lfSol { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .95; transform: translate(-50%, -50%) scale(1.1); } }
@keyframes lfBruma { from { transform: translateX(-9%); } to { transform: translateX(9%); } }
@keyframes lfBarrido { 0%, 22% { transform: translateX(-70%); } 68%, 100% { transform: translateX(70%); } }
@keyframes lfMota { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: .85; } 75% { opacity: .6; }
  100% { opacity: 0; transform: translateY(calc(var(--lf-s) * -110px)); } }
@keyframes lfPulso { 0% { opacity: .85; transform: scale(.25); } 100% { opacity: 0; transform: scale(1.7); } }
/* La aguja nace a ~48° (noreste). +132° la lleva al sur; -48° al norte. Rebota un poco al llegar, como una aguja de verdad. */
@keyframes lfBrujula {
  0%, 16% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  30% { transform: rotate(140deg); }
  34% { transform: rotate(127deg); }
  38% { transform: rotate(135deg); }
  41%, 54% { transform: rotate(132deg); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  70% { transform: rotate(-56deg); }
  74% { transform: rotate(-42deg); }
  78% { transform: rotate(-51deg); }
  81%, 90% { transform: rotate(-48deg); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  100% { transform: rotate(0deg); }
}
@keyframes lfVuelo { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: .85; } 86% { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--dx, 300px), var(--dy, -40px)); } }
@keyframes lfOndula { from { transform: translateY(calc(var(--lf-s) * -5px)); } to { transform: translateY(calc(var(--lf-s) * 5px)); } }
@keyframes lfAleteoI { from { transform: rotate(20deg); } to { transform: rotate(-14deg); } }
@keyframes lfAleteoD { from { transform: rotate(-20deg); } to { transform: rotate(14deg); } }

/* ---------- Noche (tema oscuro): imagen propia de cada escena + capas nocturnas ----------
   La imagen de noche ya trae el cielo, la luna y las luces; aquí solo se les da vida: estrellas que titilan, luces de ciudad
   que parpadean muy despacio, la luna que respira y, en la brújula, una lámpara cálida. El velo del login se aligera para no
   apagar la imagen (la tarjeta oscura ya da el contraste del texto). */
#auth-view[data-lf-noche] .tz-auth-scrim { background: linear-gradient(180deg, rgba(6, 9, 24, .10) 0%, rgba(6, 9, 24, .40) 100%); }
.lf-estrella { position: absolute; width: calc(var(--lf-s) * 3px); height: calc(var(--lf-s) * 3px); border-radius: 50%; opacity: .7;
  background: #fff; box-shadow: 0 0 calc(var(--lf-s) * 7px) rgba(200, 215, 255, .95); animation: lfTitila var(--d, 6s) ease-in-out infinite; animation-delay: var(--r, 0s); }
.lf-luz { position: absolute; width: calc(var(--lf-s) * 2.6px); height: calc(var(--lf-s) * 2.6px); border-radius: 50%; opacity: .6;
  background: #ffcf7a; box-shadow: 0 0 calc(var(--lf-s) * 6px) rgba(255, 190, 90, .9); animation: lfLuz var(--d, 10s) ease-in-out infinite; animation-delay: var(--r, 0s); }
.lf-luna { background: radial-gradient(circle, rgba(222, 232, 255, .55) 0%, rgba(170, 195, 255, .20) 38%, transparent 68%); }
.lf-lampara { position: absolute; width: calc(var(--lf-s) * var(--t, 800) * 1px); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 186, 96, .30) 0%, rgba(255, 170, 80, .12) 40%, transparent 68%);
  mix-blend-mode: screen; animation: lfLampara 7s ease-in-out infinite; }
.lf-escenario[data-noche="1"] .lf-barrido { background: linear-gradient(105deg, transparent 42%, rgba(185, 205, 255, .24) 50%, transparent 58%); mix-blend-mode: screen; }
.lf-escenario[data-noche="1"] .lf-nodo::before, .lf-escenario[data-noche="1"] .lf-nodo::after { border-color: rgba(238, 178, 84, .95); }
.lf-escenario[data-noche="1"] .lf-bruma { background: linear-gradient(90deg, transparent 0%, rgba(150, 175, 230, .18) 50%, transparent 100%); }
@keyframes lfTitila { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes lfLuz { 0%, 100% { opacity: .25; } 45% { opacity: .95; } 70% { opacity: .5; } }
@keyframes lfLampara { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* ---------- Identidad de la tarjeta ----------
   Las imágenes ya traen el logo de TRAZA, así que con una escena activa la tarjeta no repite la palabra «TRAZA» y deja solo
   «Control interno», un poco más grande: a qué se entra. Con el fondo «Original» (la foto sin logo) todo queda como estaba. */
#auth-view[data-lf-escena]:not([data-lf-escena="original"]) .tz-auth-wordmark { display: none; }
#auth-view[data-lf-escena]:not([data-lf-escena="original"]) .tz-auth-kicker { font-size: 20px; }
@media (max-width: 720px) { #auth-view[data-lf-escena]:not([data-lf-escena="original"]) .tz-auth-kicker { font-size: 17px; } }

/* ---------- Botón y panel «Mi fondo» ---------- */
.lf-boton { position: absolute; right: 18px; bottom: 18px; z-index: 4; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer; padding: 0; color: var(--text, #201f1d); opacity: .72;
  background: var(--tz-auth-card-bg); border: 1px solid var(--tz-auth-card-border);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity 160ms ease, transform 160ms ease; }
.lf-boton:hover, .lf-boton[aria-expanded="true"] { opacity: 1; transform: scale(1.06); }
.lf-boton:focus-visible, .lf-opcion:focus-visible, .lf-mini:focus-visible, .lf-mov input:focus-visible { outline: 2px solid #b68235; outline-offset: 2px; }
.lf-boton svg { width: 18px; height: 18px; display: block; }

.lf-panel { position: absolute; right: 18px; bottom: 66px; z-index: 4; width: min(318px, calc(100vw - 36px)); padding: 14px 14px 12px;
  border-radius: 14px; color: var(--text, #201f1d); background: var(--tz-auth-card-bg); border: 1px solid var(--tz-auth-card-border);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, .25));
  display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.lf-panel h2 { margin: 0; font-size: 14px; font-weight: 600; }
.lf-panel p { margin: 0; opacity: .75; font-size: 12px; line-height: 1.35; }
.lf-opciones { display: flex; gap: 6px; flex-wrap: wrap; }
.lf-opcion { cursor: pointer; font: inherit; color: inherit; padding: 6px 10px; border-radius: 999px; background: transparent;
  border: 1px solid var(--tz-auth-card-border); }
.lf-opcion[aria-pressed="true"] { background: rgba(182, 130, 53, .22); border-color: #b68235; }
.lf-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lf-mini { cursor: pointer; aspect-ratio: 16 / 9; border-radius: 8px; padding: 0; background-size: cover; background-position: center;
  border: 2px solid transparent; position: relative; }
.lf-mini[aria-pressed="true"] { border-color: #b68235; }
.lf-mini span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px; font-size: 10px; text-align: left; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .6)); border-radius: 0 0 6px 6px; }
.lf-mov { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.lf-mov input { width: 16px; height: 16px; accent-color: #b68235; }
.lf-mov[data-bloqueado="1"] { opacity: .6; cursor: not-allowed; }
@media (max-width: 720px) { .lf-boton { right: 12px; bottom: 12px; } .lf-panel { right: 12px; bottom: 60px; } }