/* Franja "Pintar está usando tu ubicación" (ubicacion-activa.js; mockup mockups/pintar-aviso-ubicacion.html, pantalla 4).
   Arriba de todo menos de las hojas (cg-fondo es 1500): siempre a la vista mientras una salida usa la ubicación. */
#ua-franja { position: fixed; left: 12px; right: 12px; top: calc(10px + var(--sa-arriba, 0px)); z-index: 1400; max-width: 560px; margin: 0 auto;
  font-family: inherit; }
#ua-franja[hidden] { display: none; }
#ua-franja .ua-barra { display: flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; border-radius: 18px;
  padding: 8px 8px 8px 12px; box-shadow: 0 12px 30px rgba(31,29,26,.25); }
#ua-franja .ua-ir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; color: inherit;
  font: inherit; text-align: left; cursor: pointer; padding: 2px 0; }
#ua-franja .ua-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--acc); flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 30%, transparent); animation: ua-latido 1.8s ease-in-out infinite; }
#ua-franja.pausa .ua-punto { background: #fff; opacity: .55; animation: none; box-shadow: none; }
#ua-franja .ua-txt { min-width: 0; }
#ua-franja .ua-txt b { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ua-franja .ua-txt small { display: block; font-size: 12px; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
#ua-franja .ua-det { flex: none; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 0; background: #fff; color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
#ua-franja .ua-menu { margin-top: 8px; background: var(--card, var(--surf)); color: var(--ink); border-radius: 18px; padding: 6px;
  box-shadow: 0 18px 40px rgba(31,29,26,.22); }
#ua-franja .ua-op { width: 100%; display: flex; gap: 12px; align-items: center; padding: 12px 10px; border: 0; border-radius: 12px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#ua-franja .ua-op + .ua-op { border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }
#ua-franja .ua-op:hover { background: var(--field); }
#ua-franja .ua-op .trazo { width: 20px; height: 20px; flex: none; }
#ua-franja .ua-op b { display: block; font-size: 14px; font-weight: 500; }
#ua-franja .ua-op small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
#ua-franja .ua-op.peligro b { color: var(--danger, #B3261E); }
@keyframes ua-latido { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--acc) 12%, transparent); } }
@media (prefers-reduced-motion: reduce) { #ua-franja .ua-punto { animation: none; } }