/* ═══════════════════════════════════════════════════════════════════════════
   background-app-estrias · tokens
   Tres temas. Cada uno define los dos extremos del degradado, el nivel base
   del mapa y la escala con que se remapea. En Day la escala es NEGATIVA: el
   mapa se invierte, y por eso el mismo dibujo sirve en claro sin quedar como
   un agujero negro.
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
:root[data-sf-theme="night"]{
  --sf-hz-a:23,23,23;      /* extremo oscuro */
  --sf-hz-b:47,47,47;      /* extremo claro  */
  --sf-escala:0.40;
  color-scheme:dark;
}

:root[data-sf-theme="midnight"]{
  --sf-hz-a:21,25,31;
  --sf-hz-b:45,51,61;
  --sf-escala:0.42;
  color-scheme:dark;
}

:root[data-sf-theme="day"]{
  --sf-hz-a:214,214,214;
  --sf-hz-b:241,241,241;
  --sf-escala:-0.38;
  color-scheme:light;
}

/* El lienzo. canvas es un elemento reemplazado: con inset:0 y width auto se
   queda en su tamaño intrínseco de 300x150, hay que estirarlo a mano.
   z-index -1 dentro de un contexto de apilado propio: se pinta por encima del
   fondo del contenedor y por debajo de todo el contenido, sin tocar el
   z-index de ningún hermano. */
.sf-fondo-contenedor{ position:relative; isolation:isolate; }
.sf-fondo{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:-1; pointer-events:none;
}

/* Mientras se cambia de tema no se anima nada: si no, cada propiedad que
   dependa de un token hace su propia transición y el cambio se ve por partes. */
.sf-cambiando-tema *{ transition:none !important; }